// site-about-archive.jsx — About page reading all text from the CMS store.

const ABOUT_IMAGES = {
  poster1: "uploads/Poster-first-edition.png",
  poster2: "uploads/Poster-second-edition.png",
  poster3: "uploads/Poster-third-edition.png",
  poster4: "uploads/Poster-fourth-edition.png",
  poster5: "uploads/Poster-fifth-edition.png",
  poster6: "uploads/Poster-sixth-edition.png",
  book: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2021/04/film_festivals_history_theory_method_practice-1.jpg?resize=750%2C1130&ssl=1",
  littlewoods: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2023/01/littlewoods_pools_building_edge_lane_-_geograph.org_.uk_-_38344.jpg?resize=640%2C480&ssl=1",
  liverBirds: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2023/03/tale-of-liver-birds-01-min-edited.jpg?resize=750%2C422&ssl=1",
  banner: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/01/Website-Banner-Outlined-1.png?resize=750%2C276&ssl=1"
};

function AboutImg({ src, alt, ratio, style }) {
  return (
    <div style={{ overflow: "hidden", aspectRatio: ratio || "auto", ...style }}>
      <img src={src} alt={alt || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>);

}

// Render a single custom block from the CMS
function CustomBlock({ block }) {
  const layout = block.layout || "full-text";

  if (layout === "quote") {
    return (
      <section className="section tight">
        <div className="wrap" style={{ maxWidth: 800, margin: "0 auto" }}>
          <blockquote style={{ borderLeft: "3px solid var(--yellow)", paddingLeft: 24, margin: 0 }}>
            <p style={{ fontSize: "clamp(18px,2.5vw,28px)", lineHeight: 1.5, color: "var(--ink)", fontStyle: "italic", fontFamily: "var(--display)", fontWeight: 500, margin: "0 0 12px" }}>
              "{block.text}"
            </p>
            {block.text2 && <cite style={{ fontSize: 13, color: "var(--muted)", fontStyle: "normal" }}>{block.text2}</cite>}
          </blockquote>
        </div>
      </section>);

  }

  if (layout === "full-image") {
    return (
      <section className="section tight">
        <div className="wrap">
          {block.imageUrl && <img src={block.imageUrl} alt={block.text || ""} style={{ width: "100%", display: "block", maxHeight: 480, objectFit: "cover" }} />}
          {block.text && <p className="label muted" style={{ marginTop: 10, textAlign: "center", fontStyle: "italic" }}>{block.text}</p>}
        </div>
      </section>);

  }

  if (layout === "full-text") {
    return (
      <section className="section">
        <div className="wrap" style={{ maxWidth: 840 }}>
          {block.heading && <h2 className="display" style={{ fontSize: "clamp(26px,3.5vw,44px)", margin: "0 0 20px", lineHeight: 1.1 }}>{block.heading}</h2>}
          {block.text && <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--muted)" }}>{block.text}</p>}
        </div>
      </section>);

  }

  if (layout === "two-col") {
    return (
      <section className="section">
        <div className="wrap about-sec-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,4vw,64px)" }}>
          <div>
            {block.heading && <h3 className="display" style={{ fontSize: "clamp(20px,2.5vw,32px)", margin: "0 0 14px" }}>{block.heading}</h3>}
            {block.text && <p style={{ lineHeight: 1.75, fontSize: 15.5, color: "var(--muted)", margin: 0 }}>{block.text}</p>}
          </div>
          <div>
            {block.text2 && <p style={{ lineHeight: 1.75, fontSize: 15.5, color: "var(--muted)", margin: 0 }}>{block.text2}</p>}
          </div>
        </div>
      </section>);

  }

  // image-left or image-right
  const imgLeft = layout === "image-left";
  return (
    <section className="section">
      <div className="wrap about-sec-grid" style={{ display: "grid", gridTemplateColumns: imgLeft ? "1fr 1.4fr" : "1.4fr 1fr", gap: "clamp(28px,4vw,64px)", alignItems: "center" }}>
        {imgLeft && block.imageUrl && <AboutImg src={block.imageUrl} alt={block.heading || ""} ratio="4/3" />}
        <div>
          {block.heading && <h3 className="display" style={{ fontSize: "clamp(20px,2.5vw,34px)", margin: "0 0 16px", lineHeight: 1.1 }}>{block.heading}</h3>}
          {block.text && <p style={{ lineHeight: 1.75, fontSize: 15.5, color: "var(--muted)", margin: 0 }}>{block.text}</p>}
        </div>
        {!imgLeft && block.imageUrl && <AboutImg src={block.imageUrl} alt={block.heading || ""} ratio="4/3" />}
      </div>
    </section>);

}

