// pages/home.jsx — landing page composition

function Home({ t, setTweak }) {
  return (
    <div className="fl-fade">
      <Hero t={t} setTweak={setTweak} />
      <Marquee id="home-marquee" items={[
        'Lab Automation',
        'Research-Focused AI',
        'Decentralized Science',
        'Augmented Reality',
        'AI Doctors',
        'Robotic Surgeons',
        'Longevity',
        'DIY Research',
      ]} />
      <Pillars />
      <HumansBand />
      <Format />
      <FloorBand />
      <Stats />
      <SilverLining />
      <SpeakersPreview t={t} />
      <RiyadhBand />
      <PartnerCTA />
      <SchedulePreview />
      <FaqPreview />
    </div>
  );
}

// ───────── 1. Hero ─────────
function Hero({ t, setTweak }) {
  if (t.hero === 'visual') return <HeroVisual />;
  return <HeroText />;
}

function HeroText() {
  return (
    <section id="home-hero" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="fl-shell" style={{ padding: '64px var(--gutter) 80px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'baseline',
          marginBottom: 36,
        }} className="fl-hero-meta">
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)',
          }}>
            Edition 01 · Four Days · Open to the Public
          </div>
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)',
            display: 'flex', gap: 24,
          }}>
            <span>Riyadh / KSA</span>
            <span style={{ color: 'var(--signal)' }}>● Filing</span>
          </div>
        </div>
        <h1 className="fl-display" style={{
          margin: 0, fontSize: 'clamp(64px, 12.5vw, 200px)',
          lineHeight: 0.88, letterSpacing: '-0.04em',
        }}>
          The decade<br />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.18em' }}>
            ahead, <span style={{ color: 'var(--signal)' }}>on the floor.</span>
          </span>
        </h1>
        {/* Editorial image strip — three lab/people shots, low-key, each at its own parallax speed */}
        <div style={{
          marginTop: 48, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.2fr', gap: 16,
        }} className="fl-hero-strip">
          <Parallax speed={0.18} mode="flow"><Photo src={IMG.heroLab} alt="Gloved hands at a lab bench" ratio="4/3"
                 caption="◇ PIPETTING · WET-BENCH" /></Parallax>
          <Parallax speed={0.32} mode="flow" style={{ marginTop: 24 }}><Photo src={IMG.pillar1} alt="Robotic arm at work" ratio="4/3"
                 caption="◇ AUTOMATION · FLOOR-01" /></Parallax>
          <Parallax speed={0.10} mode="flow"><Photo src={IMG.scientist1} alt="Researcher at workstation" ratio="4/3"
                 caption="◇ RESEARCHER · DAY 02" /></Parallax>
        </div>
        <div style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32,
          paddingTop: 32, borderTop: '1px solid var(--rule)',
        }} className="fl-hero-row">
          <p style={{
            fontSize: 22, lineHeight: 1.3, letterSpacing: '-0.015em',
            margin: 0, maxWidth: 460, gridColumn: '1 / span 2', textWrap: 'pretty',
          }}>
            Future Labs Summit is the <em className="fl-serif">consumer unveil</em> of
            deep-tech science — four days where AI doctors, robotic surgeons,
            longevity therapeutics, decentralized labs and the rest of the discovery stack
            <span style={{ color: 'var(--signal)' }}> step out of the building </span>
            and onto a public floor.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <a href="#/contact" className="fl-btn signal">Reserve a Pass →</a>
            <a href="#/partner" className="fl-btn ghost">Exhibit at Edition 01</a>
            <div className="fl-mono" style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--muted)', marginTop: 8,
            }}>
              Pre-sale closes 14 Nov 2026
            </div>
          </div>
        </div>
        {/* Big date label, bottom-right */}
        <div style={{
          marginTop: 80, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 24,
        }} className="fl-hero-dates">
          {[
            { d: '19', m: 'MAR', l: 'Opening · Keynote 01' },
            { d: '20', m: 'MAR', l: 'Pavilions · Pillars Live' },
            { d: '21', m: 'MAR', l: 'Hackathon · Founders' },
            { d: '22', m: 'MAR', l: 'Public Showcase · Closing' },
          ].map((x, i) => (
            <div key={i} style={{
              borderTop: '1px solid var(--ink)',
              paddingTop: 14,
            }}>
              <div className="fl-display" style={{
                fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.04em', fontWeight: 600,
              }}>
                {x.d}<span style={{ color: 'var(--signal)', fontSize: 22, marginLeft: 6 }}>{x.m}</span>
              </div>
              <div className="fl-mono" style={{
                marginTop: 10, fontSize: 11, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'var(--muted)',
              }}>
                {x.l}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .fl-hero-dates { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 760px) {
          .fl-hero-row { grid-template-columns: 1fr !important; }
          .fl-hero-meta { grid-template-columns: 1fr !important; }
          .fl-hero-strip { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function HeroVisual() {
  return (
    <section id="home-hero" style={{ position: 'relative', overflow: 'hidden', background: 'var(--foot-bg)', color: 'var(--foot-fg)' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <Photo src={IMG.heroLab} alt="Lab" height="100%" style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(12,12,12,0.4) 0%, rgba(12,12,12,0.85) 100%)',
        }} />
      </div>
      <div className="fl-shell" style={{
        position: 'relative', padding: '120px var(--gutter)',
        minHeight: '78vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em',
          textTransform: 'uppercase', opacity: 0.7,
        }}>
          <span>// Future Labs Summit · Edition 01</span>
          <span>// Filing 0001 · Public Manifest</span>
        </div>
        <h1 className="fl-display" style={{
          margin: 0, fontSize: 'clamp(72px, 13vw, 220px)',
          lineHeight: 0.86, letterSpacing: '-0.04em',
        }}>
          See it before<br />
          <span style={{ color: 'var(--signal)' }}>it ships.</span>
        </h1>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end',
        }} className="fl-herov-row">
          <p style={{ fontSize: 20, lineHeight: 1.35, maxWidth: 560, margin: 0, textWrap: 'pretty' }}>
            The technologies that will define the next decade of human health —
            <span style={{ color: 'var(--signal)' }}> AI doctors, robotic surgeons, longevity, DeSci </span>
            — assembled under one roof. Open to the public.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <a href="#/contact" className="fl-btn signal">Reserve a Pass →</a>
            <a href="#/partner" className="fl-btn" style={{ background: 'transparent', color: 'var(--foot-fg)', borderColor: 'var(--foot-fg)' }}>Exhibit</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .fl-herov-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 2. Pillars ─────────
function Pillars() {
  const items = [
    {
      n: '01',
      tag: 'Lab Automation',
      title: 'The lab runs itself.',
      body: 'Liquid-handling robots, cloud labs, autonomous experimentation. From bench to fleet — the workforce of science is being rebuilt.',
      stat: '24/7',
      statLabel: 'Always-on labs',
      img: IMG.pillar1,
    },
    {
      n: '02',
      tag: 'Research-Focused AI',
      title: 'Models that discover.',
      body: 'Foundation models for biology, agentic research systems, ML for design-build-test-learn. The Copilot for science is no longer a hypothesis.',
      stat: '10⁹',
      statLabel: 'Compounds screened',
      img: IMG.pillar2,
    },
    {
      n: '03',
      tag: 'Decentralized Science',
      title: 'Funding without gatekeepers.',
      body: 'On-chain IP, citizen-led trials, distributed cohorts. Science is rewriting its own incentive layer in public.',
      stat: '$0',
      statLabel: 'Grants required',
      img: IMG.pillar3,
    },
    {
      n: '04',
      tag: 'Augmented Reality',
      title: 'See what the data sees.',
      body: 'Spatial overlays for surgeons. Microscopy for everyone. AR is the new screen for the bench — and the operating room.',
      stat: '1:1',
      statLabel: 'Reality, augmented',
      img: IMG.pillar4,
    },
  ];
  return (
    <section id="home-pillars" style={{ padding: 'var(--pad-section) 0' }}>
      <div className="fl-shell">
        <SectionHead
          index="01"
          eyebrow="Four Pillars · Edition 01"
          title="Where the next decade gets built."
          lede="We brought together the four forces redrawing how research gets done. Each pillar gets its own pavilion, its own stage, its own running demonstration."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '1px solid var(--ink)', borderLeft: '1px solid var(--rule)',
        }} className="fl-pillars">
          {items.map((p, i) => (
            <article key={p.n} className="fl-pillar-cell" style={{
              borderRight: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)',
              padding: 0, position: 'relative', minHeight: 580,
              display: 'flex', flexDirection: 'column',
              background: i === 1 ? 'var(--paper)' : 'transparent',
            }}>
              {/* photo top */}
              <div style={{ position: 'relative' }}>
                <Photo src={p.img} alt={p.tag} ratio="5/3" />
                <div style={{
                  position: 'absolute', top: 14, left: 14, right: 14,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: '#fff',
                  textShadow: '0 1px 4px rgba(0,0,0,0.6)',
                }}>
                  <span>§ {p.n}</span>
                  <span style={{ color: 'var(--signal)' }}>◆ {p.tag}</span>
                </div>
              </div>
              {/* body */}
              <div style={{ padding: 28, display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div className="fl-display" style={{
                  fontSize: 64, fontWeight: 600, letterSpacing: '-0.04em',
                  lineHeight: 0.9, marginBottom: 4,
                }}>
                  {p.stat}
                </div>
                <div className="fl-mono" style={{
                  fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--muted)', marginBottom: 24,
                }}>{p.statLabel}</div>
                <h3 style={{
                  margin: 0, fontFamily: 'var(--font-display)', fontSize: 26,
                  fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.05,
                  textWrap: 'balance',
                }}>{p.title}</h3>
                <p style={{
                  marginTop: 12, fontSize: 14.5, lineHeight: 1.45, color: 'var(--muted)',
                  textWrap: 'pretty',
                }}>{p.body}</p>
                <a href="#/program" style={{
                  marginTop: 'auto', paddingTop: 20, alignSelf: 'flex-start',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
                  textTransform: 'uppercase',
                  borderBottom: '1px solid var(--ink)',
                }}>Visit pavilion →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .fl-pillars { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          .fl-pillars { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 3. Format ─────────
function Format() {
  const tracks = [
    {
      tag: 'A · KEYNOTE STAGE',
      title: 'Four days. Twelve unveils.',
      body: 'The mainstage hosts the news. New models, new molecules, new platforms — announced live, in front of buyers and the press.',
      tags: ['Live', '4,000 seats', 'Press pool'],
    },
    {
      tag: 'B · PAVILION FLOOR',
      title: 'The labs are open.',
      body: 'Forty-thousand square meters of running demos: robots pipetting, machines diagnosing, surgeons operating on cadavers in VR. Walk in, touch everything.',
      tags: ['300+ exhibitors', 'Live demos', 'Open to public'],
    },
    {
      tag: 'C · HACKATHON',
      title: '72 hours, one prompt.',
      body: 'A handpicked field of 600 researchers, founders and engineers — building public-good tools on top of partner platforms. The winners pitch on the mainstage.',
      tags: ['600 builders', '$250K prizes', '72 hrs'],
    },
    {
      tag: 'D · COHORTS & TRAININGS',
      title: 'Leave with a new skill.',
      body: 'Hands-on cohorts taught by lab heads and platform leads — protein design, agentic workflows, biosafety, robotics calibration. Limited seats, paid in attention.',
      tags: ['18 cohorts', 'Cert. issued', 'Limited'],
    },
    {
      tag: 'E · FOUNDERS & CAPITAL',
      title: 'Where deep-tech meets the cheque.',
      body: 'An invite-only day for founders building in the four pillars. Curated 1:1s with funds, sovereign capital, corporate labs and pharma BD.',
      tags: ['Day 4', 'Invite-only', '200 founders'],
    },
    {
      tag: 'F · PUBLIC SHOWCASE',
      title: 'For everyone else.',
      body: 'The closing day is for the public. Schools, families, the curious. The same floor, the same demos — narrated, slower, no badges required.',
      tags: ['Day 4', 'Free entry', 'Family'],
    },
  ];
  return (
    <section id="home-format" style={{ padding: 'var(--pad-section) 0', background: 'var(--paper)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="fl-shell">
        <SectionHead
          index="02"
          eyebrow="The Format"
          title="Not a conference. A working floor."
          lede="Six parallel tracks running across four days. You build your own path — keynote in the morning, hackathon at night, a robot demo in between."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
          borderTop: '1px solid var(--ink)',
        }} className="fl-fmt-grid">
          {tracks.map((tr, i) => (
            <article key={tr.tag} style={{
              padding: 32, borderBottom: '1px solid var(--rule)',
              borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
              display: 'grid', gridTemplateColumns: '1fr', gap: 16,
              position: 'relative',
            }}>
              <div className="fl-mono" style={{
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--signal)',
              }}>{tr.tag}</div>
              <h3 style={{
                margin: 0, fontFamily: 'var(--font-display)',
                fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 600,
                letterSpacing: '-0.025em', lineHeight: 1.0, textWrap: 'balance',
              }}>{tr.title}</h3>
              <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.45, color: 'var(--muted)', maxWidth: 540, textWrap: 'pretty' }}>{tr.body}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 6 }}>
                {tr.tags.map((tag) => (
                  <span key={tag} style={{
                    padding: '5px 10px', border: '1px solid var(--rule)',
                    fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                  }}>{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .fl-fmt-grid { grid-template-columns: 1fr !important; }
          .fl-fmt-grid > article { border-right: 0 !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 4. Stats ─────────
function Stats() {
  const stats = [
    { n: '7,500+', l: 'Attendees expected' },
    { n: '300+', l: 'Exhibitors on the floor' },
    { n: '150+', l: 'Speakers, trainers, hosts' },
    { n: '2,000+', l: 'Early-career researchers' },
    { n: '600', l: 'Hackathon builders' },
    { n: '$250K', l: 'Prize pool' },
    { n: '40k m²', l: 'Open pavilion floor' },
    { n: '4 days', l: 'One of them public' },
  ];
  return (
    <section id="home-stats" style={{ padding: 'var(--pad-section) 0' }}>
      <div className="fl-shell">
        <SectionHead
          index="03"
          eyebrow="By the Numbers"
          title="A gathering at consumer-scale."
          lede="Designed to be the largest public-facing meeting of deep-tech ever held in the region — sized so vendors can show, builders can ship, and the public can walk in."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '1px solid var(--ink)',
        }} className="fl-stats-grid">
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: 28, borderRight: (i + 1) % 4 === 0 ? 'none' : '1px solid var(--rule)',
              borderBottom: i < 4 ? '1px solid var(--rule)' : 'none',
              minHeight: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div className="fl-mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--muted)',
              }}>↳ {String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="fl-display" style={{
                  fontSize: 'clamp(40px, 4.5vw, 64px)', lineHeight: 0.9,
                  letterSpacing: '-0.04em', fontWeight: 600,
                  color: i === 0 || i === 5 ? 'var(--signal)' : 'var(--ink)',
                }}>{s.n}</div>
                <div className="fl-mono" style={{
                  marginTop: 10, fontSize: 11.5, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: 'var(--muted)',
                }}>{s.l}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .fl-stats-grid { grid-template-columns: 1fr 1fr !important; }
          .fl-stats-grid > div { border-right: 1px solid var(--rule) !important; }
          .fl-stats-grid > div:nth-child(even) { border-right: none !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 5. Speakers preview ─────────
function SpeakersPreview({ t }) {
  const featured = SPEAKERS.slice(0, 8);
  return (
    <section id="home-speakers" style={{
      padding: 'var(--pad-section) 0',
      background: 'var(--paper)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      color: 'var(--ink)',
    }}>
      <div className="fl-shell">
        <div style={{
          display: 'grid', gridTemplateColumns: '120px 1fr 1.2fr',
          gap: 32, alignItems: 'start', marginBottom: 64,
        }} className="fl-sec-head-dark">
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--muted)', paddingTop: 14, borderTop: '1px solid var(--ink)',
          }}>§ 04</div>
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--muted)', paddingTop: 14, borderTop: '1px solid var(--rule)',
          }}>The Roster · Filing in progress</div>
          <div>
            <h2 className="fl-display" style={{
              fontSize: 'clamp(40px, 5.4vw, 84px)', margin: 0, paddingTop: 6,
            }}>
              The people in <span style={{ color: 'var(--signal)' }}>the room.</span>
            </h2>
            <p style={{
              marginTop: 24, fontSize: 18, lineHeight: 1.45,
              color: 'var(--muted)', maxWidth: 640, textWrap: 'pretty',
            }}>
              Founders, lab heads, capital, builders. Identities held under
              wraps until 30 days out — a fairer game for the unknowns and the
              students. Below is a preview of the kinds of people you'll meet.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }} className="fl-sp-grid">
          {featured.map((s) => (
            <SpeakerCard key={s.id} s={s} variant={t.speakerStyle} />
          ))}
        </div>

        <div style={{
          marginTop: 36, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
          flexWrap: 'wrap',
        }}>
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--muted)',
          }}>
            {SPEAKERS.length - 8} more speakers · filing daily
          </div>
          <a href="#/speakers" className="fl-btn signal">See the full roster →</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .fl-sec-head-dark { grid-template-columns: 1fr !important; gap: 12px !important; }
          .fl-sp-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 500px) {
          .fl-sp-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 6. Riyadh band ─────────
function RiyadhBand() {
  return (
    <section id="home-riyadh" style={{ padding: 'var(--pad-section) 0' }}>
      <div className="fl-shell">
        <SectionHead
          index="05"
          eyebrow="Why Riyadh"
          title="Where east, west and the desert meet."
          lede="The world's fastest-growing science capital. Backed by sovereign-scale capital, an open immigration regime for researchers, and a clear national mandate to host the discovery stack of the next decade."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'stretch',
        }} className="fl-ri-grid">
          <div style={{
            position: 'relative', minHeight: 520,
            background: 'var(--foot-bg)', color: 'var(--foot-fg)', overflow: 'hidden',
          }}>
            {/* Stylized "map" — coordinate grid */}
            <RiyadhMap />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              ['$500B+', 'Sovereign science & tech investment under deployment'],
              ['28 PhD-granting institutions', 'within a 90-minute drive of the venue'],
              ['90-day researcher visa', 'on-arrival for the duration of the summit'],
              ['One time-zone', 'between Tokyo and Lagos · seven from SFO'],
            ].map(([n, l], i) => (
              <div key={i} style={{
                padding: '24px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule)',
              }}>
                <div className="fl-display" style={{
                  fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.0,
                  letterSpacing: '-0.025em', fontWeight: 600,
                }}>{n}</div>
                <div style={{ marginTop: 8, fontSize: 15, color: 'var(--muted)', textWrap: 'pretty' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .fl-ri-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function RiyadhMap() {
  return (
    <svg viewBox="0 0 600 520" style={{ width: '100%', height: '100%', display: 'block' }} aria-hidden="true">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--foot-fg)" strokeOpacity="0.08" strokeWidth="0.5" />
        </pattern>
      </defs>
      <rect width="600" height="520" fill="var(--foot-bg)" />
      <rect width="600" height="520" fill="url(#grid)" />
      {/* concentric rings on Riyadh */}
      {[40, 90, 150, 220, 300].map((r, i) => (
        <circle key={i} cx="320" cy="240" r={r}
                fill="none" stroke="var(--foot-fg)" strokeOpacity={0.18 - i * 0.025} strokeWidth="0.6"
                strokeDasharray={i % 2 === 0 ? '0' : '2 4'} />
      ))}
      {/* radials */}
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i * 30 * Math.PI) / 180;
        const x = 320 + Math.cos(a) * 300;
        const y = 240 + Math.sin(a) * 300;
        return <line key={i} x1="320" y1="240" x2={x} y2={y}
                     stroke="var(--foot-fg)" strokeOpacity="0.08" strokeWidth="0.4" />;
      })}
      {/* satellite cities */}
      {[
        { x: 130, y: 160, label: 'CAIRO' },
        { x: 540, y: 120, label: 'TEHRAN' },
        { x: 520, y: 330, label: 'DUBAI' },
        { x: 95, y: 340, label: 'NAIROBI' },
        { x: 280, y: 80, label: 'ISTANBUL' },
        { x: 200, y: 440, label: 'JOHANNESBURG' },
      ].map((c) => (
        <g key={c.label}>
          <line x1="320" y1="240" x2={c.x} y2={c.y} stroke="var(--foot-fg)" strokeOpacity="0.15" strokeWidth="0.4" />
          <circle cx={c.x} cy={c.y} r="3" fill="var(--foot-fg)" opacity="0.7" />
          <text x={c.x + 8} y={c.y + 4} fontFamily="var(--font-mono)"
                fontSize="9" fill="var(--foot-fg)" opacity="0.55" letterSpacing="0.12em">{c.label}</text>
        </g>
      ))}
      {/* Riyadh pin */}
      <circle cx="320" cy="240" r="10" fill="var(--signal)" />
      <circle cx="320" cy="240" r="20" fill="none" stroke="var(--signal)" strokeOpacity="0.5" strokeWidth="0.6">
        <animate attributeName="r" values="14;36;14" dur="3s" repeatCount="indefinite" />
        <animate attributeName="stroke-opacity" values="0.5;0;0.5" dur="3s" repeatCount="indefinite" />
      </circle>
      <text x="340" y="244" fontFamily="var(--font-mono)" fontSize="11"
            fill="var(--foot-fg)" letterSpacing="0.14em" fontWeight="600">RIYADH · 24.7°N · 46.7°E</text>

      {/* corner annotations */}
      <text x="14" y="20" fontFamily="var(--font-mono)" fontSize="9"
            fill="var(--foot-fg)" opacity="0.5" letterSpacing="0.16em">REGIONAL REACH · 5,200 KM RADIUS</text>
      <text x="14" y="508" fontFamily="var(--font-mono)" fontSize="9"
            fill="var(--foot-fg)" opacity="0.5" letterSpacing="0.16em">3.1B PEOPLE WITHIN 6 FLIGHT-HOURS</text>
    </svg>
  );
}

// ───────── 7. Partner CTA ─────────
function PartnerCTA() {
  return (
    <section id="home-partner" style={{ padding: 'var(--pad-block) 0 var(--pad-section)' }}>
      <div className="fl-shell">
        <div className="fl-partner-cta" style={{
          position: 'relative', overflow: 'hidden',
          padding: 'clamp(40px, 6vw, 96px)',
          display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 48, alignItems: 'end',
          color: 'var(--ink)',
          background: 'var(--paper)',
          border: '1px solid var(--rule)',
          isolation: 'isolate',
        }}>
          {/* Atmospheric gradient halo \u2014 ties the CTA back to the silver-lining language. */}
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0, zIndex: -1,
            background:
              'radial-gradient(ellipse 80% 60% at 100% 0%, ' + 'rgba(221,211,255,0.18)' + ', transparent 55%),'
              + 'radial-gradient(ellipse 60% 50% at 0% 100%, ' + 'rgba(124,99,210,0.22)' + ', transparent 60%)',
          }} />
          {/* Hairline silver accent along the top edge */}
          <div aria-hidden="true" style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 1,
            background: 'linear-gradient(90deg, transparent, var(--signal), transparent)',
            opacity: 0.7,
          }} />
          <div>
            <div className="fl-mono" style={{
              fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: 'var(--signal)', marginBottom: 16,
            }}>// Partner with FLS · Edition 01</div>
            <h2 className="fl-display" style={{
              margin: 0, fontSize: 'clamp(44px, 7vw, 112px)',
              lineHeight: 0.88, letterSpacing: '-0.035em', textWrap: 'balance',
            }}>
              Your tools<br />deserve<br /><span style={{ color: 'var(--signal)' }}>a loud speaker.</span>
            </h2>
            <p style={{
              marginTop: 28, fontSize: 18, lineHeight: 1.4,
              maxWidth: 560, color: 'var(--muted)', textWrap: 'pretty',
            }}>
              FLS is where research infrastructure meets execution. Put your
              platform in front of the AI-native research teams, biotech founders,
              institutions and sovereign programs building the next decade of labs.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="#/partner" className="fl-btn signal">Partner Tiers →</a>
            <a href="#/partner" className="fl-btn ghost">Book a Stall →</a>
            <a href="#/partner" className="fl-btn ghost">Sponsor a Pavilion →</a>
          </div>
          <div className="fl-mono" style={{
            position: 'absolute', top: 24, right: 28,
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)',
          }}>
            ◆ Limited slots
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .fl-partner-cta { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 8. Schedule preview ─────────
function SchedulePreview() {
  const days = [
    { d: '19 MAR · FRI', tag: 'OPENING', name: 'Welcome / Keynote 01', sub: 'Pavilions open' },
    { d: '20 MAR · SAT', tag: 'PILLARS', name: 'Track A–D in parallel', sub: 'Lab Auto · AI · DeSci · AR' },
    { d: '21 MAR · SUN', tag: 'BUILD · CAPITAL', name: 'Hackathon + Founders & Capital', sub: 'Mainstage: Models that discover' },
    { d: '22 MAR · MON', tag: 'PUBLIC', name: 'Open Showcase', sub: 'Free entry · Closing notes' },
  ];
  return (
    <section id="home-schedule" style={{ padding: 'var(--pad-section) 0', background: 'var(--paper)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="fl-shell">
        <SectionHead
          index="06"
          eyebrow="Four-Day Programme · Preview"
          title="A week-long arc."
          lede="The full programme files in October. Below is the spine."
        />
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, borderTop: '1px solid var(--ink)' }}>
          {days.map((day, i) => (
            <li key={day.d} style={{
              borderBottom: '1px solid var(--rule)',
              display: 'grid', gridTemplateColumns: '60px 220px 1fr 1.5fr auto',
              gap: 32, alignItems: 'center', padding: '28px 0',
            }} className="fl-day-row">
              <div className="fl-mono" style={{
                fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: 'var(--muted)',
              }}>D{String(i + 1).padStart(2, '0')}</div>
              <div className="fl-display" style={{
                fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.0,
              }}>{day.d}</div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'var(--signal)',
              }}>{day.tag}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600,
                  fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.02em', lineHeight: 1.05,
                }}>{day.name}</div>
                <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 4 }}>{day.sub}</div>
              </div>
              <a href="#/program" className="fl-mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                borderBottom: '1px solid var(--ink)', paddingBottom: 2,
              }}>Details →</a>
            </li>
          ))}
        </ol>
        <div style={{ marginTop: 28, display: 'flex', justifyContent: 'flex-end' }}>
          <a href="#/program" className="fl-btn">See the full programme →</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .fl-day-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 20px 0 !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── 9. FAQ preview ─────────
