// pages/inner.jsx — about, program, speakers, riyadh, partner, resources, faq, contact

// ───────── About ─────────
function About() {
  return (
    <div className="fl-fade">
      <PageHero
        id="about-hero"
        index="01"
        kicker="About FLS"
        title={<>A trade show <span style={{ color: 'var(--signal)' }}>for the science</span><br />that's about to ship.</>}
        sub="Future Labs Summit is a 4-day, public-facing gathering for the new discovery stack — AI, automation, decentralized science, augmented reality and the people building on top of them."
      />

      <section id="about-thesis" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80,
        }}>
          <div>
            <div className="fl-mono" style={{
              fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--muted)', marginBottom: 18, paddingTop: 14, borderTop: '1px solid var(--ink)',
            }}>§ Thesis</div>
            <h3 className="fl-display" style={{
              fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, lineHeight: 0.95,
            }}>Science needs<br /><span style={{ color: 'var(--signal)' }}>a CES.</span></h3>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, fontSize: 18, lineHeight: 1.55, textWrap: 'pretty' }}>
            <p>For 50 years, breakthroughs in physics and computing earned their own consumer-facing moment. The Detroit Auto Show. CES. WWDC. They mattered because they told the rest of the world, in plain language, <em className="fl-serif">what is about to be possible</em>.</p>
            <p>Biology — and the broader discovery stack — never got that. The most interesting work of the next decade is happening in lab basements, hospital corridors and on-chain DAOs that almost nobody outside the field can see.</p>
            <p>Future Labs Summit is built to change that. Four days. One floor. Cameras on. The decade ahead, laid out for everyone who has a stake in it — which, given the subject, is everyone.</p>
          </div>
        </div>
      </section>

      <Marquee id="about-marquee" items={[
        'Pharma',
        'Longevity',
        'DIY Research',
        'DeSci',
        'Automation',
        'AI Doctors',
        'Robotic Surgeons',
        'Cloud Labs',
        'BCI',
        'Synthetic Biology',
      ]} signal />

      {/* Photo band — lab in motion */}
      <PhotoBand
        id="about-photo"
        src={IMG.heroPortrait}
        alt="Scientist at work"
        height={560}
        eyebrow="// FROM THE BENCH · EDITION 00 · ARCHIVE"
        title={<>Most science<br />never gets its <span style={{ color: 'var(--signal)' }}>premiere</span>.</>}
        sub="We are building the venue for the kind of work that has, until now, lived in PDFs nobody outside the lab will ever read."
      />

      {/* Manifesto */}
      <section id="about-manifesto" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="02"
            eyebrow="Manifesto · Six Promises"
            title={<>What we will, and will not, do.</>}
          />
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            borderTop: '1px solid var(--ink)',
          }} className="fl-mani-grid">
            {[
              ['WILL', 'Show running platforms.', 'Every pavilion must run live. If it can\'t demo, it can\'t exhibit.'],
              ['WILL NOT', 'Pretend slides are products.', 'Roadmaps are not exhibits. Keynotes are the only place for promises.'],
              ['WILL', 'Let students walk in.', 'Verified student ID gets you a pass. No questions, no fees.'],
              ['WILL NOT', 'Sell the audience.', 'Your badge data is not for sale. Sponsor leads are opt-in, period.'],
              ['WILL', 'Hold a public day.', 'Day 4 is open. Free. For schools, families, the curious. Always.'],
              ['WILL NOT', 'Be a charity gala.', 'We respect philanthropy. This is not it. This is a working trade show.'],
            ].map(([kind, t, b], i) => (
              <div key={i} style={{
                padding: 32, borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
                borderBottom: '1px solid var(--rule)',
                background: kind === 'WILL NOT' ? 'var(--paper)' : 'transparent',
              }}>
                <div className="fl-mono" style={{
                  fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: kind === 'WILL' ? 'var(--signal)' : 'var(--muted)', marginBottom: 16,
                }}>{kind === 'WILL' ? '◆ Will' : '✕ Will not'}</div>
                <h4 style={{
                  margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
                  fontSize: 'clamp(24px, 2.6vw, 32px)', letterSpacing: '-0.02em', lineHeight: 1.05,
                  textWrap: 'balance',
                }}>{t}</h4>
                <p style={{ marginTop: 14, fontSize: 15, color: 'var(--muted)', lineHeight: 1.5, textWrap: 'pretty' }}>{b}</p>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 800px) {
              .fl-mani-grid { grid-template-columns: 1fr !important; }
              .fl-mani-grid > div { border-right: 0 !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Team */}
      <section id="about-team" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="03"
            eyebrow="The Convenors"
            title="A small, opinionated team."
            lede="A handful of operators, scientists and ex-conference runners. We get out of the way as soon as the doors open."
          />
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
          }} className="fl-team-grid">
            {[
              { i: 'F.A.', r: 'Convenor · Programme', city: 'Riyadh' },
              { i: 'M.K.', r: 'Convenor · Exhibitors', city: 'London' },
              { i: 'D.R.', r: 'Operations · Floor', city: 'Riyadh' },
              { i: 'S.B.', r: 'Press · Public Day', city: 'Cairo' },
            ].map((p) => (
              <div key={p.i} style={{
                border: '1px solid var(--rule)', minHeight: 240,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                padding: 22,
              }}>
                <div className="fl-mono" style={{
                  fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--muted)',
                }}>{p.city}</div>
                <div className="fl-display" style={{
                  fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 0.9,
                }}>{p.i}</div>
                <div style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.4 }}>{p.r}</div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 800px) {
              .fl-team-grid { grid-template-columns: 1fr 1fr !important; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ───────── Page hero (shared by inner pages) ─────────
function PageHero({ index, kicker, title, sub, id }) {
  return (
    <section id={id} style={{ padding: '40px 0 var(--pad-section)', borderBottom: '1px solid var(--rule)' }}>
      <div className="fl-shell">
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 36,
        }}>
          <span>§ {index} · {kicker}</span>
          <span>FLS · Edition 01 · 19 — 22 Mar / 2027</span>
        </div>
        <h1 className="fl-display" style={{
          margin: 0, fontSize: 'clamp(48px, 9vw, 144px)',
          lineHeight: 0.9, letterSpacing: '-0.04em', textWrap: 'balance',
        }}>{title}</h1>
        {sub && <p style={{
          marginTop: 36, fontSize: 22, lineHeight: 1.35, color: 'var(--muted)',
          maxWidth: 780, textWrap: 'pretty',
        }}>{sub}</p>}
      </div>
    </section>
  );
}

