// site-archive.jsx — Archive landing, edition pages, and archive strand pages.

// Convert old archive award string → display label
function archiveAwardLabel(film) {
  const a = film.award || "";
  const s = film.strand || "";
  if (!a) return "";
  if (a === "Audience") return "Paper Bird \u2014 Audience Award";
  if (a === "Jury" || a === "Documentary" || a === "Fiction" || a === "Animation" || a === "Experimental") {
    return "Paper Bird \u2014 " + s + " Winner";
  }
  if (a === "Special Mention") return "Special Mention \u2014 " + s;
  // Already a full label
  if (a.includes("Paper Bird") || a.includes("Special Mention")) return a;
  return "";
}

const STRAND_C = {
  Fiction: { hex: "#ff5c70", bg: "var(--pink)", text: "#fff" },
  Animation: { hex: "#ffc823", bg: "var(--yellow)", text: "#16151a" },
  Documentary: { hex: "#784c95", bg: "var(--purple)", text: "#fff" },
  Experimental: { hex: "#65c8d0", bg: "var(--cyan)", text: "#16151a" },
  Audience: { hex: "#F0EEE9", hexLight: "#16151a", bg: "#F0EEE9", text: "#16151a" },
};

// ── Enriched archive data ────────────────────────────────────────────────────
const EDITIONS = {
  2021: {
    label: "I", dates: "April 2021", location: "Online",
    note: "The founding edition — held entirely online during the pandemic. The festival showcased an international collection of student short films across three strands.",
    filmCount: 29,
    poster: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2021/03/ljmu_ma_sff_poster_1st_editionartboard-1.png?resize=750%2C1061&ssl=1",
    banner: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2021/03/ljmumasff_thin_banner.png?resize=750%2C141&ssl=1",
    strands: ["Fiction", "Animation", "Documentary"],
    trailer: "FynDdF7ESgI",
    strandTrailers: { Fiction: "2n8EMZYUL1s", Animation: "v5-vuAF83EM", Documentary: "A0hxOd7ZOag" },
    ceremony: "6RmawQydVHQ",
    awards: [
      { strand: "Fiction",     film: "End of the World",     director: "Karol Ulman" },
      { strand: "Animation",   film: "Blue Monday",          director: "Katarzyna Orłowska" },
      { strand: "Documentary", film: "Rain Pot",             director: "Gordon Moore" },
      { strand: "Audience",    film: "Lost Ore Abdurrahim",  director: "Pınar Yıldırım Karaman" },
    ],
    qas: [
      { strand: "Documentary", hosts: "Katherine Morrison",  date: "17 Apr, 12:00 GMT+1", video: "OtKAdqcrYV0" },
      { strand: "Animation",   hosts: "Jess Auger",          date: "18 Apr, 12:00 GMT+1", video: "KdtgztWg9h8" },
      { strand: "Fiction",     hosts: "Connor Norcott",      date: "19 Apr, 12:00 GMT+1", video: "chLhmceVnEQ" },
    ],
  },
  2022: {
    label: "II", dates: "1–8 April 2022", location: "Online",
    note: "The second edition — 40 films from 22 countries premiered digitally, with Q&A sessions and a live awards ceremony on YouTube.",
    filmCount: 40,
    poster: "",
    banner: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2022/02/header-1-01.png?resize=750%2C250&ssl=1",
    strands: ["Fiction", "Animation", "Documentary"],
    trailer: "wVhPNDU0kzI",
    strandTrailers: { Fiction: "deizQkaUSnI", Animation: "t463EEO0zUs", Documentary: "3UUITNBipPI" },
    ceremony: "FHObScaBbTQ",
    awards: [
      { strand: "Fiction",     film: "Well, You Are A Fool Lisa", director: "Oleksandra Konoplia" },
      { strand: "Animation",   film: "The Pattern",               director: "Péter Bogyó" },
      { strand: "Documentary", film: "Milo",                      director: "Nadia Szymańska" },
      { strand: "Audience",    film: "13 Hertz",                  director: "Filipa Neves & Rudi Navarro" },
    ],
    qas: [
      { strand: "Documentary", hosts: "",  date: "2 Apr, 16:00 GMT+1", video: "dGFuAfgAjh8" },
      { strand: "Animation",   hosts: "",  date: "4 Apr, 16:00 GMT+1", video: "Tk6UeieKops" },
      { strand: "Fiction",     hosts: "",  date: "5 Apr, 16:00 GMT+1", video: "FN_tfgV6r_U" },
    ],
  },
  2023: {
    label: "III", dates: "24–31 March 2023", location: "Online",
    note: "The third edition — first Experimental strand introduced. Films from around the world premiered digitally across four strands, with Q&A sessions and a live awards ceremony.",
    filmCount: 42,
    poster: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2023/01/poster-2.png?resize=750%2C971&ssl=1",
    banner: "",
    strands: ["Fiction", "Animation", "Documentary", "Experimental"],
    trailer: "HHuvfB2fo7M",
    strandTrailers: { Fiction: "tLu53lDsOsU", Animation: "p1j1hsqvZg8", Documentary: "jIjxOZ51-iM", Experimental: "g-SR6kaswc8" },
    ceremony: "d0sKmj41k4k",
    awards: [
      { strand: "Fiction",      film: "Rue",          director: "Casey Eldridge" },
      { strand: "Animation",    film: "Small Hours",  director: "Marta Sniezek & Christian Spurling" },
      { strand: "Documentary",  film: "The Gallery",  director: "Cordula Rieger" },
      { strand: "Experimental", film: "Soliloquium",  director: "Karolina Monwid-Olechnowicz" },
      { strand: "Audience",     film: "Out of Order", director: "Charlie Ledwidge, Harley Hunt, Sam Stevens, Mariana Sandoval Valencia" },
    ],
    qas: [
      { strand: "Documentary",          hosts: "Libby Watson-Brown",          date: "25 Mar, 16:00 GMT",   video: "KdeAHbUEk6c" },
      { strand: "Fiction/Experimental", hosts: "Magic Nowak & Shannon Byrne", date: "27 Mar, 16:00 GMT+1", video: "nYOjUnaPBZo" },
      { strand: "Animation",            hosts: "Lauren Wright",               date: "28 Mar, 16:00 GMT+1", video: "6yH1NhX9woc" },
    ],
  },
  2024: {
    label: "IV", dates: "15–22 March 2024", location: "Online",
    note: "The fourth edition — films from across the globe premiered digitally across four strands, with Q&A sessions and a live awards ceremony.",
    filmCount: 36,
    poster: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2024/01/2024-Poster-Final.png?resize=214%2C300&ssl=1",
    banner: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2024/02/Horizontal-Banner-New-1.png?resize=750%2C277&ssl=1",
    strands: ["Fiction", "Animation", "Documentary", "Experimental"],
    trailer: "aheofP1uPJo",
    strandTrailers: { Fiction: "56_BRYYU9Zg", Animation: "wdmfc7InQH8", Documentary: "Avu4p6Ry55Y", Experimental: "JMKU9tWHvtY" },
    ceremony: "dLJGta-Bgl4",
    awards: [
      { strand: "Fiction",      film: "Two-Syllable Name",      director: "Giovanna Castellari Peixoto" },
      { strand: "Animation",    film: "Dead Silent",            director: "Miriam Fox" },
      { strand: "Documentary",  film: "Honey Bunny Duracell",   director: "Nelisa Alcalde" },
      { strand: "Experimental", film: "Obscura",                director: "Lucas Kua" },
      { strand: "Audience",     film: "Valdo",                  director: "Emilia Ferrari" },
    ],
    qas: [
      { strand: "Documentary",  hosts: "Peter Sutcliffe & Georgina Taylor", date: "18 Mar, 19:00 GMT", video: "Z1Icnur1Cds" },
      { strand: "Animation",    hosts: "Nick Box & Gabi Lewcock",           date: "19 Mar, 19:00 GMT", video: "9tG9jGmgbHE" },
      { strand: "Fiction",      hosts: "Mhairi Armstrong & Isaac Moon",     date: "20 Mar, 19:00 GMT", video: "DFFBtv3iQaY" },
      { strand: "Experimental", hosts: "Frank Greally",                     date: "21 Mar, 16:00 GMT", video: "WXMCeLQVAvA" },
    ],
  },
  2025: {
    label: "V", dates: "28 March – 4 April 2025", location: "Liverpool",
    note: "The fifth edition — 38 films, four strands, and a week of screenings and Q&As across the city.",
    filmCount: 37,
    poster: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Poster-A3-Large-v5-final.png?resize=212%2C300&ssl=1",
    banner: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Banner-date-fixed.jpg?resize=750%2C276&ssl=1",
    strands: ["Documentary", "Animation", "Fiction", "Experimental"],
    trailer: "S02-i8DdcP8",
    strandTrailers: { Fiction: "9Tw0ANujOhw", Animation: "hj6sPRh8_yM", Documentary: "oSf4CHP6Akk", Experimental: "6UQli9a4KM0" },
    ceremony: "6Aj47p2jdV4",
    awards: [
      { strand: "Fiction",      film: "Count My Lov3",            director: "Ewa Japola" },
      { strand: "Animation",    film: "Why Won't Anyone Eat Me?", director: "Lewis Macaulay" },
      { strand: "Documentary",  film: "Swim Higher",              director: "Cecilia Palmeri" },
      { strand: "Experimental", film: "A Train Arrives",          director: "Raphael Heinisch" },
      { strand: "Audience",     film: "Roots",                    director: "Max Vázquez Montufar" },
    ],
    qas: [
      { strand: "Documentary",  hosts: "John Mortimer & Bridget Harvey",  date: "31 Mar, 18:00 GMT", video: "oWbeHbD2eEY" },
      { strand: "Animation",    hosts: "Viv Nelson & Oscar Bradshaw",     date: "1 Apr, 18:00 GMT",  video: "CNJW5a34SKU" },
      { strand: "Fiction",      hosts: "Jake Butcher & Josh Darlington",  date: "2 Apr, 18:00 GMT",  video: "tzKcFR7pcMs" },
      { strand: "Experimental", hosts: "Harry O'Connell & Devan Jones",   date: "3 Apr, 18:00 GMT",  video: "0L41pqQeMAs" },
    ],
  },
};