function About({ navigate }) {
  const d = useSite();
  const f = d.festival;
  const ab = f.about || {};
  const imgs = ABOUT_IMAGES;
  const customBlocks = ab.customBlocks || [];

  // Helpers — fall back to seed text if store value is missing
  const t = (key, fallback) => ab[key] !== undefined && ab[key] !== "" ? ab[key] : fallback;

  return (
    <Page k="about">

      {/* ── Hero ── */}
      <section className="dark section">
        <div className="wrap about-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 48, alignItems: "end" }}>
          <div>
            <span className="eyebrow">About</span>
            <h1 className="display" style={{ marginTop: 18, lineHeight: 0.92, fontSize: "clamp(44px,11vw,105px)" }}>
              A school,<br />a festival,<br /><span style={{ color: "var(--coral-bright)", fontStyle: "italic", fontSize: "clamp(44px,11vw,105px)" }}>a city.</span>
            </h1>
          </div>
          <div style={{ borderTop: "1px solid var(--line-d)", paddingTop: 18 }}>
            {[["Established", "2021"], ["Edition", "Six"], ["Host", "LJMU"], ["Module leader", "Dr. L. Papadimitriou"], ["2026 dates", "20–27 March"]].map(([k, v], i) =>
            <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "11px 0", borderBottom: i < 4 ? "1px solid var(--line-d)" : "none" }}>
                <span className="label muted">{k}</span><span className="label" style={{ color: "var(--paper)" }}>{v}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Opening statement ── */}
      <section className="section">
        <div className="wrap">
          <p className="lead" style={{ maxWidth: 920, fontSize: "clamp(22px,3vw,36px)", lineHeight: 1.35, fontFamily: "var(--display)", fontWeight: 500, letterSpacing: "-0.01em", textAlign: "left" }}>
            {t("intro", "Since its inception in 2021, the LJMU MA Short Film Festival has been dedicated to showcasing the talents of student filmmakers from across the globe. Entries are accepted in the categories of fiction, documentary, and animation, with an experimental showcase featuring emergent talent that pushes the boundaries of film.")}
          </p>
        </div>
      </section>

      {/* ── Edition posters grid ── */}
      <section className="section tight" style={{ background: "var(--ink)" }}>
        <div className="wrap">
          <div className="label muted" style={{ marginBottom: 18 }}>EDITIONS · 2021 – 2026</div>
          <div className="editions-poster-grid" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
            {[
            [imgs.poster1, "First", "2021"],
            [imgs.poster2, "Second", "2022"],
            [imgs.poster3, "Third", "2023"],
            [imgs.poster4, "Fourth", "2024"],
            [imgs.poster5, "Fifth", "2025"],
            [imgs.poster6, "Sixth", "2026"]].
            map(([src, ed, year]) =>
            <div key={ed} style={{ overflow: "hidden", background: "var(--ink-2)" }}>
                <img src={src} alt={ed + " Edition poster · " + year} style={{ width: "100%", display: "block" }} loading="lazy" />
                <div style={{ padding: "8px 10px", borderTop: "1px solid var(--line-d)" }}>
                  <span className="label" style={{ color: "var(--muted-d)", fontSize: "10px" }}>{ed} Edition · {year}</span>
                </div>
              </div>
            )}
          </div>
          <div className="label muted" style={{ marginTop: 12, textAlign: "right" }}>The festival poster series</div>
        </div>
      </section>

      {/* ── What Makes Us Unique ── */}
      <section className="section">
        <div className="wrap about-sec-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,5vw,80px)", alignItems: "center" }}>
          <div>
            <Kicker n="§ 01">What makes us unique</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(28px,4vw,52px)", margin: "14px 0 20px" }}>Entirely student-run.</h2>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--ink)", marginBottom: 16 }}>
              {t("unique", "The LJMU MA Short Film Festival is unlike any other festival in that it is entirely run by the MA students at Liverpool John Moores University as part of the Exploring Film Festivals, Distribution and Exhibition module on their course. They do this under the guidance of module leader Dr. Lydia Papadimitriou and festival coordinator Martin Jones, but the festival rests almost completely in their control.")}
            </p>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--muted)" }}>
              {t("unique2", "The students make a huge effort to be inclusive of filmmakers from all genders, ethnicities, and parts of the world. This results in an incredibly diverse program of short films across the four strands — fiction, documentary, animation, and experimental — all of which are made by students from other universities and film schools.")}
            </p>
          </div>
          <AboutImg src={imgs.banner} alt="LJMU MA Short Film Festival" ratio="750/276" style={{ boxShadow: "0 24px 60px rgba(22,21,26,0.12)" }} />
        </div>
      </section>

      {/* ── Exploring Film Festivals module ── */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wrap about-module-grid" style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: "clamp(32px,5vw,72px)", alignItems: "start" }}>
          <div>
            <AboutImg src={imgs.book} alt="Film Festivals: History, Theory, Method, Practice" ratio="3/4" />
            <p className="label muted" style={{ marginTop: 10, textAlign: "center", fontStyle: "italic" }}>Film Festivals: History, Theory, Method, Practice (2016)</p>
          </div>
          <div>
            <Kicker n="§ 02">The module</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(26px,3.5vw,46px)", margin: "14px 0 20px", lineHeight: 1.1 }}>Exploring Film Festivals, Distribution and Exhibition</h2>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--ink)", marginBottom: 16 }}>
              {t("module1", "The festival operates from within the module Exploring Film Festivals, Distribution and Exhibition, which is led by Festival Director and Reader in Film, Dr Lydia Papadimitriou and collaboratively taught with Martin Jones, Festival Coordinator.")}
            </p>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--muted)", marginBottom: 16 }}>
              {t("module2", "Exploring Film Festivals goes beyond production and representation, to consider the different ways in which film circulates. It examines the historical and contemporary significance of film festivals both in assigning value to film (through programming and awards) and in providing an alternative distribution network, while also assessing the significance and function of film programming in festivals.")}
            </p>
            <p style={{ lineHeight: 1.75, fontSize: 15.5, color: "var(--muted)" }}>
              {t("module3", "The study of film festivals is a relatively recent field and a key source is the collection of essays Film festivals: History, theory, method, practice (2016) edited by Marijke de Valck, Skadi Loist and Brendan Kredell.")}
            </p>
          </div>
        </div>
      </section>

      {/* ── MA in Film ── */}
      <section className="section dark">
        <div className="wrap about-sec-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,5vw,80px)", alignItems: "center" }}>
          <div>
            <Kicker n="§ 03">MA in Film</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(28px,4vw,52px)", margin: "14px 0 20px", color: "var(--paper)" }}>Liverpool John Moores University</h2>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "rgba(240,238,233,0.82)", marginBottom: 16 }}>
              {t("maFilm1", "The festival is part of the MA Film at Liverpool John Moores University. The programme leader of this course is documentary filmmaker Dr Lydia Papadimitriou, and the MA Film combines theory and practice, fostering innovative approaches to both the making and understanding of film and film festivals.")}
            </p>
            <p style={{ lineHeight: 1.75, fontSize: 16, color: "rgba(240,238,233,0.65)" }}>
              {t("maFilm2", "In the UK, Liverpool is the second most filmed city (after London) and has a vibrant media and cultural industry. With the Twickenham Studios film production facility due to open in the Littlewoods Building in the near future, the MA Film and its festival are firmly rooted for a growing future.")}
            </p>
            <a href="https://www.ljmu.ac.uk/study/courses/postgraduates/film" target="_blank" rel="noreferrer" className="btn" style={{ marginTop: 24, display: "inline-flex" }}>
              MA Film at LJMU <SIcon name="arrowR" />
            </a>
          </div>
          <AboutImg src={imgs.littlewoods} alt="Littlewoods Building, Liverpool" ratio="4/3" style={{ border: "1px solid var(--line-d)" }} />
        </div>
      </section>

      {/* ── Numbers ── */}
      <section className="section tight" style={{ background: "var(--ink)" }}>
        <div className="wrap">
          <div className="grid cols-4">
            {(f.highlights || []).slice(0, 4).map((h) =>
            <div key={h.id} style={{ borderTop: "1px solid var(--line-d)", paddingTop: 18 }}>
                <div className="display" style={{ fontSize: "clamp(48px,7vw,96px)", color: "var(--paper)" }}>{h.value}</div>
                <div className="label" style={{ marginTop: 8, color: "var(--muted-d)" }}>{h.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Paper Bird ── */}
      <section className="section">
        <div className="wrap">
          <AboutImg src={imgs.liverBirds} alt="The Liver Birds, Liverpool" style={{ marginBottom: 40, maxHeight: 320, objectFit: "cover" }} />
          <div className="about-sec-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,5vw,72px)", alignItems: "start" }}>
            <div>
              <Kicker n="§ 04">The Paper Bird Award</Kicker>
              <h2 className="display" style={{ fontSize: "clamp(28px,4vw,52px)", margin: "14px 0 20px", lineHeight: 1.1 }}>Our trophy.</h2>
              <p style={{ lineHeight: 1.75, fontSize: 16, color: "var(--muted)", marginBottom: 16 }}>
                {t("paperBird", "The Liver Bird is a symbol of Liverpool John Moores University and the City of Liverpool, whilst the material of paper reflects the academic context of the LJMU MA Short Film Festival. Each paper bird trophy is colour-coded to its category.")}
              </p>
              <p style={{ lineHeight: 1.75, fontSize: 15.5, color: "var(--muted)", marginBottom: 16 }}>
                {t("paperBird2", "The trophies are the creation of Dave Treadwell, an incredibly talented artist, musician and director.")} <a href="https://www.instagram.com/bongoplayingmonkey/" target="_blank" rel="noreferrer" style={{ color: "var(--coral)" }}>@bongoplayingmonkey</a>
              </p>
              <blockquote style={{ borderLeft: "3px solid var(--yellow)", paddingLeft: 20, margin: "20px 0 0" }}>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--muted)", fontStyle: "italic" }}>
                  "According to popular legend, they are a male and female pair: the female looking out to sea, watching for the seamen to return safely home, and the male looking into the city."
                </p>
                <cite style={{ fontSize: 12, color: "var(--muted)", fontStyle: "normal" }}>— Wikipedia on the Liver Birds</cite>
              </blockquote>
            </div>
            <div>
              <Kicker n="§ 05">Follow the festival</Kicker>
              <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 8 }}>
                {[["Instagram", "https://www.instagram.com/ljmumasff/"], ["Facebook", "https://www.facebook.com/LJMUMASFF"], ["TikTok", "https://www.tiktok.com/@ljmumasff"], ["YouTube", "https://www.youtube.com/@ljmumashortfilmfestival6785"], ["LinkedIn", "https://www.linkedin.com/groups/9152987/"], ["Bluesky", "https://bsky.app/search?q=ljmumasff"], ["Threads", "https://www.threads.net/@ljmumasff"]].map(([n, h]) =>
                <a key={n} href={h} target="_blank" rel="noreferrer" className="btn ghost" style={{ border: "1px solid var(--line)", fontSize: 13, padding: "9px 14px" }}>{n}</a>
                )}
              </div>
              <div style={{ marginTop: 32, padding: "28px", background: "var(--ink)", color: "var(--paper)" }}>
                <span className="label" style={{ color: "var(--muted-d)" }}>Filmmakers</span>
                <div className="display" style={{ fontSize: "clamp(24px,3vw,38px)", margin: "12px 0" }}>Submit a film.</div>
                <p style={{ color: "rgba(240,238,233,0.75)", fontSize: 15 }}>Short films across all four strands. Students worldwide. Free to submit.</p>
                <button className="btn coral" style={{ marginTop: 16 }} onClick={() => navigate("/submit")}>Submission guidelines <SIcon name="arrowR" /></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Custom blocks from CMS ── */}
      {customBlocks.map((block) => <CustomBlock key={block.id} block={block} />)}

    </Page>);

}

Object.assign(window, { About });