// ───────── Session roster ─────────
// The 20 named sessions across the Main Stage and the child stages (B/C/D,
// workshops, pavilions). Hosts and guests are deliberately unconfirmed — the
// roster files 30 days out. Keep `host` / `guests` as 'TBC' until Comms sign
// off; the Event JSON-LD in index.html mirrors this list, so update both.
const STAGE_EVENTS = [
  // ── Main Stage ──────────────────────────────────────────────────────────
  { id: 'fls-01', tier: 'main',  no: '01', day: '19 MAR', t: '09:00', stage: 'Mainstage A', format: 'Opening Address',
    name: 'Opening Address — The Discovery Stack in 2027', host: 'TBC', guests: 'TBC',
    blurb: 'Where lab automation, research AI, decentralised science and augmented reality actually meet.' },
  { id: 'fls-02', tier: 'main',  no: '02', day: '19 MAR', t: '10:30', stage: 'Mainstage A', format: 'Fireside Chat',
    name: 'The Future of Labs — Fireside Chat', host: 'TBC', guests: 'TBC',
    blurb: 'Forty minutes, two chairs, no slides. What the bench looks like when the robots do the pipetting.' },
  { id: 'fls-03', tier: 'main',  no: '03', day: '19 MAR', t: '16:30', stage: 'Mainstage A', format: 'Keynote',
    name: 'Keynote 01 — Five Demos, Fifteen Minutes Each', host: 'TBC', guests: 'TBC',
    blurb: 'Five teams, live hardware, a hard stop at fifteen minutes. Nothing pre-recorded.' },
  { id: 'fls-04', tier: 'main',  no: '04', day: '20 MAR', t: '09:00', stage: 'Mainstage A', format: 'Keynote',
    name: 'The Self-Driving Lab — From Bench to Fleet', host: 'TBC', guests: 'TBC',
    blurb: 'What changes when a single automated lab becomes a hundred of them running the same protocol.' },
  { id: 'fls-05', tier: 'main',  no: '05', day: '20 MAR', t: '14:00', stage: 'Mainstage A', format: 'Live Demo',
    name: 'The Robotic Surgeon — Live Theatre, Narrated', host: 'TBC', guests: 'TBC',
    blurb: 'A procedure relayed from the operating theatre, narrated in plain language as it happens.' },
  { id: 'fls-06', tier: 'main',  no: '06', day: '20 MAR', t: '17:00', stage: 'Mainstage A', format: 'Fireside Chat',
    name: 'Longevity Moves to the Clinic — Fireside Chat', host: 'TBC', guests: 'TBC',
    blurb: 'The gap between a compelling mouse result and a therapy a regulator will sign.' },
  { id: 'fls-07', tier: 'main',  no: '07', day: '21 MAR', t: '10:00', stage: 'Mainstage A', format: 'Keynote',
    name: 'Keynote 02 — Models That Discover', host: 'TBC', guests: 'TBC',
    blurb: 'Foundation models that propose experiments rather than summarise papers.' },
  { id: 'fls-08', tier: 'main',  no: '08', day: '21 MAR', t: '12:00', stage: 'Mainstage A', format: 'Panel',
    name: 'Sovereign Capital Meets Deep Tech — Main Stage Panel', host: 'TBC', guests: 'TBC',
    blurb: 'Patient money, twenty-year horizons, and what founders give up to take it.' },
  { id: 'fls-09', tier: 'main',  no: '09', day: '21 MAR', t: '19:00', stage: 'Mainstage A', format: 'Hackathon Final',
    name: 'Hackathon Finals — Top 8 Pitch on the Main Stage', host: 'TBC', guests: 'TBC',
    blurb: 'Eight teams out of six hundred builders. Six minutes each, judged live.' },
  { id: 'fls-10', tier: 'main',  no: '10', day: '22 MAR', t: '16:00', stage: 'Mainstage A', format: 'Closing Address',
    name: 'Closing Address — Looking Ahead to Edition 02', host: 'TBC', guests: 'TBC',
    blurb: 'What we got wrong, what carried, and what returns in 2028.' },

  // ── Child stages: B / C / D, workshops, pavilions ────────────────────────
  { id: 'fls-11', tier: 'child', no: '11', day: '19 MAR', t: '15:00', stage: 'Stage B', format: 'Panel',
    name: 'The State of Biotech Capital, Q1 2027', host: 'TBC', guests: 'TBC',
    blurb: 'Where the money actually went last year, read off the term sheets.' },
  { id: 'fls-12', tier: 'child', no: '12', day: '20 MAR', t: '09:00', stage: 'Stage B', format: 'Deep Dive',
    name: 'Foundation Models for Biology — Stage B Deep Dive', host: 'TBC', guests: 'TBC',
    blurb: 'Architecture, training data, and the benchmarks nobody agrees on yet.' },
  { id: 'fls-13', tier: 'child', no: '13', day: '20 MAR', t: '09:00', stage: 'Stage C', format: 'Panel',
    name: 'Decentralised Science — Funding Without Gatekeepers', host: 'TBC', guests: 'TBC',
    blurb: 'DeSci past the hype cycle: what has actually funded a working experiment.' },
  { id: 'fls-14', tier: 'child', no: '14', day: '20 MAR', t: '09:00', stage: 'Stage D', format: 'Deep Dive',
    name: 'Augmented Reality — The Surgeon’s Next Screen', host: 'TBC', guests: 'TBC',
    blurb: 'Overlays in the operating theatre, and the latency budget that makes or breaks them.' },
  { id: 'fls-15', tier: 'child', no: '15', day: '20 MAR', t: '11:30', stage: 'Stage B', format: 'Roundtable',
    name: 'Wet Lab Meets Dry Lab — Stage B Roundtable', host: 'TBC', guests: 'TBC',
    blurb: 'The handoff problem: computational predictions that never survive contact with the bench.' },
  { id: 'fls-16', tier: 'child', no: '16', day: '20 MAR', t: '15:30', stage: 'Stage D', format: 'Lightning Talks',
    name: 'Open Hardware for Labs — Stage D Lightning Talks', host: 'TBC', guests: 'TBC',
    blurb: 'Ten builders, five minutes each, on instruments you can fork.' },
  { id: 'fls-17', tier: 'child', no: '17', day: '21 MAR', t: '13:00', stage: 'Workshop 1', format: 'Cohort',
    name: 'Protein Design, Hands-On — Workshop Cohort', host: 'TBC', guests: 'TBC',
    blurb: 'Bring a laptop. Leave with a designed binder and the pipeline that made it.' },
  { id: 'fls-18', tier: 'child', no: '18', day: '21 MAR', t: '13:00', stage: 'Workshop 2', format: 'Cohort',
    name: 'Agentic Research Workflows — Workshop Cohort', host: 'TBC', guests: 'TBC',
    blurb: 'Wiring agents into a real research loop without losing the audit trail.' },
  { id: 'fls-19', tier: 'child', no: '19', day: '21 MAR', t: '17:00', stage: 'Stage B', format: 'Panel',
    name: 'Data Sovereignty in Clinical AI — Stage B Panel', host: 'TBC', guests: 'TBC',
    blurb: 'Who holds the patient data when the model is trained in one jurisdiction and deployed in another.' },
  { id: 'fls-20', tier: 'child', no: '20', day: '22 MAR', t: '11:00', stage: 'Pavilion F', format: 'Public Session',
    name: 'Science Communication in the Age of AI — Public Session', host: 'TBC', guests: 'TBC',
    blurb: 'Open to the public. How to tell a true story about research that is still uncertain.' },
];

