// site-jury.jsx — Jury & Students page with real 2026 people + bios.

const JURY_2026 = {
  Fiction: [
    {
      name: "Jing Haase",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Jing-Haase.png?resize=750%2C750&ssl=1",
      bio: "Jing Haase is a curator and short film expert who has been working in the industry for more than two decades. She has previously worked with Nordic shorts and docs as market manager at Nordisk Panorama and as festival manager for short films at the Swedish Film Institute with a primary focus on international distribution. She has also worked as a programmer and in film production, and is often used as moderator, panellist, facilitator, and jury member at international festivals and industry events.",
    },
    {
      name: "Ewa Japola",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Ewa-Japola.png?resize=750%2C750&ssl=1",
      bio: "Ewa Japola was born on 23 August 2001 in Poland. She made her first film at the age of 14. Ewa loves light, honest, sensitive stories with a strong form and genre. She is currently a sixth-year student of directing at The Polish National Film School in Lodz. Her film COUNT MY LOV3 has been selected for festivals in twelve countries so far.",
    },
    {
      name: "Jonathan Harvey",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Jonathan-Harvey-Website-Headshot.png?resize=750%2C750&ssl=1",
      bio: "Jonathan Harvey is a final year Film Studies student at Liverpool John Moores University. He feels connected to fiction films of all genres, but is most passionate about personal dramas that deconstruct and analyse the human condition. As the Vice President of the LJMU Film Society he enjoys sharing his love for international and independent cinema.",
    },
  ],
  Documentary: [
    {
      name: "Petar Mitrić",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Petar-Mitric.png?resize=750%2C750&ssl=1",
      bio: "Petar Mitrić is an Assistant Professor of Film Studies at the University of Copenhagen whose work explores how European films are developed, financed and ultimately reach their audiences. His recent book The Co-production Landscape in Europe: From Eurimages to Netflix (2025) expands on his wider body of academic publications. He currently leads the research group SCREENING EUROPE.",
    },
    {
      name: "Max Vázquez Montufar",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Max-Montufar-Websote-Headshot.png?resize=750%2C750&ssl=1",
      bio: "Max Vázquez Montufar studied Film at the National School of Cinematographic Arts (ENAC) at UNAM in Mexico. He currently works as a cinematographer and director, currently in post-production on his upcoming short film Titan. His short documentary Roots (2023) has received awards at national and international film festivals.",
    },
    {
      name: "Caitlin Nightingale",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Caitlin-Nightingale.png?resize=750%2C750&ssl=1",
      bio: "Caitlin Nightingale is a third-year Film Studies and Creative Writing student at LJMU who always finds herself in the cinema watching any film she can get her hands on. With a passion for cinema in all its genres, she loves how the human experience can be explored through film. After graduation, she hopes to gain a career in film journalism or marketing.",
    },
  ],
  Animation: [
    {
      name: "Alice Shone",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Alice-Shone.png?resize=750%2C750&ssl=1",
      bio: "Alice Shone has been part of screening and selection teams for prestigious festivals including TIFF, Encounters and the Cork International Film Festival. She has worked for the Tribeca Film Festival since 2018, where she currently holds the title of Senior Associate Shorts Programmer. Alice has a tremendous passion for championing short films, specialising in both animated and queer shorts.",
    },
    {
      name: "Lewis Macaulay",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Lewis-Macauley.png?resize=750%2C750&ssl=1",
      bio: "Lewis Macaulay is a freelance 2D animator based in Cardiff. During his studies at Arts University Bournemouth, he directed the short film 'Why Won't Anyone Eat Me?' which won the best student animation award at the 2025 RTS Southern television awards and the Paper Bird Award for Animation at the 2025 LJMU MA Short Film Festival.",
    },
    {
      name: "Callum Caddell",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Callum-Caddell.png?resize=750%2C750&ssl=1",
      bio: "Callum Caddell is a third-year Film Studies student at Liverpool John Moores University with a keen interest in Screenwriting and Editing. He plans to live in Vietnam by the end of 2026 and continue to make short films, bridging cultures and coming up with original British-Vietnamese screenplays and movies.",
    },
  ],
  Experimental: [
    {
      name: "Stine Wangler",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Stine-Wangler.png?resize=750%2C750&ssl=1",
      bio: "Stine Wangler studied at Leuphana University in Lüneburg and the University of Glamorgan in Wales, writing her Cultural Studies thesis on short films on the internet. Since 2012, she has been working at the Kurzfilm Agentur Hamburg e.V., responsible for the sales and acquisitions of short films. From 2013 to 2023, she was a member of the selection committee for the German Competition at the Kurzfilm Festival Hamburg.",
    },
    {
      name: "Rapha Heinisch",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Rapha-Heinisch.png?resize=750%2C750&ssl=1",
      bio: "Rapha Heinisch grew up in Sande on the North Sea coast of Germany. After completing their Federal Voluntary Service in the social sector, they did a six-month internship in the film industry in Berlin, then began studying film at Dortmund University of Applied Sciences and Arts in 2020, focusing on editing, camera work, and directing short feature films, documentaries, and experimental films.",
    },
    {
      name: "Emily Bartholomew",
      photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Emily-Bartholomew-Website-Headshot.png?resize=750%2C750&ssl=1",
      bio: "Emily Bartholomew is a final year Film Studies student at LJMU. With an eye for the avant-garde and experimental cinema, Emily is a passionate visual thinker and aspiring art filmmaker. Her work explores themes such as social disillusionment, alienation and mental health.",
    },
  ],
};

