// 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)",
};

function PersonCard({ person, large }) {
  const [expanded, setExpanded] = React.useState(false);
  const bio = person.bio || "";
  const shortBio = bio.length > 200 ? bio.slice(0, 200).trimEnd() + "…" : bio;

  return (
    <div>
      <div className={person.photo ? "img-zoomable" : ""} style={{ overflow: "hidden", aspectRatio: "1/1", background: "var(--paper-2)", position: "relative" }} onClick={() => person.photo && openLightbox([{ url: person.photo, caption: person.name }])}>
        <img
          src={person.photo} alt={person.name}
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          onError={(e) => { e.target.style.display = "none"; }}
        />
      </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, lineHeight: 1.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 > 200 && (
              <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 JuryStudents({ navigate }) {
  const d = useSite();
  const strands = Object.keys(JURY_2026);
  const pg = d.festival?.pages?.jury || {};

  return (
    <Page k="jury">
      {/* Hero */}
      <section className="dark section tight page-hero">
        <div className="wrap">
          <span className="eyebrow">{pg.heroEyebrow || "2026 Jury & Team"}</span>
          <h1 className="display" style={{ fontSize: "clamp(48px,9vw,128px)", marginTop: 18, marginBottom: 0 }}>{pg.heroTitle || "The readers."}</h1>
        </div>
      </section>

      {/* Paper Bird banner */}
      <section className="section tight" style={{ background: "var(--paper-2)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <Kicker n="§">The Paper Bird Award</Kicker>
            <p style={{ fontSize: "clamp(16px,2vw,20px)", lineHeight: 1.65, color: "var(--ink)", maxWidth: 700 }}>
              {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>
          <Frame seed="paper-bird-award" ratio="16/9" play={false} src={pg.paperBirdImage || undefined} />
        </div>
      </section>

      {/* Jury by strand */}
      {strands.map((strand) => (
        <section key={strand} className="section">
          <div className="wrap">
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
              <span style={{ width: 12, height: 12, background: STRAND_ACCENT[strand] || "var(--ink)", display: "inline-block", flex: "none" }}></span>
              <Kicker n={strand}>Jury · {strand}</Kicker>
            </div>
            <div className="grid cols-3">
              {JURY_2026[strand].map((p) => (
                <PersonCard key={p.name} person={p} large />
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* Module Leads */}
      <section className="section dark tight">
        <div className="wrap">
          <Kicker n="§">Module leadership</Kicker>
          <div className="grid cols-2" style={{ marginTop: 24 }}>
            {[
              { 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. She has authored The Greek Film Musical (2006), co-edited Contemporary Balkan Cinema: Transnational Exchanges and Global Circuits (EUP 2020), and is the Principal Editor of the Journal of Greek Media and Culture.", 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. As a filmmaker, Martin has been actively making promotional and documentary content for the past decade, working with a variety of local events including Liverpool Comic Con and Manchester Psych Fest.", photo: "uploads/staff-martin-jones.png" },
            ].map((p) => (
              <div key={p.name} style={{ borderTop: "1px solid var(--line-d)", paddingTop: 20, display: "grid", gridTemplateColumns: "80px 1fr", gap: 20 }}>
                <div style={{ width: 80, height: 80, background: "var(--paper)", border: "1px solid var(--line-d)", overflow: "hidden", flexShrink: 0 }}>
                  {p.photo
                    ? <img src={p.photo} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                    : <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--faint)", fontSize: 24, fontFamily: "var(--display)" }}>{p.name.split(" ").map(w => w[0]).join("").slice(0, 2)}</div>
                  }
                </div>
                <div>
                  <div className="display" style={{ fontSize: 20, color: "var(--paper)" }}>{p.name}</div>
                  <div className="label muted" style={{ marginTop: 3 }}>{p.role}</div>
                  <p style={{ fontSize: 14, color: "rgba(240,238,233,0.7)", marginTop: 8, lineHeight: 1.6 }}>{p.bio}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MA Students */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, flexWrap: "wrap", gap: 12 }}>
            <div>
              <Kicker n="§">The team</Kicker>
              <h2 className="display" style={{ fontSize: "clamp(32px,5vw,64px)" }}>2026 MA Student Festival Team</h2>
            </div>
          </div>
          <div className="grid cols-4">
            {STUDENTS_2026.map((s) => (
              <PersonCard key={s.name} person={s} />
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

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