function StageEventTable({ id, tier, eyebrow, title, note }) {
  const rows = STAGE_EVENTS.filter((e) => e.tier === tier);
  return (
    <div id={id} style={{ marginBottom: 72 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        gap: 24, flexWrap: 'wrap', paddingBottom: 18,
        borderBottom: '2px solid var(--ink)',
      }}>
        <h3 className="fl-display" style={{
          margin: 0, fontSize: 'clamp(28px, 4vw, 46px)', fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1,
        }}>{title}</h3>
        <span className="fl-mono" style={{
          fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)',
        }}>{eyebrow} · {rows.length} sessions</span>
      </div>
      {note && <p className="fl-mono" style={{
        margin: '16px 0 0', fontSize: 11.5, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--muted)',
      }}>{note}</p>}
      <ol style={{ listStyle: 'none', padding: 0, margin: '8px 0 0' }}>
        {rows.map((e) => (
          <li key={e.id} id={e.id} style={{
            display: 'grid', gridTemplateColumns: '56px 1fr 260px',
            gap: 28, alignItems: 'start', padding: '28px 0',
            borderBottom: '1px solid var(--rule)',
          }} className="fl-ev-row">
            <div className="fl-mono" style={{
              fontSize: 12, letterSpacing: '0.08em', color: 'var(--muted)', paddingTop: 6,
            }}>{e.no}</div>

            <div>
              <div className="fl-mono" style={{
                fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: 'var(--signal)', marginBottom: 10,
              }}>{e.format}</div>
              <h4 style={{
                margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 'clamp(19px, 2.1vw, 25px)', letterSpacing: '-0.02em',
                lineHeight: 1.25, textWrap: 'pretty',
              }}>{e.name}</h4>
              <p style={{
                margin: '10px 0 0', fontSize: 15.5, lineHeight: 1.45,
                color: 'var(--muted)', maxWidth: 620, textWrap: 'pretty',
              }}>{e.blurb}</p>
              <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', marginTop: 16 }}>
                {[['Host', e.host], ['Guests', e.guests]].map(([k, v]) => (
                  <div key={k} className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                    <span style={{ color: 'var(--muted)' }}>{k} </span>
                    <span style={{
                      color: 'var(--ink)', border: '1px dashed var(--rule)',
                      padding: '3px 8px', marginLeft: 6,
                    }}>{v === 'TBC' ? 'To be confirmed' : v}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="fl-mono" style={{
              fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--muted)', textAlign: 'right', paddingTop: 6, lineHeight: 1.9,
            }}>
              {e.day}<br />
              <span style={{ color: 'var(--ink)' }}>{e.t}</span><br />
              {e.stage}
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

// ───────── Program ─────────
function Program() {
  const days = [
    {
      d: '19 MAR', label: 'D01 · OPENING', color: 'var(--signal)',
      sessions: [
        { t: '09:00', kind: 'KEY', name: 'Opening Address · Where the discovery stack is going', hall: 'Mainstage A' },
        { t: '10:30', kind: 'KEY', name: 'Keynote 01 — Five demos, fifteen minutes each', hall: 'Mainstage A' },
        { t: '12:00', kind: 'EXP', name: 'Pavilions open · 40,000m² goes live', hall: 'All halls' },
        { t: '15:00', kind: 'PNL', name: 'The state of biotech capital, Q1 2027', hall: 'Stage B' },
        { t: '18:00', kind: 'SOC', name: 'Opening reception · Outdoor courtyard', hall: 'Courtyard' },
      ],
    },
    {
      d: '20 MAR', label: 'D02 · PILLARS',
      sessions: [
        { t: '09:00', kind: 'TRK', name: 'Track A · Lab Automation — Bench to fleet', hall: 'Stage A' },
        { t: '09:00', kind: 'TRK', name: 'Track B · Research-Focused AI — Foundation models for biology', hall: 'Stage B' },
        { t: '09:00', kind: 'TRK', name: 'Track C · Decentralized Science — Funding without gatekeepers', hall: 'Stage C' },
        { t: '09:00', kind: 'TRK', name: 'Track D · Augmented Reality — The surgeon\'s next screen', hall: 'Stage D' },
        { t: '14:00', kind: 'DEM', name: 'Robotic surgery, narrated · Live operating theatre', hall: 'Pavilion E' },
        { t: '19:00', kind: 'SOC', name: 'Founders dinner · By invitation', hall: 'Rooftop' },
      ],
    },
    {
      d: '21 MAR', label: 'D03 · BUILD · CAPITAL',
      sessions: [
        { t: '08:00', kind: 'HCK', name: 'Hackathon kickoff · 600 builders on the floor', hall: 'Hall 4' },
        { t: '09:00', kind: 'FND', name: 'Founders & Capital · Day pass (invite-only)', hall: 'Hall 3' },
        { t: '10:00', kind: 'KEY', name: 'Keynote 02 — Models that discover', hall: 'Mainstage A' },
        { t: '12:00', kind: 'PNL', name: 'Sovereign capital meets deep-tech', hall: 'Stage A' },
        { t: '13:00', kind: 'COH', name: 'Cohort · Protein design, hands-on (sold out)', hall: 'Workshop 1' },
        { t: '13:00', kind: 'COH', name: 'Cohort · Agentic research workflows', hall: 'Workshop 2' },
        { t: '15:00', kind: 'KEY', name: 'Keynote 03 — Longevity moves to the clinic', hall: 'Mainstage A' },
        { t: '17:00', kind: 'PNL', name: 'AI doctors — what the FDA is actually saying', hall: 'Stage B' },
        { t: '19:00', kind: 'HCK', name: 'Hackathon judging · Top 8 pitch on mainstage', hall: 'Mainstage A' },
        { t: '21:00', kind: 'SOC', name: 'Awards & afterparty', hall: 'Pavilion E' },
      ],
    },
    {
      d: '22 MAR', label: 'D04 · PUBLIC', color: 'var(--signal)',
      sessions: [
        { t: '10:00', kind: 'PUB', name: 'Open day · Free entry for the public', hall: 'All halls' },
        { t: '11:00', kind: 'PUB', name: 'Family programme · Live science demonstrations', hall: 'Pavilion F' },
        { t: '13:00', kind: 'PUB', name: 'School visits · Schedule on request', hall: 'Mainstage A' },
        { t: '16:00', kind: 'KEY', name: 'Closing notes & looking ahead to Edition 02', hall: 'Mainstage A' },
        { t: '18:00', kind: 'SOC', name: 'Pavilions close · See you in 2028', hall: 'All halls' },
      ],
    },
  ];
  const KIND = {
    KEY: ['Keynote', 'var(--signal)'],
    TRK: ['Track', 'var(--ink)'],
    PNL: ['Panel', 'var(--ink)'],
    DEM: ['Live demo', 'var(--signal)'],
    EXP: ['Expo', 'var(--ink)'],
    HCK: ['Hackathon', 'var(--signal)'],
    COH: ['Cohort', 'var(--ink)'],
    FND: ['Founders', 'var(--ink)'],
    PUB: ['Public', 'var(--signal)'],
    SOC: ['Social', 'var(--muted)'],
  };
  return (
    <div className="fl-fade">
      <PageHero
        id="program-hero"
        index="02"
        kicker="The Programme"
        title={<>Four days, six tracks,<br /><span style={{ color: 'var(--signal)' }}>no filler.</span></>}
        sub="Below is the working programme. It files in full on 1 February 2027. Bookmark this page — it updates weekly until then."
      />

      <section id="program-sessions" style={{ padding: 'var(--pad-section) 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="fl-shell">
          <div style={{ maxWidth: 780, marginBottom: 64 }}>
            <div className="fl-mono" style={{
              fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: 'var(--muted)', marginBottom: 20,
            }}>§ 02.1 · Named Sessions · 20 Confirmed Slots</div>
            <h2 className="fl-display" style={{
              margin: 0, fontSize: 'clamp(34px, 5.4vw, 68px)', fontWeight: 600,
              letterSpacing: '-0.04em', lineHeight: 0.95, textWrap: 'balance',
            }}>Twenty sessions.<br /><span style={{ color: 'var(--signal)' }}>Ten on the main stage.</span></h2>
            <p style={{ marginTop: 28, fontSize: 19, lineHeight: 1.4, color: 'var(--muted)', textWrap: 'pretty' }}>
              The slots below are locked — titles, formats, stages and times. Hosts and guests
              are not. We file the roster 30 days out so early-stage founders, first-time
              speakers and students get a fair shot at the same stages as the household names.
            </p>
          </div>

          <StageEventTable
            id="program-mainstage"
            tier="main"
            eyebrow="Mainstage A"
            title="Main stage"
            note="◆ All main stage sessions are recorded and released free after the summit."
          />
          <StageEventTable
            id="program-childstages"
            tier="child"
            eyebrow="Stages B / C / D · Workshops · Pavilions"
            title="Child stages"
            note="◆ Workshop cohorts are capped. Pavilion sessions are open to public day-pass holders."
          />

          <div style={{
            padding: 32, background: 'var(--soft)', border: '1px solid var(--rule)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
          }}>
            <div className="fl-mono" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>
              ◆ Hosts &amp; guests announced 30 days out — 17 Feb 2027
            </div>
            <a href="#/speakers" className="fl-btn">See the roster →</a>
          </div>
        </div>
      </section>

      <section id="program-schedule" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          {days.map((day, di) => (
            <div key={day.d} id={`program-day-${String(di + 1).padStart(2, '0')}`} style={{ marginBottom: 80 }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, alignItems: 'baseline',
                paddingBottom: 18, borderBottom: '2px solid var(--ink)', marginBottom: 0,
              }} className="fl-day-head">
                <div className="fl-display" style={{
                  fontSize: 'clamp(40px, 6vw, 84px)', fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 0.9,
                  color: day.color || 'var(--ink)',
                }}>{day.d}</div>
                <div className="fl-mono" style={{
                  fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)',
                }}>{day.label}</div>
              </div>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {day.sessions.map((s, i) => {
                  const [kindLabel, kindColor] = KIND[s.kind] || ['—', 'var(--ink)'];
                  return (
                    <li key={i} style={{
                      display: 'grid', gridTemplateColumns: '90px 110px 1fr 220px',
                      gap: 24, alignItems: 'center', padding: '22px 0',
                      borderBottom: '1px solid var(--rule)',
                    }} className="fl-prog-row">
                      <div className="fl-mono" style={{
                        fontSize: 13, letterSpacing: '0.06em', color: 'var(--ink)',
                      }}>{s.t}</div>
                      <span className="fl-mono" style={{
                        fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
                        color: kindColor, border: `1px solid ${kindColor === 'var(--muted)' ? 'var(--rule)' : 'currentColor'}`,
                        padding: '4px 8px', display: 'inline-block', width: 'fit-content',
                      }}>{kindLabel}</span>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontWeight: 500,
                        fontSize: 'clamp(18px, 2vw, 22px)', letterSpacing: '-0.015em', lineHeight: 1.3,
                        textWrap: 'pretty',
                      }}>{s.name}</div>
                      <div className="fl-mono" style={{
                        fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
                        color: 'var(--muted)', textAlign: 'right',
                      }}>{s.hall}</div>
                    </li>
                  );
                })}
              </ol>
            </div>
          ))}
          <div style={{
            padding: 32, background: 'var(--foot-bg)', color: 'var(--foot-fg)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
          }}>
            <div className="fl-mono" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              ◆ Programme files in full on 1 Feb 2027
            </div>
            <a href="#/contact" className="fl-btn signal">Get notified →</a>
          </div>
          <style>{`
            @media (max-width: 800px) {
              .fl-day-head { grid-template-columns: 1fr !important; gap: 8px !important; }
              .fl-ev-row { grid-template-columns: 44px 1fr !important; gap: 16px !important; }
              .fl-ev-row > :nth-child(3) { grid-column: 2; text-align: left !important; margin-top: 4px; }
              .fl-prog-row { grid-template-columns: 80px 1fr !important; grid-template-rows: auto auto !important; }
              .fl-prog-row > :nth-child(2) { grid-column: 2; grid-row: 1; justify-self: start; }
              .fl-prog-row > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
              .fl-prog-row > :nth-child(4) { display: none; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ───────── Speakers (full grid) ─────────
function SpeakersPage({ t }) {
  const [filter, setFilter] = React.useState('all');
  const sectors = ['all', ...Array.from(new Set(SPEAKERS.map((s) => s.sector)))];
  const filtered = filter === 'all' ? SPEAKERS : SPEAKERS.filter((s) => s.sector === filter);
  return (
    <div className="fl-fade">
      <PageHero
        id="speakers-hero"
        index="03"
        kicker="The Roster"
        title={<>The people<br /><span style={{ color: 'var(--signal)' }}>in the room.</span></>}
        sub="Names are filed under wraps until 30 days out — a fairer game for the early-stage founders, the unknowns and the students. What you see below is who they are, what they run, and what they brought to show."
      />

      <PhotoBand
        id="speakers-photo"
        src={IMG.speaker}
        alt="On stage"
        height={480}
        eyebrow="// MAINSTAGE A · KEYNOTE 02 · 21 MAR"
        title={<>The unveils,<br />in front of a live crowd.</>}
      />

      <section id="speakers-filter" style={{ padding: 'var(--pad-block) 0', borderBottom: '1px solid var(--rule)', position: 'sticky', top: 72, background: 'var(--bg)', zIndex: 10 }}>
        <div className="fl-shell" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          <span className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--muted)', marginRight: 16,
          }}>Filter by sector</span>
          {sectors.map((s) => (
            <button key={s} onClick={() => setFilter(s)} style={{
              padding: '8px 14px',
              border: '1px solid ' + (filter === s ? 'var(--ink)' : 'var(--rule)'),
              background: filter === s ? 'var(--ink)' : 'transparent',
              color: filter === s ? 'var(--paper)' : 'var(--ink)',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em',
              textTransform: 'uppercase',
            }}>{s}</button>
          ))}
          <span className="fl-mono" style={{
            marginLeft: 'auto', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--muted)',
          }}>{filtered.length} / {SPEAKERS.length} speakers</span>
        </div>
      </section>

      <section id="speakers-grid" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
          }} className="fl-sp-grid-full">
            {filtered.map((s) => <SpeakerCard key={s.id} s={s} variant={t.speakerStyle} />)}
          </div>
          <div style={{
            marginTop: 64, padding: 32, background: 'var(--foot-bg)', color: 'var(--foot-fg)',
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center',
          }} className="fl-sp-foot">
            <div>
              <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 8 }}>
                Are you a speaker?
              </div>
              <div className="fl-display" style={{ fontSize: 'clamp(24px, 3vw, 40px)', lineHeight: 1.05, fontWeight: 600, letterSpacing: '-0.02em' }}>
                Submit a talk. We read everything.
              </div>
            </div>
            <a href="#/contact" className="fl-btn signal">Submit a Talk →</a>
          </div>
          <style>{`
            @media (max-width: 1100px) { .fl-sp-grid-full { grid-template-columns: 1fr 1fr 1fr !important; } }
            @media (max-width: 800px) { .fl-sp-grid-full { grid-template-columns: 1fr 1fr !important; } .fl-sp-foot { grid-template-columns: 1fr !important; } }
            @media (max-width: 500px) { .fl-sp-grid-full { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ───────── Riyadh page ─────────
function Riyadh() {
  return (
    <div className="fl-fade">
      <PageHero
        id="riyadh-hero"
        index="04"
        kicker="Why Riyadh"
        title={<>The fastest-growing<br /><span style={{ color: 'var(--signal)' }}>science capital</span> on the planet.</>}
        sub="Riyadh is at the center of the largest single deployment of capital into AI, biotech and advanced research the modern era has seen. We chose it because it's where the work is happening — and because it sits exactly between the room and the rest of the world."
      />

      <section id="riyadh-map" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <div style={{ background: 'var(--foot-bg)', color: 'var(--foot-fg)', minHeight: 640, overflow: 'hidden', position: 'relative' }}>
            <Photo src={IMG.riyadh} alt="Riyadh skyline" height="100%" style={{ position: 'absolute', inset: 0 }} />
            <div style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
              <RiyadhMap />
            </div>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.6))',
              pointerEvents: 'none',
            }} />
          </div>
        </div>
      </section>

      <section id="riyadh-reach" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="01"
            eyebrow="Reach"
            title="A 6-hour radius covers half the planet."
          />
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
            borderTop: '1px solid var(--ink)',
          }} className="fl-riy-grid">
            {[
              ['SOVEREIGN CAPITAL', '$500B+', 'committed to AI, biotech, advanced research and infrastructure under Vision 2030.'],
              ['ACADEMIC DENSITY', '28', 'PhD-granting institutions within 90 minutes of the venue. KAUST, KFUPM, KSU, KAIMRC and counting.'],
              ['DIAGNOSTIC INFRASTRUCTURE', '210+', 'specialised research hospitals and clinical-trial sites — among the highest densities in Asia.'],
              ['VISAS', '90 DAYS', 'on-arrival researcher visa for the duration of the summit. No sponsor required.'],
              ['CONNECTIVITY', 'GMT+3', 'between Tokyo and Lagos. 6 hours from Mumbai, 7 from SFO, 4 from London.'],
              ['SAFETY', '#3', 'globally on the GPI 2025 personal-security index. Open until 4am.'],
            ].map(([tag, n, l], i) => (
              <div key={i} style={{
                padding: 32, borderRight: (i + 1) % 3 === 0 ? 'none' : '1px solid var(--rule)',
                borderBottom: i < 3 ? '1px solid var(--rule)' : 'none',
                minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              }}>
                <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--signal)' }}>{tag}</div>
                <div>
                  <div className="fl-display" style={{
                    fontSize: 'clamp(40px, 4.5vw, 64px)', lineHeight: 0.9,
                    letterSpacing: '-0.04em', fontWeight: 600,
                  }}>{n}</div>
                  <div style={{ marginTop: 12, fontSize: 15, lineHeight: 1.45, color: 'var(--muted)', textWrap: 'pretty' }}>{l}</div>
                </div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 900px) {
              .fl-riy-grid { grid-template-columns: 1fr 1fr !important; }
              .fl-riy-grid > div { border-right: 1px solid var(--rule) !important; }
              .fl-riy-grid > div:nth-child(even) { border-right: none !important; }
            }
            @media (max-width: 560px) { .fl-riy-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Venue */}
      <section id="riyadh-venue" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="02"
            eyebrow="Venue · King Abdullah Financial District"
            title="One building. Four halls. Open courtyard."
            lede="A purpose-built financial-district campus, 22 minutes from King Khalid International. Mainstage and four pavilion halls under one roof, with an outdoor courtyard for receptions and the public-day demonstrations."
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="fl-venue-grid">
            <Photo src={IMG.riyadhSky} alt="KAFD exterior" ratio="4/3" caption="◇ KAFD · EXTERIOR" />
            <Photo src={IMG.crowd} alt="Mainstage A, 4000 seats" ratio="4/3" caption="◇ MAINSTAGE A · 4,000 SEATS" />
            <Photo src={IMG.expo} alt="Pavilion floor" ratio="4/3" caption="◇ PAVILION · 40,000 M²" />
            <Photo src={IMG.heroPortrait} alt="Press room / day-1 prep" ratio="4/3" caption="◇ PRESS ROOM · DAY 01" />
          </div>
          <style>{`
            @media (max-width: 800px) { .fl-venue-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ───────── Partner ─────────
function Partner() {
  const tiers = [
    {
      tag: 'PAVILION',
      name: 'Anchor a Pavilion',
      price: 'On request',
      sub: 'For platforms that want to own a hall.',
      bullets: [
        'Naming rights on one of the four pillars (Auto · AI · DeSci · AR)',
        '200m² hero footprint at hall entrance',
        '4 keynote-stage slots over four days',
        'Co-branded press accreditation',
        'Sovereign partner desk on Day 4',
      ],
    },
    {
      tag: 'EXHIBIT',
      name: 'Run a Stall',
      price: 'From $14,000',
      sub: 'For companies with running platforms.',
      bullets: [
        '36m² or 72m² standard stall, customisable',
        '8 staff passes · unlimited public day',
        'Listing in printed and digital programme',
        'Two demo slots on track-stages',
        '1:1 desk on Founders & Capital day (optional add-on)',
      ],
      featured: true,
    },
    {
      tag: 'TRACK',
      name: 'Sponsor a Track',
      price: 'On request',
      sub: 'For funds, sovereigns, and platforms scaling up.',
      bullets: [
        'Naming on one of the six format tracks',
        'Curate two panels and one keynote',
        'Branded networking room for the duration',
        'Hackathon prize co-sponsorship optional',
        'Co-host the closing dinner',
      ],
    },
  ];
  return (
    <div className="fl-fade">
      <PageHero
        id="partner-hero"
        index="05"
        kicker="Partner with FLS"
        title={<>Your tools deserve<br /><span style={{ color: 'var(--signal)' }}>a loud speaker.</span></>}
        sub="The summit floor is where 7,500 of the world's most discerning research buyers, founders, funders and operators will walk past your stall. We're not selling visibility — we're selling proximity to the people who decide what gets bought next."
      />

      <PhotoBand
        id="partner-photo"
        src={IMG.expo}
        alt="Expo floor"
        height={520}
        eyebrow="// 300 EXHIBITORS · 5 HALLS · 4 DAYS"
        title={<>Where running platforms<br />meet the people who buy them.</>}
      />

      <section id="partner-tiers" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          }} className="fl-tiers">
            {tiers.map((t) => (
              <article key={t.tag} style={{
                background: t.featured ? 'var(--foot-bg)' : 'var(--paper)',
                color: t.featured ? 'var(--foot-fg)' : 'var(--ink)',
                padding: 32, minHeight: 600, display: 'flex', flexDirection: 'column',
                border: '1px solid var(--rule)',
              }}>
                <div className="fl-mono" style={{
                  fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: t.featured ? 'var(--signal)' : 'var(--muted)', marginBottom: 18,
                }}>◆ {t.tag}</div>
                <h3 className="fl-display" style={{
                  margin: 0, fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 600,
                  letterSpacing: '-0.02em', lineHeight: 1.05,
                }}>{t.name}</h3>
                <div style={{ marginTop: 8, fontSize: 14, opacity: 0.7 }}>{t.sub}</div>
                <div className="fl-display" style={{
                  marginTop: 28, fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 0.9,
                  color: 'var(--signal)',
                }}>{t.price}</div>
                <ul style={{
                  listStyle: 'none', padding: 0, margin: '32px 0 0',
                  display: 'flex', flexDirection: 'column', gap: 12, flex: 1,
                  fontSize: 14, lineHeight: 1.4,
                }}>
                  {t.bullets.map((b, i) => (
                    <li key={i} style={{
                      display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10, alignItems: 'baseline',
                      paddingBottom: 12,
                      // Theme-aware separator: on the featured (always-dark) panel,
                      // 15% of the always-light foot-fg gives a readable hairline.
                      // On the regular tier, fall through to the page-level --rule.
                      borderBottom: '1px solid ' + (t.featured ? 'rgba(244,241,255,0.15)' : 'var(--rule)'),
                    }}>
                      <span style={{ color: 'var(--signal)' }}>◆</span>
                      <span style={{ textWrap: 'pretty' }}>{b}</span>
                    </li>
                  ))}
                </ul>
                <a href="#/contact" className="fl-btn" style={{
                  marginTop: 28,
                  background: 'var(--signal)',
                  borderColor: 'var(--signal)',
                  color: 'var(--signal-fg)',
                }}>Talk to us →</a>
              </article>
            ))}
          </div>
          <style>{`
            @media (max-width: 900px) { .fl-tiers { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Who exhibits */}
      <section id="partner-stack" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="01"
            eyebrow="Who exhibits at FLS"
            title="The whole stack, on one floor."
            lede="Edition 01 reserves space across the entire research supply chain — from compute and reagents at the bottom, to applied platforms and clinics at the top."
          />
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
            borderTop: '1px solid var(--ink)',
          }} className="fl-who-grid">
            {[
              ['LAYER 01', 'Compute & Foundation Models', 'AI labs, GPU/inference providers, biology foundation models'],
              ['LAYER 02', 'Lab Automation', 'Liquid handlers, cloud labs, robotic platforms, autonomous experimentation'],
              ['LAYER 03', 'Wet-bench Tools', 'Sequencing, synthesis, imaging, microscopy, single-cell'],
              ['LAYER 04', 'Therapeutics & Diagnostics', 'AI-native drug discovery, AI diagnostics, longevity platforms'],
              ['LAYER 05', 'Clinic & Care', 'AI doctors, robotic surgery, telemedicine, decentralized trials'],
              ['LAYER 06', 'Capital, Talent, Policy', 'Funds, sovereigns, training cohorts, regulatory bodies'],
            ].map(([l, n, d], i) => (
              <div key={i} style={{
                padding: 28, borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
                borderBottom: '1px solid var(--rule)',
              }}>
                <div className="fl-mono" style={{
                  fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--muted)', marginBottom: 12,
                }}>{l}</div>
                <h4 style={{
                  margin: 0, fontFamily: 'var(--font-display)', fontSize: 26,
                  fontWeight: 600, letterSpacing: '-0.02em',
                }}>{n}</h4>
                <p style={{ marginTop: 8, fontSize: 14, color: 'var(--muted)', textWrap: 'pretty' }}>{d}</p>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 700px) {
              .fl-who-grid { grid-template-columns: 1fr !important; }
              .fl-who-grid > div { border-right: 0 !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Inquiry form */}
      <section id="partner-inquiry" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <InquiryForm />
        </div>
      </section>
    </div>
  );
}

function InquiryForm() {
  const [data, setData] = React.useState({ name: '', org: '', email: '', tier: 'EXHIBIT', note: '' });
  const [sent, setSent] = React.useState(false);
  const onChange = (k) => (e) => setData({ ...data, [k]: e.target.value });
  return (
    <div style={{
      border: '1px solid var(--ink)', padding: 'clamp(28px, 4vw, 56px)',
      display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56,
    }} className="fl-inquiry">
      <div>
        <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--signal)', marginBottom: 14 }}>
          ◆ Partner inquiry
        </div>
        <h3 className="fl-display" style={{
          margin: 0, fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 0.95,
        }}>Tell us<br />what you'd ship.</h3>
        <p style={{ marginTop: 18, fontSize: 16, color: 'var(--muted)', lineHeight: 1.5, textWrap: 'pretty' }}>
          A short note is plenty. We reply within 48 hours, in person, with a calendar
          invite. No deck required — yet.
        </p>
      </div>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
      }}>
        {sent ? (
          <div style={{ gridColumn: '1 / -1', padding: '40px 0' }}>
            <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--signal)', marginBottom: 14 }}>◆ Received</div>
            <div className="fl-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>Thanks, {data.name || 'partner'}.<br />We'll be in touch within 48 hours.</div>
          </div>
        ) : (
          <>
            <Input label="Your name" value={data.name} onChange={onChange('name')} required />
            <Input label="Organisation" value={data.org} onChange={onChange('org')} required />
            <Input label="Email" type="email" value={data.email} onChange={onChange('email')} required />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <label className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Interest</label>
              <select value={data.tier} onChange={onChange('tier')} style={{
                height: 48, border: '1px solid var(--rule)', background: 'transparent',
                fontFamily: 'var(--font-mono)', fontSize: 13, padding: '0 12px', letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ink)',
              }}>
                <option>EXHIBIT</option><option>PAVILION</option><option>TRACK</option><option>HACKATHON</option><option>OTHER</option>
              </select>
            </div>
            <div style={{ gridColumn: '1 / -1', display: 'flex', flexDirection: 'column' }}>
              <label className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Brief note</label>
              <textarea value={data.note} onChange={onChange('note')} rows={4} placeholder="One paragraph: who you are, what you'd show on the floor."
                        style={{
                          border: '1px solid var(--rule)', background: 'transparent', padding: 12,
                          fontFamily: 'var(--font-sans)', fontSize: 15, resize: 'vertical', color: 'var(--ink)',
                        }} />
            </div>
            <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'flex-end' }}>
              <button type="submit" className="fl-btn signal">Send inquiry →</button>
            </div>
          </>
        )}
      </form>
      <style>{`
        @media (max-width: 800px) { .fl-inquiry { grid-template-columns: 1fr !important; gap: 28px !important; } }
      `}</style>
    </div>
  );
}