const STUDENTS_2026 = [
  { name: "Ellie Burns",              role: "Animation Programmer · Social Media Coordinator · Live Event Co-Host",     photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Ellie-Website-Pic.png?resize=750%2C750&ssl=1" },
  { name: "Sophia Duff",              role: "Experimental Programmer · Trailer Editor · Podcast & Live Event Co-Host",   photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Sophia-Website.png?resize=750%2C750&ssl=1" },
  { name: "Will Knowles",             role: "Documentary Programmer · Podcast & Trailer Editor · Poster Design",         photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Will-Website.png?resize=750%2C750&ssl=1" },
  { name: "Tom Matthews-John",        role: "Documentary Programmer · Letterboxd · Podcast Support",                     photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Tom-Website.png?resize=750%2C750&ssl=1" },
  { name: "Aidan McCaughley-McNulty", role: "Animation Programmer · Public Relations",                                   photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Aidan-Website.png?resize=750%2C750&ssl=1" },
  { name: "Finlay Rushton",           role: "Fiction Programmer · Podcast & Live Event Co-Host",                         photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Finn-Website.png?resize=750%2C750&ssl=1" },
  { name: "Aimee Challinor",          role: "Animation Programmer · Trailer Editor · Poster Design",                     photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Aimee-Website.png?resize=750%2C750&ssl=1" },
  { name: "Sean Greves",              role: "Fiction Programmer · Social Media Coordinator · Live Event Co-Host",        photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Sean-Website.png?resize=750%2C750&ssl=1" },
  { name: "Zoe Lodge",                role: "Documentary Programmer · Social Media Manager · Live Event Co-Host",        photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Zoe-Website.png?resize=750%2C750&ssl=1" },
  { name: "Lewis McAllister",         role: "Experimental Programmer · Live Event Co-Host & Tech Support",               photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Lewis-Website.png?resize=750%2C750&ssl=1" },
  { name: "Matt Penny",               role: "Animation Programmer · Trailer Editor & Social Media · Live Event Co-Host", photo: "https://i0.wp.com/ljmumashortfilmfestival.org/wp-content/uploads/2026/02/Matt-Website.png?resize=750%2C750&ssl=1" },
];


const STRAND_ACCENT = {
  Fiction: "var(--pink)", Documentary: "var(--purple)", Animation: "var(--yellow)", Experimental: "var(--cyan)",
};
const STRAND_HEX = {
  Fiction: "#ff5c70", Documentary: "#784c95", Animation: "#ffc823", Experimental: "#65c8d0",
};
const STRAND_TEXT_ON = {
  Fiction: "#fff", Documentary: "#fff", Animation: "#16151a", Experimental: "#16151a",
};

// ── Featured juror (large left-photo layout) ─────────────────────────────────
function FeaturedJuror({ person, strandColor }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "clamp(28px,5vw,72px)", alignItems: "start" }} className="jury-featured">
      <div style={{ overflow: "hidden", background: "var(--paper-2)", aspectRatio: "2/3" }}>
        {person.photo
          ? <img src={person.photo} alt={person.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block" }} />
          : <div style={{ width:"100%", height:"100%", background: strandColor, opacity:.15 }} />}
      </div>
      <div style={{ paddingTop: "clamp(8px,2vw,24px)" }}>
        <p className="display" style={{ fontSize:"clamp(28px,4vw,52px)", lineHeight:1.0, margin:"0 0 clamp(10px,1.5vw,18px)", letterSpacing:"-0.01em" }}>{person.name}</p>
        {person.role && <div style={{ fontFamily:"var(--mono)", fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color: strandColor, marginBottom: 20 }}>{person.role}</div>}
        {person.bio && <p style={{ fontSize:"clamp(15px,1.4vw,17px)", lineHeight:1.75, color:"var(--muted)", margin:0 }}>{person.bio}</p>}
      </div>
    </div>
  );
}

// ── Compact juror card (for the supporting 2) ─────────────────────────────────
function CompactJuror({ person, strandColor }) {
  return (
    <div style={{ display:"grid", gridTemplateColumns:"80px 1fr", gap:16, alignItems:"start", paddingTop: 28, borderTop:"1px solid var(--line)" }}>
      <div style={{ overflow:"hidden", aspectRatio:"1/1", background:"var(--paper-2)" }}>
        {person.photo
          ? <img src={person.photo} alt={person.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block" }} />
          : <div style={{ width:"100%", height:"100%", background:strandColor, opacity:.2 }} />}
      </div>
      <div>
        <div className="display" style={{ fontSize:"clamp(15px,1.6vw,20px)", lineHeight:1.15, marginBottom:4 }}>{person.name}</div>
        {person.role && <div style={{ fontFamily:"var(--mono)", fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:strandColor, marginBottom:8 }}>{person.role}</div>}
        {person.bio && <p style={{ fontSize:13.5, lineHeight:1.7, color:"var(--muted)", margin:0 }}>{person.bio}</p>}
      </div>
    </div>
  );
}

// ── Student roster card ─────────────────────────────────────────────────────
function StudentCard({ student }) {
  const color  = STRAND_HEX[student.strand]  || "var(--accent)";
  const textOn = STRAND_TEXT_ON[student.strand] || "#fff";
  return (
    <div style={{ display:"grid", gridTemplateColumns:"72px 1fr", gap:14, alignItems:"center", padding:"12px 0", borderBottom:"1px solid var(--line)" }}>
      <div style={{ width:72, height:72, overflow:"hidden", background:"var(--paper-2)", border:"3px solid " + color, borderRadius:0 }}>
        {student.photo
          ? <img src={student.photo} alt={student.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center 15%", display:"block" }} />
          : <div style={{ width:"100%", height:"100%", background:color }} />}
      </div>
      <div>
        <div className="display" style={{ fontSize:"clamp(15px,1.5vw,19px)", lineHeight:1.1, marginBottom:3 }}>{student.name}</div>
        {student.strand && (
          <span style={{ display:"inline-block", fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:".14em", textTransform:"uppercase",
            background: color, color: textOn, padding:"3px 8px", marginBottom:4 }}>
            {student.strand}
          </span>
        )}
        {(student.role || student.tasks) && <div style={{ fontSize:12.5, color:"var(--muted)", lineHeight:1.5, marginTop:2 }}>{student.role||student.tasks}</div>}
      </div>
    </div>
  );
}

// ── PersonCard (for module leads, kept for compatibility) ──────────────────────
function PersonCard({ person, large }) {
  const bio = person.bio || "";
  const [expanded, setExpanded] = React.useState(false);
  const shortBio = bio.length > 220 ? bio.slice(0, 220).trimEnd() + "…" : bio;
  return (
    <div>
      <div style={{ overflow:"hidden", aspectRatio:"1/1", background:"var(--paper-2)" }}>
        {person.photo && <img src={person.photo} alt={person.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block" }} />}
      </div>
      <div style={{ marginTop:14 }}>
        <div className="display" style={{ fontSize: large ? "clamp(18px,2vw,26px)" : 20, lineHeight:1.2 }}>{person.name}</div>
        {person.role && <div className="muted" style={{ fontSize:13, marginTop:4 }}>{person.role}</div>}
        {bio && (
          <div style={{ marginTop:10 }}>
            <p style={{ fontSize:14, lineHeight:1.65, color:"var(--muted)" }}>{expanded ? bio : shortBio}</p>
            {bio.length > 220 && (
              <button onClick={() => setExpanded(!expanded)} style={{ background:"none", border:"none", cursor:"pointer", padding:"4px 0 0", fontFamily:"var(--mono)", fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:"var(--coral)" }}>
                {expanded ? "Show less" : "Read more"}
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function ReadMore({ text, max = 150 }) {
  const [open, setOpen] = React.useState(false);
  if (!text) return null;
  if (text.length <= max) return <p style={{ fontSize:14, lineHeight:1.75, color:"var(--muted)", margin:0 }}>{text}</p>;
  return (
    <div>
      <p style={{ fontSize:14, lineHeight:1.75, color:"var(--muted)", margin:"0 0 4px" }}>
        {open ? text : text.slice(0,max).trimEnd() + "…"}
      </p>
      <button onClick={() => setOpen(!open)} style={{ background:"none", border:"none", cursor:"pointer", padding:"2px 0 0", fontFamily:"var(--mono)", fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:"var(--coral)" }}>
        {open ? "Show less" : "Read more"}
      </button>
    </div>
  );
}

function JuryStudents({ navigate }) {
  const d       = useSite();
  const strands = Object.keys(JURY_2026);
  const pg      = d.festival?.pages?.jury || {};
  const [activeStrand, setActiveStrand] = React.useState(strands[0]);
  const acStrand    = activeStrand || strands[0];
  const juryMembers = JURY_2026[acStrand] || [];
  const [featured, ...rest] = juryMembers;
  const strandColor = STRAND_ACCENT[acStrand] || "var(--accent)";
  const strandHex   = STRAND_HEX[acStrand]   || "var(--accent)";

  // Use CMS jury if available (from People & Access by editionYear), fall back to hardcoded
  const cmsJury = (d.people || []).filter(p => p.group === "jury" && p.strand === acStrand && p.name);
  const displayJury = cmsJury.length ? cmsJury : juryMembers;
  const [dfeatured, ...drest] = displayJury;

  // Students from CMS or hardcoded
  const cmsStudents = (d.people || []).filter(p => p.group === "student" && p.name).sort((a,b) => a.name.localeCompare(b.name));
  const displayStudents = cmsStudents.length ? cmsStudents : [...STUDENTS_2026].sort((a,b) => a.name.localeCompare(b.name));

  // Staff
  const cmsStaff = (d.people || []).filter(p => p.group === "staff" && p.name);
  const hardStaff = [
    { name: "Dr. Lydia Papadimitriou", role: "Festival Director", bio: "Lydia Papadimitriou is Reader (Associate Professor) in Film Studies at Liverpool John Moores University. She has published extensively on different aspects of Greek cinema, and is currently researching on film festivals, distribution, documentary, and Balkan cinema.", photo: "uploads/staff-lydia-papadimitriou.png" },
    { name: "Martin Jones", role: "Festival Coordinator", bio: "Martin L. Jones is an academic and filmmaker currently completing his PhD which engages with the intersection between the found footage film and folklore, with a specific focus on the influence of contemporary urban legends and myths on the genre.", photo: "uploads/staff-martin-jones.png" },
  ];
  const displayStaff = cmsStaff.length ? cmsStaff : hardStaff;

  return (
    <Page k="jury">
      {/* ── Hero ── */}
      <section className="dark section tight page-hero" style={{ position:"relative", overflow:"hidden" }}>
        {/* Decorative edition numeral */}
        <div aria-hidden="true" style={{ position:"absolute", right:"-0.05em", bottom:"-0.18em", fontFamily:"var(--display)", fontWeight:900, fontSize:"clamp(120px,28vw,400px)", lineHeight:1, color:"rgba(240,238,233,0.04)", letterSpacing:"-0.04em", userSelect:"none", pointerEvents:"none" }}>
          VI
        </div>
        <div className="wrap jury-hero-grid" style={{ display:"grid", gridTemplateColumns:"1fr auto", gap:32, alignItems:"end" }}>
          <div>
            <span className="eyebrow">{pg.heroEyebrow || d.festival?.year + " Jury & Team"}</span>
            <h1 className="display" style={{ fontSize:"clamp(48px,9vw,128px)", marginTop:18, marginBottom:0, lineHeight:0.9 }}>
              {pg.heroTitle || "The readers."}
            </h1>
          </div>
          <div className="jury-hero-stats" style={{ borderLeft:"1px solid var(--line-d)", paddingLeft:28, alignSelf:"stretch", display:"flex", flexDirection:"column", justifyContent:"flex-end", paddingBottom:4, gap:14, minWidth:140 }}>
            {[["Strands", strands.length], ["Students", displayStudents.length], ["Jury", Object.values(JURY_2026).flat().length], ["Edition", pg.heroEyebrow?.split(" ")[0] || d.festival?.edition || "Sixth"]].map(([k,v]) => (
              <div key={k}>
                <div style={{ fontSize:10, fontFamily:"var(--mono)", letterSpacing:".14em", textTransform:"uppercase", color:"rgba(240,238,233,0.35)", marginBottom:2 }}>{k}</div>
                <div className="display" style={{ fontSize:"clamp(18px,2vw,28px)", color:"var(--paper)", lineHeight:1 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Jury section ── */}
      <section className="section">
        <div className="wrap">
          {/* Strand selector */}
          <div style={{ marginBottom:"clamp(32px,4vw,56px)" }}>
            <Kicker n="§ 01">The Jury</Kicker>
            <h2 className="display" style={{ fontSize:"clamp(32px,5vw,64px)", margin:"0 0 clamp(16px,2vw,28px)", lineHeight:0.95 }}>
              {acStrand} jury.
            </h2>
            <div style={{ display:"flex", gap:8, flexWrap:"wrap" }} className="arch-strand-btns">
              {strands.map(s => {
                const on = s === acStrand;
                const hex = STRAND_HEX[s];
                const tOn = STRAND_TEXT_ON[s];
                return (
                  <button key={s} onClick={() => setActiveStrand(s)}
                    style={{ padding:"8px 16px", border:"1px solid " + hex, background: on ? hex : "transparent",
                      color: on ? tOn : "var(--ink)", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".1em",
                      textTransform:"uppercase", cursor:"pointer", transition:"all .12s" }}>
                    {s}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Equal columns grid for all jury members */}
          {displayJury.length > 0 && (
            <div className="jury-grid" style={{ display:"grid", gridTemplateColumns: displayJury.length === 2 ? "1fr 1fr" : displayJury.length >= 4 ? "1fr 1fr" : "1fr 1fr 1fr", gap:"clamp(20px,3vw,48px)", marginTop: 8 }}>
              {displayJury.map(p => (
                <div key={p.name} style={{ paddingTop:24, borderTop:"1px solid var(--line)" }}>
                  <div style={{ overflow:"hidden", aspectRatio:"2/3", background:"var(--paper-2)", marginBottom:18 }}>
                    {p.photo
                      ? <img src={p.photo} alt={p.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block" }} />
                      : <div style={{ width:"100%", height:"100%", background:strandHex, opacity:.15 }} />}
                  </div>
                  <div className="display" style={{ fontSize:"clamp(18px,2vw,26px)", lineHeight:1.0, marginBottom:6, letterSpacing:"-0.01em" }}>{p.name}</div>
                  {p.role && <div style={{ fontFamily:"var(--mono)", fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:strandColor, marginBottom:12 }}>{p.role}</div>}
                  {p.bio && <ReadMore text={p.bio} max={150} />}
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* ── Paper Bird Award ── */}
      <section className="section dark" style={{ background:"var(--ink-2)" }}>
        <div className="wrap about-sec-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"clamp(32px,5vw,72px)", alignItems:"center" }}>
          <div>
            <Kicker n="§ 02">The Paper Bird Award</Kicker>
            <h2 className="display" style={{ fontSize:"clamp(28px,4vw,52px)", color:"var(--paper)", margin:"14px 0 clamp(16px,2vw,24px)", lineHeight:1.0 }}>The trophy.</h2>
            <p style={{ fontSize:"clamp(15px,1.4vw,18px)", lineHeight:1.75, color:"rgba(240,238,233,0.75)", margin:0 }}>
              {pg.paperBirdDesc || "The Liver Bird is a symbol of Liverpool John Moores University and the City of Liverpool, whilst the material of paper reflects the academic context of the festival. Each paper bird trophy is colour-coded to its category. The trophies are the creation of Dave Treadwell."}
            </p>
          </div>
          <div style={{ border:"1px solid var(--line-d)", overflow:"hidden" }}>
            <Frame seed="paper-bird-award" ratio="16/9" play={false} src={pg.paperBirdImage || undefined} />
          </div>
        </div>
      </section>

      {/* ── Module Leads ── */}
      <section className="section dark tight">
        <div className="wrap">
          <Kicker n="§ 03">Module leadership</Kicker>
          <div className="grid cols-2 jury-leads-grid" style={{ marginTop:24, gap:"clamp(20px,3vw,40px)" }}>
            {displayStaff.map(p => (
              <div key={p.name} style={{ display:"grid", gridTemplateColumns:"96px 1fr", gap:24, alignItems:"start", paddingTop:20, borderTop:"1px solid var(--line-d)" }}>
                <div style={{ width:96, height:96, overflow:"hidden", background:"var(--paper-2)" }}>
                  {p.photo
                    ? <img src={p.photo} alt={p.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"top", display:"block" }} />
                    : <div style={{ width:"100%", height:"100%", background:"var(--ink)", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--faint)", fontSize:28, fontFamily:"var(--display)" }}>{p.name.split(" ").map(w=>w[0]).join("").slice(0,2)}</div>}
                </div>
                <div>
                  <div className="display" style={{ fontSize:"clamp(17px,1.8vw,22px)", color:"var(--paper)", lineHeight:1.1, marginBottom:4 }}>{p.name}</div>
                  <div style={{ fontFamily:"var(--mono)", fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:"var(--accent)", marginBottom:12 }}>{p.role}</div>
                  <ReadMore text={p.bio} max={150} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Students ── */}
      <section className="section">
        <div className="wrap">
          <div style={{ marginBottom:"clamp(8px,1.5vw,16px)", flexWrap:"wrap", gap:12 }}>
            <div>
              <Kicker n="§ 04">The team</Kicker>
              <h2 className="display" style={{ fontSize:"clamp(32px,5vw,64px)", margin:0, lineHeight:0.95 }}>{d.festival?.year || 2026} MA programmers.</h2>
            </div>
          </div>
          {/* Students by strand */}
          {Object.keys(STRAND_ACCENT).map(strand => {
            const strandStudents = displayStudents.filter(s => (s.strand || "") === strand);
            if (!strandStudents.length) return null;
            const sHex  = STRAND_HEX[strand]  || "var(--accent)";
            const sTOn  = STRAND_TEXT_ON[strand] || "#fff";
            return (
              <div key={strand} style={{ marginTop: "clamp(24px,3vw,40px)" }}>
                <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:12, borderBottom:"2px solid "+sHex, paddingBottom:8 }}>
                  <span style={{ fontFamily:"var(--mono)", fontSize:10, letterSpacing:".16em", textTransform:"uppercase", color:sHex, fontWeight:700 }}>{strand}</span>
                  <span style={{ fontFamily:"var(--mono)", fontSize:10, color:"var(--muted)", letterSpacing:".08em" }}>{strandStudents.length}</span>
                </div>
                <div className="grid cols-2" style={{ gap:0 }}>
                  {strandStudents.map(s => (
                    <div key={s.name||s.id} style={{ display:"grid", gridTemplateColumns:"112px 1fr", gap:16, alignItems:"center", padding:"14px 0", borderBottom:"1px solid var(--line)" }}>
                      <div style={{ width:112, height:112, overflow:"hidden", background:"var(--paper-2)", border:"3px solid "+sHex }}>
                        {s.photo
                          ? <img src={s.photo} alt={s.name} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center 15%", display:"block" }} />
                          : <div style={{ width:"100%", height:"100%", background:sHex }} />}
                      </div>
                      <div>
                        <div style={{ fontSize:"clamp(13px,1.3vw,16px)", fontWeight:700, lineHeight:1.1, marginBottom:4 }}>{s.name}</div>
                        {(s.role||s.tasks) && <div style={{ fontSize:10.5, fontFamily:"var(--mono)", color:"var(--muted)", lineHeight:1.5, letterSpacing:".04em" }}>{s.role||s.tasks}</div>}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { JuryStudents, PersonCard });