function FaqPreview() {
  const faqs = [
    { q: 'Is FLS really open to the public?', a: 'Yes. Day 4 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.' },
    { q: 'How is this different from a regular biotech / AI conference?', a: 'Most science conferences are talks-first, demos-second. FLS inverts it: the demos are the main event. Forty-thousand square meters of running hardware, software and wet-bench setups — talks happen at the edges.' },
    { q: 'I am not in pharma — should I come?', a: 'If you build at the intersection of AI, hardware, or distributed systems, you should come. The discovery stack is rebuilding on top of foundation models, fleets of robots, and decentralized protocols — your work likely lives here too.' },
    { q: 'Can my company exhibit?', a: 'Yes. The pavilion floor has space for 300 exhibitors, with priority given to companies running real platforms (not just slides). Apply on the Partner page.' },
  ];
  return (
    <section id="home-faq" style={{ padding: 'var(--pad-section) 0' }}>
      <div className="fl-shell">
        <SectionHead
          index="07"
          eyebrow="Common questions"
          title="Things people keep asking."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr', gap: 0,
          borderTop: '1px solid var(--ink)',
        }}>
          {faqs.map((f, i) => <FaqRow key={i} q={f.q} a={f.a} idx={i} />)}
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'flex-end' }}>
          <a href="#/faq" className="fl-btn ghost">See all FAQ →</a>
        </div>
      </div>
    </section>
  );
}