const EDITION_NAMES = { 2021: "First", 2022: "Second", 2023: "Third", 2024: "Fourth", 2025: "Fifth" };

const YEARS = [2025, 2024, 2023, 2022, 2021];

// ── Helper: get archive films for a year/strand ─────────────────────────────
function getArchiveFilms(year, strand) {
  const all = (window.ARCHIVE_FILMS || {})[year] || [];
  if (!strand) return all;
  const key = strand.charAt(0).toUpperCase() + strand.slice(1).toLowerCase();
  return all.filter((f) => f.strand === key);
}

// ── Archive router ───────────────────────────────────────────────────────────
function Archive({ navigate, year, strand, filmId }) {
  if (year && strand && filmId) return <ArchiveFilmDetail navigate={navigate} year={year} strand={strand} filmId={filmId} />;
  if (year && strand) return <ArchiveStrand navigate={navigate} year={year} strand={strand} />;
  if (year && EDITIONS[year]) return <ArchiveEdition navigate={navigate} year={year} />;
  return <ArchiveLanding navigate={navigate} />;
}

// ── Archive landing — all editions ───────────────────────────────────────────
function ArchiveLanding({ navigate }) {
  const d = useSite();
  const totalFilms = YEARS.reduce((s, y) => s + (EDITIONS[y]?.filmCount || 0), 0) + d.films.length;
  const pg = d.festival?.pages?.archive || {};
  const stats = pg.stats || [
    { id: "s1", label: "Films screened", value: totalFilms },
    { id: "s2", label: "Editions",       value: "Six" },
    { id: "s3", label: "Paper Birds",    value: "30+" },
    { id: "s4", label: "Countries",      value: "40+" },
  ];

  return (
    <Page k="archive-landing">
      {/* Hero */}
      <section className="dark section">
        <div className="wrap arch-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 48, alignItems: "end" }}>
          <div>
            <span className="eyebrow">Archive · 2021—{d.festival.year}</span>
            <h1 className="display" style={{ fontSize: "clamp(46px,9vw,130px)", marginTop: 16, lineHeight: 0.92 }}>
              {(pg.heroTitle || "Six editions of looking.").replace(/\s+(\S+\.)$/, "")} <span style={{ color: "var(--coral-bright)", fontStyle: "italic" }}>{(pg.heroTitle || "Six editions of looking.").match(/\s+(\S+\.)$/)?.[1] || "of looking."}</span>
            </h1>
            <p style={{ color: "rgba(240,238,233,0.75)", fontSize: 16, lineHeight: 1.65, maxWidth: 520, marginTop: 24 }}>
              {pg.heroLead || "Welcome to the archive of the LJMU MA Short Film Festival."}
            </p>
          </div>
          <div style={{ borderTop: "1px solid var(--line-d)", paddingTop: 16 }}>
            {stats.map(({id,label,value}, i) => (
              <div key={id||label} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: i < stats.length-1 ? "1px solid var(--line-d)" : "none" }}>
                <span className="label muted">{label}</span>
                <span className="display" style={{ fontSize: 22 }}>{value}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Edition rows */}
      {YEARS.map((year, idx) => {
        const ed = EDITIONS[year];
        const isDark = idx % 2 === 0;
        const bg = isDark ? "var(--ink)" : "var(--paper)";
        const fg = isDark ? "var(--paper)" : "var(--ink)";
        const muted = isDark ? "var(--muted-d)" : "var(--muted)";
        const line = isDark ? "var(--line-d)" : "var(--line)";

        return (
          <section key={year} style={{ background: bg, color: fg, padding: "clamp(56px,7vw,100px) 0", cursor: "pointer" }}
            onClick={() => navigate("/archive/" + year)}>
            <div className="wrap">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid " + line, paddingBottom: 14, marginBottom: "clamp(24px,3vw,40px)", gap: 20 }}>
                <span className="eyebrow" style={{ color: "var(--coral)" }}>{EDITION_NAMES[year] || ed.label} Edition · {ed.dates}</span>
                <span className="label" style={{ color: muted }}>{ed.filmCount} films · {ed.location}</span>
              </div>
              <div className="arch-edition-row" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: "clamp(32px,5vw,72px)", alignItems: "end" }}>
                <div>
                  <h2 className="display" style={{ fontSize: "clamp(48px,9vw,120px)", lineHeight: 0.88, letterSpacing: "-0.02em" }}>
                    {year}
                  </h2>
                  <p style={{ color: muted, fontSize: 15.5, lineHeight: 1.65, marginTop: 16, maxWidth: 520 }}>{ed.note}</p>
                </div>
                <div>
                  {/* All awards */}
                  <div style={{ borderTop: "1px solid " + line, paddingTop: 14 }}>
                    {ed.awards.map((a) => (
                      <div key={a.strand} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", gap: 12 }}>
                        <span className="label" style={{ color: isDark ? (STRAND_C[a.strand]?.hex || muted) : (STRAND_C[a.strand]?.hexLight || STRAND_C[a.strand]?.hex || muted), flex: "none" }}>{a.strand}</span>
                        <span style={{ fontSize: 14, color: fg, fontStyle: "italic", textAlign: "right" }}>{a.film}</span>
                      </div>
                    ))}
                  </div>
                  <button className="btn coral" style={{ marginTop: 24 }} onClick={(e) => { e.stopPropagation(); navigate("/archive/" + year); }}>
                    Explore the {EDITION_NAMES[year] || ed.label} Edition <SIcon name="arrowR" />
                  </button>
                </div>
              </div>
            </div>
          </section>
        );
      })}
    </Page>
  );
}