function Input({ label, ...rest }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <label className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>{label}</label>
      <input {...rest} style={{
        height: 48, border: '1px solid var(--rule)', background: 'transparent',
        fontFamily: 'var(--font-sans)', fontSize: 15, padding: '0 12px', color: 'var(--ink)',
      }} />
    </div>
  );
}

// ───────── Resources ─────────
function Resources() {
  const items = [
    { tag: 'MEDIA KIT', name: 'Press logos & brand pack', size: '12 MB · ZIP', kind: 'press' },
    { tag: 'PROGRAMME PDF', name: 'Working programme · draft v0.3', size: '2.4 MB · PDF', kind: 'doc' },
    { tag: 'PROSPECTUS', name: 'Exhibitor prospectus 2027', size: '5.1 MB · PDF', kind: 'doc' },
    { tag: 'FLOOR PLAN', name: 'Pavilion plan · draft', size: '1.8 MB · PDF', kind: 'plan' },
    { tag: 'WHITEPAPER', name: 'State of the Discovery Stack — Q1 2027', size: '8.6 MB · PDF', kind: 'doc' },
    { tag: 'PHOTOS', name: 'Past edition / venue imagery', size: '210 MB · ZIP', kind: 'press' },
  ];
  return (
    <div className="fl-fade">
      <PageHero
        id="resources-hero"
        index="06"
        kicker="Resources"
        title={<>Everything press,<br />partners and analysts<br /><span style={{ color: 'var(--signal)' }}>need.</span></>}
        sub="Press kits, programme PDFs, prospectuses and the working whitepaper for Edition 01. Everything is freely downloadable — no email-wall."
      />

      <section id="resources-downloads" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16,
          }} className="fl-res-grid">
            {items.map((it) => (
              <article key={it.tag} className="fl-lift" style={{
                border: '1px solid var(--rule)', padding: 24, minHeight: 220,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                background: 'var(--paper)',
              }}>
                <div>
                  <div className="fl-mono" style={{
                    fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: 'var(--signal)', marginBottom: 14,
                  }}>◆ {it.tag}</div>
                  <h4 style={{
                    margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
                    fontSize: 'clamp(22px, 2.2vw, 26px)', letterSpacing: '-0.02em', lineHeight: 1.1,
                    textWrap: 'pretty',
                  }}>{it.name}</h4>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  marginTop: 18, fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)',
                }}>
                  <span>{it.size}</span>
                  <span style={{
                    width: 32, height: 32, border: '1px solid var(--ink)', borderRadius: 999,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, color: 'var(--ink)',
                  }}>↓</span>
                </div>
              </article>
            ))}
          </div>
          <style>{`
            @media (max-width: 900px) { .fl-res-grid { grid-template-columns: 1fr 1fr !important; } }
            @media (max-width: 600px) { .fl-res-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      <section id="resources-press" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <SectionHead
            index="01"
            eyebrow="Press contacts"
            title="Reach us directly."
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, borderTop: '1px solid var(--ink)' }} className="fl-press-grid">
            {[
              ['PRESS · Global', 'press@futurelabs.summit', 'S.B. · Cairo'],
              ['EXHIBITORS', 'partners@futurelabs.summit', 'M.K. · London'],
              ['PUBLIC DAY', 'public@futurelabs.summit', 'D.R. · Riyadh'],
            ].map(([t, e, n], i) => (
              <div key={i} style={{
                padding: 24, borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                borderBottom: '1px solid var(--rule)',
              }}>
                <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 10 }}>{t}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.015em' }}>{e}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', marginTop: 6, letterSpacing: '0.08em' }}>{n}</div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 800px) { .fl-press-grid { grid-template-columns: 1fr !important; } .fl-press-grid > div { border-right: 0 !important; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ───────── FAQ ─────────
function Faq() {
  const groups = [
    {
      title: 'Attending',
      qs: [
        ['Is FLS really open to the public?', 'Yes. Day 4 (Mon 22 Mar) is fully open to the public — no badge, no fee, family-friendly. Days 1–3 require a pass, but students with valid ID get in free.'],
        ['What does a pass include?', 'Full access to all six tracks: keynote stage, pavilions, hackathon spectator zone, cohort waitlist, and Founders & Capital day (subject to verification). Day 4 is included with any pass.'],
        ['Is there a press pass?', 'Yes. Accreditation opens on 1 January 2027. We accept staff press, freelance and student-press applications.'],
        ['Can I bring my kids?', 'Yes — Day 4 is built for it. We run a parallel kids programme with hands-on demos (chromatography, microscopy, robot pipettes).'],
      ],
    },
    {
      title: 'Programme',
      qs: [
        ['Why anonymise the speakers?', 'To stop the conference from collapsing into a celebrity reel. You should come because of what gets shown, not whose face is on the poster. Names file 30 days out.'],
        ['How do I submit a talk?', 'Use the form on the Speakers page. We read everything; we reply to everyone within 30 days. Bias: live demos and unfunded work get priority.'],
        ['Can I just watch the hackathon?', 'Yes. The build floor is open to all pass-holders on Day 3 with a viewing balcony. Final pitches happen on the mainstage that evening.'],
        ['What about the cohorts?', 'Cohorts are limited and selective. Apply by 1 February 2027. Selection is rolling. Cohort fee is included in your pass.'],
      ],
    },
    {
      title: 'Partner & Exhibit',
      qs: [
        ['What counts as a "running platform"?', 'Anything that can demonstrate end-to-end behaviour on the floor — a robot pipetting, a model generating, a clinic taking a fake intake. Not slides. Not a pitch deck.'],
        ['Are there exclusivity tiers?', 'Pavilion-anchor partners get pillar exclusivity. Standard exhibitors do not. We will tell you up front if a competitor has anchored your pillar.'],
        ['Can sovereigns sponsor a track?', 'Yes. Track sponsorship is the most popular sovereign and corporate-lab format. We will design the programme with you.'],
      ],
    },
    {
      title: 'Travel & Visas',
      qs: [
        ['Do I need a visa?', 'Most attendees qualify for an on-arrival 90-day visa for the duration of the summit. We provide a pre-cleared letter for sticky cases — request via your pass confirmation.'],
        ['Where should I stay?', 'KAFD has six partner hotels within a five-minute walk; we publish a rate-locked block in January 2027. The summit shuttle runs every ten minutes from designated hotels.'],
        ['Is it safe?', 'Yes. Riyadh consistently ranks in the global top ten for personal safety. The venue and shuttle network is staffed and open until 4am.'],
      ],
    },
  ];
  return (
    <div className="fl-fade">
      <PageHero
        id="faq-hero"
        index="07"
        kicker="FAQ"
        title={<>Questions, answered.<br /><span style={{ color: 'var(--signal)' }}>Without the dance.</span></>}
        sub="Below is the working FAQ. If your question isn't here, write to us — we read everything."
      />

      <section id="faq-groups" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          {groups.map((g, gi) => (
            <div key={g.title} id={`faq-${g.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')}`} style={{ marginBottom: 56 }}>
              <h3 className="fl-display" style={{
                fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 600,
                letterSpacing: '-0.03em', margin: '0 0 18px', borderBottom: '1px solid var(--ink)', paddingBottom: 18,
              }}>
                <span className="fl-mono" style={{ fontSize: 12, color: 'var(--muted)', marginRight: 16, letterSpacing: '0.18em' }}>§ 0{gi + 1}</span>
                {g.title}
              </h3>
              <div>
                {g.qs.map(([q, a], i) => <FaqRow key={i} q={q} a={a} idx={i} />)}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// ───────── Contact ─────────
function Contact() {
  return (
    <div className="fl-fade">
      <PageHero
        id="contact-hero"
        index="08"
        kicker="Contact"
        title={<>Send a note.<br /><span style={{ color: 'var(--signal)' }}>We read everything.</span></>}
        sub="No bots, no ticket queue. Every email lands in a small inbox monitored by the convening team. Average reply time: 36 hours."
      />

      <section id="contact-detail" style={{ padding: 'var(--pad-section) 0' }}>
        <div className="fl-shell">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80,
          }} className="fl-contact-grid">
            <div>
              <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 16, paddingTop: 14, borderTop: '1px solid var(--ink)' }}>Where to write</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
                {[
                  ['General', 'hello@futurelabs.summit'],
                  ['Press & Media', 'press@futurelabs.summit'],
                  ['Partners & Exhibitors', 'partners@futurelabs.summit'],
                  ['Speak / Submit', 'talks@futurelabs.summit'],
                  ['Hackathon', 'build@futurelabs.summit'],
                  ['Public Day', 'public@futurelabs.summit'],
                ].map(([t, e]) => (
                  <li key={t}>
                    <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>{t}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.015em' }}>{e}</div>
                  </li>
                ))}
              </ul>

              <div style={{ marginTop: 48 }}>
                <div className="fl-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>Convening office</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 18, lineHeight: 1.4 }}>
                  King Abdullah Financial District<br />
                  Tower B · Level 12<br />
                  Riyadh 13519 · KSA
                </div>
              </div>
            </div>
            <div>
              <InquiryForm />
            </div>
          </div>
          <style>{`
            @media (max-width: 900px) { .fl-contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { About, Program, SpeakersPage, Riyadh, Partner, Resources, Faq, Contact, PageHero, FaqRow, InquiryForm });