function FaqRow({ q, a, idx, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--rule)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left', background: 'transparent', border: 0,
        padding: '24px 0', display: 'grid',
        gridTemplateColumns: '60px 1fr auto', gap: 24, alignItems: 'baseline',
      }}>
        <span className="fl-mono" style={{
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--muted)',
        }}>Q.{String(idx + 1).padStart(2, '0')}</span>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(20px, 2vw, 26px)', letterSpacing: '-0.015em', lineHeight: 1.2,
          textWrap: 'balance',
        }}>{q}</span>
        <span className="fl-mono" style={{
          width: 28, height: 28, border: '1px solid var(--ink)', borderRadius: 999,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .2s',
        }}>+</span>
      </button>
      {open && (
        <div style={{
          paddingBottom: 24, paddingLeft: 84, fontSize: 16, lineHeight: 1.5,
          color: 'var(--muted)', maxWidth: 760, textWrap: 'pretty',
        }} className="fl-fade">
          {a}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Home, Hero, Pillars, Format, Stats, SpeakersPreview, RiyadhBand, PartnerCTA, SchedulePreview, FaqPreview, FaqRow, HumansBand, FloorBand, SilverLining });

// ───────── SilverLining — gradient + glowing-text interlude ─────────
function SilverLining() {
  return (
    <section id="home-silver" className="fl-silver" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'calc(var(--pad-section) * 1.2) 0',
      color: '#F4F1FF',
      isolation: 'isolate',
      minHeight: '90vh',
    }}>
      {/* Three.js WebGL aurora — animated shader gradient + 600 floating particles.
          Falls back to a static CSS gradient if Three.js fails or reduced-motion is set. */}
      <AuroraCanvas />
      {/* The silver lining — a soft luminous arc along the top-right diagonal,
          on top of the WebGL layer to keep the editorial highlight readable. */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: -2, pointerEvents: 'none',
        background:
          'linear-gradient(115deg, transparent 55%, rgba(230,225,255,0.10) 64%, rgba(255,255,255,0.30) 66%, rgba(230,225,255,0.10) 68%, transparent 76%)',
        mixBlendMode: 'screen',
      }} />
      {/* Tiny stars — purely CSS, sits above the canvas for a parallax-like layer */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: -1, opacity: 0.4, pointerEvents: 'none',
        backgroundImage:
          'radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%),' +
          'radial-gradient(1px 1px at 78% 6%, #fff, transparent 60%),' +
          'radial-gradient(1px 1px at 34% 64%, #fff, transparent 60%),' +
          'radial-gradient(1px 1px at 62% 38%, #fff, transparent 60%),' +
          'radial-gradient(1px 1px at 88% 72%, #fff, transparent 60%),' +
          'radial-gradient(1px 1px at 8% 88%, #fff, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 50% 12%, #fff, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 22% 44%, #fff, transparent 60%)',
      }} />

      <div className="fl-shell" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'baseline',
          marginBottom: 36,
        }} className="fl-silver-meta">
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'rgba(244,241,255,0.7)',
          }}>
            <span style={{
              display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
              background: '#E6E0FF', boxShadow: '0 0 12px #E6E0FF', marginRight: 10,
              verticalAlign: 'middle',
            }} />
            § Interlude · The Silver Lining
          </div>
          <div className="fl-mono" style={{
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'rgba(244,241,255,0.55)',
          }}>// 04:42 LOCAL · RIYADH DAWN</div>
        </div>

        <h2 className="fl-display fl-silver-glow" style={{
          margin: 0,
          fontSize: 'clamp(48px, 9vw, 156px)',
          lineHeight: 0.88, letterSpacing: '-0.04em',
          textWrap: 'balance',
          fontWeight: 600,
        }}>
          The hard decade is also <span className="fl-silver-shine">the bright one.</span>
        </h2>

        <div style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32,
          paddingTop: 36, borderTop: '1px solid rgba(244,241,255,0.18)',
        }} className="fl-silver-row">
          <p style={{
            margin: 0, fontSize: 19, lineHeight: 1.45, color: 'rgba(244,241,255,0.82)',
            gridColumn: '1 / span 2', maxWidth: 720, textWrap: 'pretty',
          }}>
            For the first time in modern history, the tools to cure, automate, and
            understand are landing in the same five-year window — and they are
            arriving in public, in plain language, with names
            <em className="fl-serif" style={{ color: '#F4F1FF' }}> any teenager can pronounce</em>.
            The point of this gathering is to make sure nobody misses it.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
            <a href="#/contact" className="fl-btn"
               style={{
                 background: '#F4F1FF', borderColor: '#F4F1FF', color: '#0A0820',
                 boxShadow: '0 0 24px rgba(244,241,255,0.35)',
               }}>Stand inside it →</a>
            <a href="#/about" className="fl-btn"
               style={{ background: 'transparent', borderColor: 'rgba(244,241,255,0.5)', color: '#F4F1FF' }}>
              Read the thesis
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .fl-silver-glow {
          color: #F4F1FF;
          text-shadow:
            0 0 1px rgba(255,255,255,0.7),
            0 0 24px rgba(220,210,255,0.35),
            0 0 64px rgba(180,160,255,0.25);
        }
        .fl-silver-shine {
          background: linear-gradient(95deg,
            #BCB3FF 0%,
            #FFFFFF 30%,
            #FFFFFF 50%,
            #E0D9FF 70%,
            #BCB3FF 100%);
          background-size: 220% auto;
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent; color: transparent;
          animation: fl-silver-shine 6s linear infinite;
          text-shadow: 0 0 36px rgba(255,255,255,0.45);
        }
        @keyframes fl-silver-shine {
          0% { background-position: 0% 50%; }
          100% { background-position: 220% 50%; }
        }
        @media (max-width: 900px) {
          .fl-silver-meta { grid-template-columns: 1fr !important; }
          .fl-silver-row  { grid-template-columns: 1fr !important; }
        }
        @media (prefers-reduced-motion: reduce) {
          .fl-silver-shine { animation: none; }
        }
      `}</style>
    </section>
  );
}
function HumansBand() {
  return (
    <section id="home-humans" style={{ padding: 'var(--pad-section) 0', borderTop: '1px solid var(--rule)' }}>
      <div className="fl-shell">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'stretch',
        }} className="fl-humans-grid">
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <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)',
              }}>§ INTERLUDE · The Operators</div>
              <h2 className="fl-display" style={{
                margin: 0, fontSize: 'clamp(40px, 6vw, 96px)', fontWeight: 600,
                letterSpacing: '-0.035em', lineHeight: 0.9, textWrap: 'balance',
              }}>
                Behind every<br />demo is a person<br /><span style={{ color: 'var(--signal)' }}>who built it.</span>
              </h2>
              <p style={{
                marginTop: 28, fontSize: 18, lineHeight: 1.45, color: 'var(--muted)',
                maxWidth: 480, textWrap: 'pretty',
              }}>
                We invited the operators — the lab techs, the bench scientists,
                the postdocs running the experiments, the engineers wiring the
                robots — not just the founders and CEOs. The summit is for
                the people who actually do the work.
              </p>
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <span className="fl-mono" style={{
                padding: '8px 14px', border: '1px solid var(--rule)',
                fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>2,000+ ECRs</span>
              <span className="fl-mono" style={{
                padding: '8px 14px', border: '1px solid var(--rule)',
                fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>Free for students</span>
              <span className="fl-mono" style={{
                padding: '8px 14px', border: '1px solid var(--signal)', background: 'var(--signal)', color: 'var(--signal-fg)',
                fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>Apply for a grant pass</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Parallax speed={0.20} mode="flow"><Photo src={IMG.scientist1} alt="Researcher" ratio="3/4" caption="◇ ECR · DAY 3" /></Parallax>
            <Parallax speed={0.35} mode="flow" style={{ marginTop: 32 }}><Photo src={IMG.scientist3} alt="Lab technician" ratio="3/4" caption="◇ TECH · BENCH" /></Parallax>
            <Parallax speed={0.10} mode="flow" style={{ marginTop: -16 }}><Photo src={IMG.pipettes} alt="Hands working" ratio="3/4" caption="◇ WET-BENCH" /></Parallax>
            <Parallax speed={0.28} mode="flow" style={{ marginTop: 16 }}><Photo src={IMG.scientist4} alt="Petri dishes" ratio="3/4" caption="◇ ASSAY · LIVE" /></Parallax>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .fl-humans-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── FloorBand — big editorial photo strip after Format ─────────
function FloorBand() {
  return (
    <section id="home-floor" style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <PhotoBand
        video="video/pavilion-floor.mp4"
        src={IMG.expo}
        alt="Pavilion floor"
        height={620}
        eyebrow="// 40,000 m² · Pavilion floor"
        title={<>The doors open at 09:00.<br />The lights stay on until 22:00.</>}
        sub="Five halls, three hundred exhibitors, and one open public day. Walk in. Touch everything. Ask the operator how it works."
      />
    </section>
  );
}