// ── Archive edition page ─────────────────────────────────────────────────────
function ArchiveEdition({ navigate, year }) {
  const ed = EDITIONS[year];
  if (!ed) return <ArchiveLanding navigate={navigate} />;

  return (
    <Page k={"archive-" + year}>
      {/* Hero */}
      <section className="dark section">
        <div className="wrap">
          <button onClick={() => navigate("/archive")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--paper)", opacity: .7, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 6, marginBottom: 28, padding: 0 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}><path d="M19 12H5M11 18l-6-6 6-6" /></svg>
            All editions
          </button>
          <div className="arch-edition-hero" style={{ display: "grid", gridTemplateColumns: ed.poster ? "1fr 200px" : "1fr", gap: 48, alignItems: "end" }}>
            <div>
              <span className="eyebrow" style={{ color: "var(--yellow)" }}>{EDITION_NAMES[year] || ed.label} Edition · {ed.dates}</span>
              <h1 className="display" style={{ fontSize: "clamp(72px,14vw,200px)", marginTop: 12, lineHeight: 0.86, letterSpacing: "-0.03em" }}>
                {year}
              </h1>
              <p style={{ color: "rgba(240,238,233,0.78)", fontSize: 16, lineHeight: 1.65, maxWidth: 600, marginTop: 20 }}>{ed.note}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                {[["Films", ed.filmCount], ["Location", ed.location], ["Awards", ed.awards.length]].map(([k, v]) => (
                  <span key={k} className="tag" style={{ borderColor: "var(--line-d)", color: "var(--muted-d)" }}>{k}: {v}</span>
                ))}
              </div>
            </div>
            {ed.poster && (
              <div style={{ overflow: "hidden" }}>
                <img src={ed.poster} alt={"Edition " + ed.label + " poster"} style={{ width: "100%", display: "block" }} loading="lazy" />
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Strand buttons */}
      <section className="section tight" style={{ paddingTop: 0, paddingBottom: 0 }}>
          <div className="arch-strand-btns" style={{ display: "grid", gridTemplateColumns: `repeat(${ed.strands.length}, 1fr)`, gap: 3 }}>
            {ed.strands.map((strand) => {
              const sc = STRAND_C[strand] || {};
              return (
                <button key={strand}
                  onClick={() => navigate("/archive/" + year + "/" + strand.toLowerCase())}
                  style={{ background: sc.hex, color: sc.text, border: "none", cursor: "pointer", padding: "clamp(28px,4vw,48px) clamp(16px,2vw,28px)", textAlign: "left", transition: "filter .15s" }}
                  onMouseEnter={(e) => e.currentTarget.style.filter = "brightness(1.1)"}
                  onMouseLeave={(e) => e.currentTarget.style.filter = ""}
                >
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", opacity: .7, marginBottom: 10 }}>Strand</div>
                  <div className="display" style={{ fontSize: "clamp(22px,3vw,36px)", letterSpacing: "-0.01em" }}>{strand}</div>
                  <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", opacity: .85 }}>
                    Browse films
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ width: 12, height: 12 }}><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                  </div>
                </button>
              );
            })}
          </div>
      </section>
      {ed.trailer && (
        <section className="section dark tight">
          <div className="wrap">
            <Kicker n="▸">{EDITION_NAMES[year] || ed.label} Edition · Trailer</Kicker>
            <div className="arch-trailer-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(24px,4vw,56px)", alignItems: "center", marginTop: 16 }}>
              <YouTubeThumb id={ed.trailer} title={(EDITION_NAMES[year] || ed.label) + " Edition Trailer"} />
              <div>
                <h2 className="display" style={{ fontSize: "clamp(28px,3.5vw,48px)", color: "var(--paper)", marginBottom: 16 }}>Watch the {year} trailer.</h2>
                <p style={{ color: "rgba(240,238,233,0.75)", lineHeight: 1.65, fontSize: 15 }}>{ed.filmCount} films across {ed.strands.length} strands. The {EDITION_NAMES[year] || ed.label} Edition of the LJMU MA Short Film Festival.</p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Strand trailers */}
      {Object.keys(ed.strandTrailers).length > 0 && (
        <section className="section" style={{ background: "var(--paper-2)" }}>
          <div className="wrap">
            <Kicker n="▸">Strand Trailers</Kicker>
            <div className="grid cols-2" style={{ marginTop: 20, gap: "clamp(16px,3vw,32px)" }}>
              {Object.entries(ed.strandTrailers).map(([strand, vid]) => (
                <div key={strand}>
                  <YouTubeThumb id={vid} title={year + " " + strand + " Trailer"} />
                  <div className="label" style={{ marginTop: 10, color: STRAND_C[strand]?.hex || "var(--muted)" }}>{strand} Trailer · {year}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Paper Bird Awards */}
      <section className="section">
        <div className="wrap arch-awards-grid" style={{ display: "grid", gridTemplateColumns: ed.ceremony ? "1fr 1fr" : "1fr", gap: "clamp(32px,5vw,64px)", alignItems: "start" }}>
          <div>
            <Kicker n="▸">Paper Bird Awards</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(28px,4vw,48px)", marginBottom: 24 }}>The honour roll.</h2>
            {ed.awards.map((a) => (
              <div className="arch-award-row" key={a.strand} style={{ display: "grid", gridTemplateColumns: "120px 1fr 1fr", padding: "16px 0", borderTop: "1px solid var(--line)", gap: 12, alignItems: "baseline" }}>
                <span className="label" style={{ color: STRAND_C[a.strand]?.hexLight || STRAND_C[a.strand]?.hex || "var(--muted)" }}>{a.strand}</span>
                <span className="display" style={{ fontSize: "clamp(16px,2vw,24px)", fontStyle: "italic" }}>{a.film}</span>
                <span className="muted" style={{ fontSize: 14, textAlign: "right" }}>dir. {a.director}</span>
              </div>
            ))}
          </div>
          {ed.ceremony && (
            <div>
              <Kicker n="▸">Awards Ceremony</Kicker>
              <h2 className="display" style={{ fontSize: "clamp(24px,3vw,36px)", marginBottom: 18 }}>Ceremony highlights.</h2>
              <YouTubeThumb id={ed.ceremony} title={year + " Awards Ceremony"} />
            </div>
          )}
        </div>
      </section>

      {/* Q&As */}
      {ed.qas.length > 0 && (
        <section className="section dark">
          <div className="wrap">
            <Kicker n="▸">Q&A Sessions</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(28px,4vw,48px)", marginBottom: 12, color: "var(--paper)" }}>Filmmaker Q&As.</h2>
            <p style={{ color: "var(--muted-d)", fontSize: 15, marginBottom: 32 }}>Recorded conversations with the filmmakers from each strand.</p>
            <div className="grid cols-2" style={{ gap: "clamp(16px,3vw,32px)" }}>
              {ed.qas.map((qa) => (
                <div key={qa.strand}>
                  <YouTubeThumb id={qa.video} title={year + " " + qa.strand + " Q&A"} />
                  <div style={{ marginTop: 12 }}>
                    <div className="label" style={{ color: STRAND_C[qa.strand]?.hex || "var(--paper)" }}>{qa.strand} Q&A</div>
                    <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Hosted by {qa.hosts} · {qa.date}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Navigate to other editions */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <Kicker n="▸">More editions</Kicker>
          <div className="arch-more-editions" style={{ display: "grid", gridTemplateColumns: `repeat(${YEARS.length}, 1fr)`, gap: 3, marginTop: 16 }}>
            {YEARS.map((y) => {
              const e = EDITIONS[y];
              const isCurrent = String(y) === String(year);
              return (
                <button key={y} onClick={() => !isCurrent && navigate("/archive/" + y)}
                  style={{ textAlign: "left", padding: "22px 18px", border: "none", cursor: isCurrent ? "default" : "pointer", background: isCurrent ? "var(--ink)" : "transparent", color: isCurrent ? "var(--paper)" : "var(--ink)", transition: "background .15s", borderRight: "1px solid var(--line)" }}>
                  <span className="display" style={{ fontSize: "clamp(22px,3vw,38px)" }}>{y}</span>
                  <div className="label" style={{ marginTop: 6, opacity: .6 }}>{EDITION_NAMES[y] || e.label} Edition · {e.filmCount} films</div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </Page>
  );
}

// ── Archive strand page ──────────────────────────────────────────────────────
function ArchiveStrand({ navigate, year, strand }) {
  const key = strand ? strand.charAt(0).toUpperCase() + strand.slice(1).toLowerCase() : "";
  const ed = EDITIONS[year];
  if (!ed) return <ArchiveLanding navigate={navigate} />;

  const sc = STRAND_C[key] || {};
  const winner = ed.awards.find((a) => a.strand === key);
  const strandTrailer = ed.strandTrailers?.[key];
  const films = getArchiveFilms(year, key);
  const [q, setQ] = React.useState("");
  const shown = q ? films.filter((f) => (f.title + f.directors + f.country).toLowerCase().includes(q.toLowerCase())) : films;

  return (
    <Page k={"archive-" + year + "-" + key}>
      {/* Hero */}
      <section style={{ background: sc.hex || "var(--ink)", color: sc.text || "var(--paper)", padding: "clamp(48px,8vw,96px) 0 clamp(28px,4vw,52px)" }}>
        <div className="wrap">
          <button onClick={() => navigate("/archive/" + year)}
            style={{ background: "none", border: "none", cursor: "pointer", color: "inherit", opacity: .7, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 6, marginBottom: 24, padding: 0 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}><path d="M19 12H5M11 18l-6-6 6-6" /></svg>
            {year} · {EDITION_NAMES[year] || ed.label} Edition
          </button>
          <h1 className="display" style={{ fontSize: `clamp(28px,${Math.min(12,Math.floor(80/key.length))}vw,160px)`, textTransform: "uppercase", lineHeight: 0.88, letterSpacing: "-0.02em" }}>{key}</h1>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 24, flexWrap: "wrap", gap: 16 }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", opacity: .7 }}>{EDITION_NAMES[year] || ed.label} Edition · {year} · {ed.location} · {films.length} films</span>
            {films.length > 4 && <input className="input" placeholder={"Search " + key + "…"} value={q} onChange={(e) => setQ(e.target.value)} style={{ maxWidth: 220, color: "#000", background: "rgba(255,255,255,0.2)", border: "1px solid rgba(255,255,255,0.3)", color: sc.text, fontSize: 13 }} />}
          </div>
        </div>
      </section>

      {/* Film grid */}
      <section className="section">
        <div className="wrap">
          {shown.length === 0 ? (
            <p className="muted" style={{ textAlign: "center", padding: "60px 0" }}>No films match your search.</p>
          ) : (
            <div className="grid cols-4 prog-grid">
              {shown.map((film, i) => (
                <div className="film-card" key={film.id} onClick={() => navigate("/archive/" + year + "/" + strand + "/" + film.id)}>
                  <Frame seed={film.title + year} ratio="2/3" corner={String(i + 1).padStart(2, "0")} />
                  <div className="meta">
                    <div className="toprow">
                      <span className="tag" style={{ borderColor: sc.hex, color: sc.hex, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{archiveAwardLabel(film) ? "★ Winner" : key}</span>
                      {film.runtime && <span className="label muted" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>{film.runtime}</span>}
                    </div>
                    <div className="title">{film.title}</div>
                    {film.directors && <div className="sub">{film.directors}{film.country ? " · " + film.country : ""}</div>}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Winner highlight */}
      {winner && (
        <section className="section" style={{ background: "var(--paper-2)" }}>
          <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "clamp(28px,4vw,64px)", alignItems: "start" }}>
            <Frame seed={winner.film + year} ratio="2/3" corner="WINNER" />
            <div>
              <Kicker n="▸" color={sc.hex}>Paper Bird Award · {key}</Kicker>
              <h2 className="display" style={{ fontSize: "clamp(32px,5vw,64px)", margin: "12px 0 16px", fontStyle: "italic" }}>{winner.film}</h2>
              <p style={{ fontSize: 18, color: "var(--muted)", marginBottom: 8 }}>dir. {winner.director}</p>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 16, marginTop: 20 }}>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--muted)" }}>
                  Winner of the Paper Bird Award for Best {key} Film at the {year} LJMU MA Short Film Festival, the {EDITION_NAMES[year] || ed.label} Edition.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Strand trailer */}
      {strandTrailer && (
        <section className="section dark tight">
          <div className="wrap">
            <Kicker n="▸">{key} Strand Trailer · {year}</Kicker>
            <YouTubeThumb id={strandTrailer} title={year + " " + key + " Trailer"} style={{ marginTop: 16 }} />
          </div>
        </section>
      )}

      {/* Other strands */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <Kicker n="▸">Other strands · {year}</Kicker>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${ed.strands.length}, 1fr)`, gap: 3, marginTop: 16 }}>
            {ed.strands.map((s) => {
              const c = STRAND_C[s] || {};
              const isCurrent = s === key;
              return (
                <button key={s}
                  onClick={() => !isCurrent && navigate("/archive/" + year + "/" + s.toLowerCase())}
                  style={{ background: isCurrent ? "var(--ink)" : c.hex, color: isCurrent ? "var(--paper)" : c.text, border: "none", cursor: isCurrent ? "default" : "pointer", padding: "clamp(18px,3vw,32px) clamp(12px,2vw,20px)", textAlign: "left", transition: "filter .15s", opacity: isCurrent ? 0.6 : 1 }}
                  onMouseEnter={(e) => !isCurrent && (e.currentTarget.style.filter = "brightness(1.1)")}
                  onMouseLeave={(e) => e.currentTarget.style.filter = ""}
                >
                  <div className="display" style={{ fontSize: "clamp(16px,2vw,24px)" }}>{s}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", marginTop: 6, opacity: .7 }}>{isCurrent ? "Current" : "Browse"}</div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </Page>
  );
}

// ── Archive film detail ──────────────────────────────────────────────────────
function ArchiveFilmDetail({ navigate, year, strand, filmId }) {
  const ed = EDITIONS[year];
  const allFilms = getArchiveFilms(year, strand);
  const film = allFilms.find((f) => f.id === filmId) || ((window.ARCHIVE_FILMS || {})[year] || []).find((f) => f.id === filmId);
  const key = strand ? strand.charAt(0).toUpperCase() + strand.slice(1).toLowerCase() : (film?.strand || "");
  const sc = STRAND_C[key] || {};
  const meta = { hex: sc.hex || "var(--ink)", textOn: sc.text || "#fff" };

  if (!film || !ed) {
    return (
      <Page k="archive-film-missing">
        <section className="section"><div className="wrap" style={{ textAlign: "center" }}>
          <h1 className="display" style={{ fontSize: 48 }}>Film not found</h1>
          <button className="btn" onClick={() => navigate("/archive/" + year)} style={{ marginTop: 16 }}>Back to {year}</button>
        </div></section>
      </Page>
    );
  }

  const others = allFilms.filter((f) => f.id !== filmId).slice(0, 4);

  // Director bios
  const dirBios = film.directorBio
    ? film.directors.split(/\s*[&,]\s*/).map((n) => ({ name: n.trim(), bio: film.directorBio })).filter((d) => d.name)
    : film.directors ? film.directors.split(/\s*[&,]\s*/).map((n) => ({ name: n.trim(), bio: "" })).filter((d) => d.name) : [];

  // Credits
  const rawCredits = film.credits || {};
  const creditFields = [
    ["Director", film.directors || "—"],
    ["Country", film.country || "—"],
    ["Runtime", film.runtime || "—"],
    ["Strand", key],
    ["Film School", film.school || "—"],
    ...Object.entries(rawCredits).filter(([k]) => k !== "Director"),
  ];

  return (
    <Page k={"archive-film-" + filmId}>

      {/* ── Hero: full-bleed poster background + gradient overlay ── */}
      <section style={{ position: "relative", overflow: "hidden", color: meta.textOn || "#fff", minHeight: "clamp(480px, 68vh, 820px)", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>

        {/* Poster — full bleed background */}
        <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
          <Frame seed={film.title + year + "poster"} ratio="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 0 }} />
        </div>

        {/* Gradient: solid strand colour on left → transparent on right */}
        <div style={{ position: "absolute", inset: 0, zIndex: 1, background: `linear-gradient(to right, ${meta.hex} 0%, ${meta.hex}ee 28%, ${meta.hex}bb 46%, ${meta.hex}66 65%, ${meta.hex}22 82%, ${meta.hex}00 100%)` }} />

        {/* Bottom fade into strand colour */}
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: "35%", zIndex: 1, background: `linear-gradient(to bottom, ${meta.hex}00 0%, ${meta.hex}cc 70%, ${meta.hex} 100%)` }} />

        {/* Content layer */}
        <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: 28, paddingBottom: "clamp(40px,6vw,80px)" }}>

          {/* Back link */}
          <button onClick={() => navigate("/archive/" + year + "/" + strand)}
            style={{ background: "none", border: "none", cursor: "pointer", color: "inherit", opacity: .8, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 6, padding: 0, marginBottom: "clamp(120px,20vh,280px)" }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ width: 13, height: 13 }}><path d="M19 12H5M11 18l-6-6 6-6" /></svg>
            {key}
          </button>

          {/* Title block — left side, max 62% width so poster shows through on right */}
          <div style={{ maxWidth: "clamp(300px,62%,760px)" }}>
            <h1 className="display" style={{ fontSize: "clamp(38px,7vw,96px)", lineHeight: .88, letterSpacing: "-0.02em", marginBottom: "clamp(14px,2vw,24px)", wordBreak: "break-word" }}>
              {film.title}
            </h1>
            <div style={{ fontSize: "clamp(15px,1.8vw,20px)", opacity: .92, fontFamily: "var(--display)", fontWeight: 500, marginBottom: 8 }}>
              {film.directors}
            </div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", opacity: .7, lineHeight: 1.6 }}>
              {[film.country, film.runtime ? film.runtime + " min" : null, film.school].filter(Boolean).join(" · ")}
            </div>
            {archiveAwardLabel(film) && (
              <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 14, background: "rgba(255,255,255,0.18)", padding: "6px 14px", backdropFilter: "blur(4px)" }}>
                <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 11, height: 11 }}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
                <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: ".14em", textTransform: "uppercase" }}>{archiveAwardLabel(film)}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Synopsis + meta ── */}
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(32px,5vw,72px)", alignItems: "start" }}>
          <div>
            <Kicker n="▸ 01" color={meta.hex}>Synopsis</Kicker>
            {film.synopsis
              ? <p style={{ fontSize: "clamp(16px,1.8vw,21px)", lineHeight: 1.7, color: "var(--ink)", marginTop: 12 }}>{film.synopsis}</p>
              : <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--muted)", marginTop: 12, fontStyle: "italic" }}>Synopsis to be added.</p>
            }
          </div>
          <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: "clamp(20px,3vw,40px)" }}>
            <div>
              {[["Country", film.country || "—"], ["Runtime", film.runtime || "—"], ["Strand", key],
                ...(film.school ? [["School", film.school]] : []),
                ["Edition", (EDITION_NAMES[year] || ed.label) + " Edition · " + year]].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--line-2)", gap: 16 }}>
                  <span className="label muted" style={{ flex: "none" }}>{k}</span>
                  <span className="label" style={{ color: "var(--ink)", textAlign: "right" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── Director(s) — bigger photo, full bio ── */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <Kicker n="▸ 02" color={meta.hex}>{dirBios.length > 1 ? "Directors" : "Director"}</Kicker>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,360px), 1fr))", gap: "clamp(32px,5vw,64px)", marginTop: 32 }}>
            {dirBios.map((dir) => (
              <div key={dir.name} style={{ display: "grid", gridTemplateColumns: "clamp(96px,13vw,150px) 1fr", gap: "clamp(16px,2.5vw,28px)", alignItems: "start" }}>
                <div className="img-zoomable" style={{ aspectRatio: "1/1", overflow: "hidden", borderRadius: "50%", border: "3px solid var(--line)", background: "var(--paper)", flex: "none" }}
                  onClick={() => openLightbox([{ url: "https://i.pravatar.cc/600?u=" + encodeURIComponent(dir.name + film.id), caption: dir.name }])}>
                  <img src={"https://i.pravatar.cc/300?u=" + encodeURIComponent(dir.name + film.id)} alt={dir.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <div>
                  <div className="display" style={{ fontSize: "clamp(18px,2.5vw,30px)", lineHeight: 1.1, marginBottom: 4 }}>{dir.name}</div>
                  <div className="label muted" style={{ marginBottom: 14 }}>Director{film.country ? " · " + film.country : ""}{film.school ? " · " + film.school : ""}</div>
                  {dir.bio
                    ? <p style={{ fontSize: 14.5, lineHeight: 1.8, color: "var(--muted)" }}>{dir.bio}</p>
                    : <p style={{ fontSize: 14, lineHeight: 1.8, color: "var(--muted)", fontStyle: "italic" }}>Director biography to be added.</p>
                  }
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Stills ── */}
      {(() => {
        const urls = Array.from({ length: 3 }, (_, i) => autoSrc(film.title + "s" + i + year, undefined, "16/9"));
        const items = urls.map(u => ({ url: u, caption: film.title }));
        return (
      <section className="section">
        <div className="wrap">
          <Kicker n="▸ 03" color={meta.hex}>Stills</Kicker>
          <div className="grid cols-3" style={{ marginTop: 16 }}>
            {urls.map((u, i) => (
              <div key={i} className="img-zoomable" style={{ aspectRatio: "16/9", overflow: "hidden", background: (meta.hex || "#555") + "22" }}
                onClick={() => openLightbox(items, i)}>
                <img src={u} alt={film.title + " — still " + (i + 1)} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>
        );
      })()}

      {/* ── Full credits ── */}
      <section className="section dark tight">
        <div className="wrap">
          <Kicker n="▸ 04" color={meta.hex}>Full credits</Kicker>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "0 clamp(24px,4vw,56px)", marginTop: 20 }}>
            {creditFields.map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--line-d)", gap: 16 }}>
                <span className="label muted">{k}</span>
                <span style={{ fontSize: 13.5, color: v === "—" ? "rgba(240,238,233,0.28)" : "var(--paper)", textAlign: "right", maxWidth: 260 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── More from this strand ── */}
      {others.length > 0 && (
        <section className="section" style={{ background: "var(--paper-2)" }}>
          <div className="wrap">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, flexWrap: "wrap", gap: 12 }}>
              <h2 className="display" style={{ fontSize: "clamp(28px,4vw,48px)" }}>More {key}</h2>
              <span className="textlink" onClick={() => navigate("/archive/" + year + "/" + strand)}>All {key} · {year} <SIcon name="arrowR" /></span>
            </div>
            <div className="grid cols-4">
              {others.map((o, i) => (
                <div className="film-card" key={o.id} onClick={() => navigate("/archive/" + year + "/" + strand + "/" + o.id)}>
                  <Frame seed={o.title + year} ratio="2/3" corner={String(i + 1).padStart(2, "0")} />
                  <div className="meta">
                    <div className="toprow">
                      <span className="tag" style={{ borderColor: sc.hex, color: sc.hex, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{archiveAwardLabel(o) ? "★ Winner" : key}</span>
                      {o.runtime && <span className="label muted" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>{o.runtime}</span>}
                    </div>
                    <div className="title">{o.title}</div>
                    {o.directors && <div className="sub">{o.directors}</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}


    </Page>
  );
}

Object.assign(window, { Archive, EDITIONS, EDITION_NAMES, getArchiveFilms });