// 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: "Jon 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" },
    ],
    sectionToggles: { winners: true, trailer: true, strandTrailers: true, qas: true, photos: true, jury: true, students: true },
    photos: { Documentary: [], Animation: [], Fiction: [], Experimental: [], Awards: [] },
    jury: {
      Fiction: [
        { id:"fj1", name:"Marijke de Valck",  photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Marijke-de-Valck.png?resize=576%2C1024&ssl=1",   bio:"Associate professor in Film and Media Studies at Utrecht University, co-directing the Master’s Programme in Film and Television Cultures. Co-founder of the Film Festival Research Network and editor of Framing Film Festivals." },
        { id:"fj2", name:"Giovanna Castellari",photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Giovanna.png?resize=576%2C1024&ssl=1",         bio:"Brazilian screenwriter, director, and editor. Her short film Two-Syllable Name premiered at the 33rd São Paulo International Short Film Festival and received over 50 selections and 38 awards." },
        { id:"fj3", name:"Devan Whitehouse",   photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Devan-Whitehouse.png?resize=576%2C1024&ssl=1", bio:"Third-year Film Studies student and voracious cinephile. UK delegate and jury member of the 2023 European University Film Award." },
      ],
      Documentary: [
        { id:"dj1", name:"Sofia Tocar",  photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Sofia-Tocar.png?resize=576%2C1024&ssl=1",              bio:"Sofia Tocar is a distributor of short films and manages festival distribution for auteur-driven fiction and documentary titles at Square Eyes, a Vienna-based agency specializing in non-mainstream films. Previously, she managed the East Silver Caravan at the Institute of Documentary Film, supporting the festival distribution of Central and Eastern European documentaries. With a background in art history, she also curates and co-creates art projects." },
        { id:"dj2", name:"Nelisa Alcalde",photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Nelisa-Alcalde.png?resize=576%2C1024&ssl=1",          bio:"Nelisa Alcalde is a UK-based cinematographer born in the south of Spain. She is a member of Illuminatrix-Rising, holds a BA in Film & TV from Edinburgh University and an MFA in Cinematography from FAMU. Additionally, she has worked as an assistant camera and directed and lensed \u201cHoney Bunny Duracell,\u201d shot on 35mm film, which won the Art of a New Era Award given by the Czech Association of Cinematographers (A\u010cK), the Best Documentary Paper Bird Award at the LJMU MA Festival, and Best Documentary Short at the International Sport Film Festival in Slovenia.\n\nBack in the UK, she lensed and co-directed \u201cIsabel\u2019s Independence\u201d with Inma De Reyes, a BBC Scotland/Scottish Documentary Institute funded mid-length documentary that was broadcast on BBC Scotland in 2020. She also shared a cinematography credit on \u201cThe Boy and the Suit of Lights,\u201d directed by Inma De Reyes, which won Best International First Feature Film at Sheffield 2024. Alcalde has also shot narrative shorts such as \u201cAll Up There,\u201d directed by Bonnie McRae, which won the Best Director Award at the BFI Future Film Festival 2024 and the Silver Award for Passion Project at the Young Directors Festival at Cannes." },
        { id:"dj3", name:"Sophia Duff",  photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/IMG_20250211_154740.jpg?resize=698%2C1024&ssl=1",       bio:"Sophia Duff is a final year Film Studies student at Liverpool John Moores University with a love for writing and directing. She has already created a number of short films, collaborated with artists in Liverpool, and plans to study Screenwriting at MA after graduation. Interested in impressionistic and experimental film, she prefers cinema that challenges conventional systems, thinking, and narrative." },
      ],
      Animation: [
        { id:"aj1", name:"Lucy Bell",      photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Lucy-Bell.png?resize=576%2C1024&ssl=1",         bio:"Set Decoration professional for Film and TV (Netflix, Warner Bros, HBO). 2019 LJMU graduate, began her career with an internship at Aardman Animations." },
        { id:"aj2", name:"Miriam Fox",     photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Miriam-Fox.png?resize=576%2C1024&ssl=1",        bio:"Lecturer and animation filmmaker at UCA Farnham. Her film Dead Silent was nominated for a Student BAFTA and won the Paper Bird Award at the 2024 LJMU MA Short Film Festival." },
        { id:"aj3", name:"Gabriella Fenlon",photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Gabriella-Fenlon.png?resize=576%2C1024&ssl=1",bio:"Third-year Film Studies student at Liverpool John Moores University with a keen interest in fiction writing and independent filmmaking." },
      ],
      Experimental: [
        { id:"ej1", name:"Maike Höhne",  photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Maike-Hohne.png?resize=576%2C1024&ssl=1",                                                         bio:"Artistic director of the Hamburg Short Film Festival. Former head of Berlinale Shorts (2007–2019). Professor of film at the University of Applied Sciences Europe in Hamburg." },
        { id:"ej2", name:"Lucas Kua",         photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/a86379a2-1fc1-4406-88f0-609828836bfe.jpeg?resize=750%2C912&ssl=1",                                  bio:"Editor and Production Manager, creator of the experimental short Obscura. Currently pursuing a Master’s at the London Film School." },
        { id:"ej3", name:"Will Knowles",      photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Will-Knowles.png?resize=576%2C1024&ssl=1",                                                          bio:"Third-year Film Studies student and President of the LJMU Film Society. Interested in experimental film’s capacity to capture societal movements and everyday life." },
      ],
    },
    students: [
      { id:"s01", name:"Sean Bass",               strand:"Fiction",      role:"Fiction Programmer · Trailer Editor",                                     photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Sean-Bass-.png?resize=750%2C750&ssl=1" },
      { id:"s02", name:"Jake Butcher",            strand:"Fiction",      role:"Fiction Programmer · Trailer Editor",                                     photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Jake-Butcher.png?resize=750%2C750&ssl=1" },
      { id:"s03", name:"Alexander Connolly",      strand:"Experimental", role:"Experimental Programmer · Trailer Editor & Instagram",                    photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Alex-Connoly.png?resize=750%2C750&ssl=1" },
      { id:"s04", name:"Bridget Harvey",          strand:"Documentary",  role:"Documentary Programmer · TikTok/Podcast · Poster Design",            photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Bridget-Harvey.png?resize=750%2C750&ssl=1" },
      { id:"s05", name:"Max Kenney",              strand:"Animation",    role:"Animation Programmer · P.R. & Poster Design · Podcast Host",          photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Max-Kenney.png?resize=750%2C750&ssl=1" },
      { id:"s06", name:"Jon Mortimer",            strand:"Documentary",  role:"Documentary Programmer · LinkedIn · Trailer Editor",                 photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Jon-Mortimer.png?resize=750%2C750&ssl=1" },
      { id:"s07", name:"Harry O'Connell",         strand:"Experimental", role:"Experimental Programmer · Trailer Editor",                                photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Harry-OConnell.png?resize=750%2C750&ssl=1" },
      { id:"s08", name:"Oscar Bradshaw",          strand:"Animation",    role:"Animation Programmer · Letterboxd & Trailer Editor",                      photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Oscar-Bradshaw.png?resize=750%2C750&ssl=1" },
      { id:"s09", name:"Adam Byrne",              strand:"Experimental", role:"Experimental Programmer · TikTok/Instagram",                              photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Adam-Byrne.png?resize=750%2C750&ssl=1" },
      { id:"s10", name:"Josh Darlington",         strand:"Fiction",      role:"Fiction Programmer · P.R. & Instagram",                                   photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/03/Josh-Website-Headshot.png?resize=750,750&ssl=1" },
      { id:"s11", name:"Leon Hamilton",           strand:"Fiction",      role:"Fiction Programmer · Festival Support",                                    photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Leon-Hamilton.png?resize=750%2C750&ssl=1" },
      { id:"s12", name:"Devan Jones",             strand:"Experimental", role:"Experimental Programmer · Social Media Campaign Manager · Podcast Host",photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Devan-Jones.png?resize=750%2C750&ssl=1" },
      { id:"s13", name:"Leo Manfrinato De Lima",  strand:"Documentary",  role:"Documentary Programmer · Poster Design · Podcast Producer",          photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Leo-De-Lima.png?resize=750%2C750&ssl=1" },
      { id:"s14", name:"Vivien Nelson",           strand:"Animation",    role:"Animation Programmer · Festival Support",                                   photo:"https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2025/02/Viv-Nelson.png?resize=750%2C750&ssl=1" },
    ],
  },
};

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 page-hero">
        <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,20vw,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 d = useSite();
  const ed = EDITIONS[year];
  if (!ed) return <ArchiveLanding navigate={navigate} />;
  const ov = (d.festival?.archiveOverrides || {})[year] || {};
  // Section toggles: edition defaults + CMS overrides
  const t = { winners:true, trailer:true, strandTrailers:true, qas:true, photos:true, jury:true, students:true, ...(ed.sectionToggles||{}), ...((d.festival?.archiveToggles||{})[year]||{}), ...(ov.sectionToggles||{}) };

  // Jury & students pulled from People & Access (data.people, by editionYear); fall back to hardcoded edition data
  const peopleJuryList = (d.people || []).filter(p => p.group === "jury" && String(p.editionYear || "") === String(year) && p.name);
  const peopleJury = peopleJuryList.length
    ? peopleJuryList.reduce((acc, p) => { const s = p.strand || "Fiction"; (acc[s] = acc[s] || []).push(p); return acc; }, {})
    : null;
  const jury = peopleJury || ed.jury;

  const peopleStudents = (d.people || []).filter(p => p.group === "student" && String(p.editionYear || "") === String(year) && p.name)
    .map(p => ({ ...p, role: p.role || p.tasks || "" }));
  const students = peopleStudents.length ? peopleStudents : ed.students;

  // Photos: flat array override, else hardcoded edition photos
  const photos = (Array.isArray(ov.photos) && ov.photos.length) ? ov.photos : ed.photos;

  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 160px" : "1fr", gap: "clamp(20px,4vw,48px)", 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>
      {/* ── Winners carousel ── */}
      {t.winners && ed.awards.length > 0 && (
        <ArchiveWinnersPanel awards={ed.awards} year={year} navigate={navigate} strandColors={STRAND_C} />
      )}

      {/* ── Videos carousel: edition trailer + strand trailers ── */}
      {t.trailer && (ed.trailer || Object.keys(ed.strandTrailers).length > 0) && (
        <ArchiveVideoCarousel
          kicker={(EDITION_NAMES[year] || ed.label) + " Edition · Trailers"}
          accent="var(--coral)"
          videos={[
            ...(ed.trailer ? [{ id: ed.trailer, title: "Watch the " + year + " trailer.", label: (EDITION_NAMES[year] || ed.label) + " Edition Trailer", desc: ed.filmCount + " films across " + ed.strands.length + " strands." }] : []),
            ...Object.entries(ed.strandTrailers).map(([strand, vid]) => ({ id: vid, title: strand + " Strand Trailer.", label: strand + " · " + year, desc: "The " + strand + " strand of the " + (EDITION_NAMES[year] || ed.label) + " Edition." }))
          ]}
        />
      )}

      {/* ── Ceremony video (shown alongside winners if present) ── */}
      {ed.ceremony && (
        <ArchiveVideoCarousel
          kicker="Awards Ceremony"
          accent="var(--yellow)"
          videos={[{ id: ed.ceremony, title: "Ceremony highlights.", label: year + " Awards Ceremony", desc: "The Paper Bird Award ceremony for the " + (EDITION_NAMES[year] || ed.label) + " Edition." }]}
        />
      )}

      {/* ── Q&A carousel ── */}
      {t.qas && ed.qas.length > 0 && (
        <ArchiveVideoCarousel
          kicker="Filmmaker Q&As"
          accent="var(--accent)"
          videos={ed.qas.map(qa => ({ id: qa.video, title: qa.strand + " Q&A.", label: qa.strand + " · " + qa.date, desc: "A conversation with the filmmakers from the " + qa.strand + " strand.", hosts: qa.hosts, date: qa.date }))}
        />
      )}

      {/* ── Photos ── */}
      {t.photos && photos && (
        <ArchivePhotosSection photos={photos} strandColors={STRAND_C} />
      )}

      {/* ── Jury ── */}
      {t.jury && jury && (
        <ArchiveJurySection jury={jury} strands={ed.strands} year={year} accent="var(--accent)" strandColors={STRAND_C} />
      )}

      {/* ── Students ── */}
      {t.students && students && students.length > 0 && (
        <ArchiveStudentsSection students={students} accent="var(--accent)" strandColors={STRAND_C} />
      )}

      {/* 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 });