// ——— HERO VARIANTS ———
const HeroActive = ({ setRoute }) => (
  <section style={{ padding: '72px 40px 0' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 56, alignItems: 'start' }}>
        <div>
          <Eyebrow>Est. MMXXVI · Kathmandu</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--serif)', fontWeight: 300,
            fontSize: 'clamp(56px,7.5vw,108px)', lineHeight: 0.96,
            letterSpacing: '-0.03em', margin: '20px 0 28px',
          }}>
            Building a <em style={{ fontStyle: 'italic' }}>responsible</em> A.I. <em style={{ fontStyle: 'italic' }}>nexus</em> — from Nepal.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 620, margin: '0 0 32px' }}>
            An independent nonprofit convening researchers, policymakers, and builders to steward AI in the public interest. We publish, convene, train, and run the Nepal AI Olympiad.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => setRoute('olympiad')}>Nepal AI Olympiad 2026 →</Button>
            <Button variant="ghost" onClick={() => setRoute('about')}>About the Foundation</Button>
          </div>
        </div>
        <div style={{ border: '1px solid var(--rule)', background: 'var(--paper)' }}>
          <div style={{ padding: '16px 22px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--paper-200)' }}>
            <Eyebrow>In progress</Eyebrow>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', animation: 'pulse 2s infinite' }}/> Live
            </span>
          </div>
          {[
            { k: 'Olympiad', t: 'Registration open for the 4th Nepal AI Olympiad', m: 'Closes 30 June · 9–12th graders', r: 'olympiad' },
            { k: 'Working paper', t: 'Who audits the auditors?', m: '48 pp · Published 18 April', r: 'reading' },
            { k: 'Convening', t: 'Public-sector evaluation standards', m: '22 May · Kathmandu · Open seats', r: 'convenings' },
            { k: 'Fellowship', t: 'Applications open: 2026/27 cohort', m: '6 fellows · Deadline 15 July', r: 'programs' },
          ].map((it, i) => (
            <div key={i} onClick={() => setRoute(it.r)} style={{
              padding: '18px 22px', borderBottom: '1px solid var(--rule)',
              cursor: 'pointer', display: 'grid', gridTemplateColumns: '100px 1fr auto', gap: 16, alignItems: 'baseline',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-200)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>{it.k}</div>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.3, color: 'var(--ink)' }}>{it.t}</div>
                <div style={{ marginTop: 4, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{it.m}</div>
              </div>
              <span style={{ color: 'var(--accent)', fontFamily: 'var(--mono)', fontSize: 14 }}>→</span>
            </div>
          ))}
          <style>{`@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }`}</style>
        </div>
      </div>
    </Container>
  </section>
);

const HeroImagery = ({ setRoute }) => (
  <section style={{ padding: '72px 40px 0' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Eyebrow>Est. MMXXVI · Kathmandu</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--serif)', fontWeight: 300,
            fontSize: 'clamp(56px,7.5vw,108px)', lineHeight: 0.96,
            letterSpacing: '-0.03em', margin: '20px 0 28px',
          }}>
            A responsible centre <em style={{ fontStyle: 'italic' }}>for a hopeful field.</em>
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 560, margin: '0 0 32px' }}>
            BRAIN Foundation is an independent nonprofit stewarding AI in the public interest — working with government, academia, and civil society across Nepal and abroad.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => setRoute('olympiad')}>Nepal AI Olympiad</Button>
            <Button variant="ghost" onClick={() => setRoute('research')}>Read our research</Button>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--ink)', border: '1px solid var(--rule)' }}>
            <img src="assets/hero.jpg" alt="Himalayan stupa above the Khumbu valley, Nepal"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'saturate(0.82) contrast(1.02)' }}/>
          </div>
          <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
            <span>Plate I · Khumbu · Nepal</span>
            <span style={{ opacity: 0.65 }}>Photo: Unsplash · CC</span>
          </div>
        </div>
      </div>
    </Container>
  </section>
);

const SLIDES = [
  {
    kind: '01 · Flagship',
    eyebrow: 'Nepal AI Olympiad',
    title: 'A national stage for the next generation.',
    italic: 'From Nepal to the world.',
    body: 'Since 2023, over 3,200 students have taken part. The top finishers go on to represent Nepal at the International AI Olympiad each year.',
    cta: 'About the Olympiad',
    route: 'olympiad',
    img: 'assets/slide-olympiad.jpg',
    alt: 'A student walking the stacks of a research library.',
    caption: 'The Olympiad · IV edition opens June 2026',
  },
  {
    kind: '02 · Research',
    eyebrow: 'Working papers',
    title: 'Governance, ethics, and evaluation —',
    italic: 'on the record.',
    body: 'We publish working papers and briefings for government and civil society. We hedge only when the evidence demands it.',
    cta: 'Read the research',
    route: 'research',
    img: 'assets/slide-research.jpg',
    alt: 'Overlapping pages of working papers.',
    caption: 'Library · Twelve papers in circulation',
  },
  {
    kind: '03 · Convenings',
    eyebrow: 'By invitation',
    title: 'Careful rooms, for specific questions.',
    italic: '',
    body: 'Two-day convenings on the questions the field has been avoiding — algorithmic auditing, meaningful consent, public-sector procurement.',
    cta: 'Upcoming convenings',
    route: 'convenings',
    img: 'assets/slide-convening.jpg',
    alt: 'A participant speaking during a seated convening.',
    caption: 'Spring convening · 22 May, Kathmandu',
  },
  {
    kind: '04 · Programs',
    eyebrow: 'Fellows & trainings',
    title: 'The people doing the work,',
    italic: 'supported for the long arc.',
    body: 'A nine-month fellowship for researchers and civil servants; summer internships; workshops for judiciary, health, and education practitioners.',
    cta: 'Explore programs',
    route: 'programs',
    img: 'assets/slide-programs.jpg',
    alt: 'A researcher drafting notes beside a coffee cup.',
    caption: 'Cohort · 2026/27 applications open',
  },
];

const HeroSlider = ({ setRoute }) => {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(x => (x + 1) % SLIDES.length), 6500);
    return () => clearInterval(t);
  }, [paused]);
  const s = SLIDES[i];
  return (
    <section style={{ padding: '40px 40px 0' }}>
      <Container>
        <div
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{ position: 'relative', border: '1px solid var(--rule)', overflow: 'hidden', background: 'var(--ink)' }}
        >
          {/* layered images — crossfade */}
          <div style={{ position: 'absolute', inset: 0 }}>
            {SLIDES.map((sl, idx) => (
              <img key={idx} src={sl.img} alt={sl.alt}
                style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', display: 'block',
                  opacity: idx === i ? 1 : 0,
                  transform: idx === i ? 'scale(1.02)' : 'scale(1.08)',
                  transition: 'opacity 900ms ease, transform 7000ms linear',
                  filter: 'saturate(0.7) contrast(1.02) brightness(0.78)',
                }}/>
            ))}
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(20,17,14,0.78) 0%, rgba(20,17,14,0.42) 55%, rgba(20,17,14,0.15) 100%)' }}/>
          </div>

          {/* content */}
          <div className="hero-slider-content" style={{ position: 'relative', minHeight: 560, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, padding: '56px 56px 40px', color: 'var(--paper)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                  {s.kind}
                </div>
                <div style={{ marginTop: 6, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7 }}>
                  {s.eyebrow}
                </div>
              </div>
              <div>
                <h1 style={{
                  fontFamily: 'var(--serif)', fontWeight: 300,
                  fontSize: 'clamp(44px,5.6vw,84px)', lineHeight: 1.0,
                  letterSpacing: '-0.025em', margin: '0 0 12px', maxWidth: 760,
                }}>
                  {s.title}{' '}
                  {s.italic && <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)', opacity: 0.95 }}>{s.italic}</em>}
                </h1>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.5, color: 'rgba(245,241,234,0.82)', maxWidth: 520, margin: '18px 0 28px' }}>
                  {s.body}
                </p>
                <div style={{ display: 'flex', gap: 12 }}>
                  <button onClick={() => setRoute(s.route)} style={{
                    padding: '14px 24px', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
                    textTransform: 'uppercase', background: 'var(--accent)', color: 'var(--paper)', border: 'none', cursor: 'pointer',
                  }}>{s.cta} →</button>
                  <button onClick={() => setRoute('about')} style={{
                    padding: '14px 24px', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
                    textTransform: 'uppercase', background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(245,241,234,0.4)', cursor: 'pointer',
                  }}>About the Foundation</button>
                </div>
              </div>
            </div>
            <div/>
          </div>

          {/* caption */}
          <div style={{
            position: 'absolute', top: 22, right: 28, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: 'rgba(245,241,234,0.72)',
          }}>{s.caption}</div>

          {/* progress + controls rail */}
          <div style={{
            position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', borderTop: '1px solid rgba(245,241,234,0.2)',
            background: 'rgba(20,17,14,0.78)', color: 'var(--paper)',
          }}>
            {SLIDES.map((sl, idx) => (
              <button key={idx} onClick={() => setI(idx)} style={{
                textAlign: 'left', padding: '16px 22px', background: idx === i ? 'rgba(245,241,234,0.06)' : 'transparent',
                border: 'none', borderRight: idx < SLIDES.length - 1 ? '1px solid rgba(245,241,234,0.14)' : 'none',
                cursor: 'pointer', color: 'inherit', position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: idx === i ? 'var(--accent)' : 'rgba(245,241,234,0.55)' }}>
                  {String(idx + 1).padStart(2, '0')} · {sl.eyebrow}
                </div>
                <div style={{ marginTop: 4, fontFamily: 'var(--serif)', fontSize: 15, opacity: idx === i ? 1 : 0.6, lineHeight: 1.25 }}>
                  {sl.title.replace(/[,.—]$/, '')}
                </div>
                {idx === i && !paused && (
                  <div style={{
                    position: 'absolute', left: 0, bottom: 0, height: 2, background: 'var(--accent)',
                    animation: 'sliderFill 6500ms linear forwards',
                  }}/>
                )}
              </button>
            ))}
            <div style={{ display: 'flex', alignItems: 'center', gap: 2, padding: '0 10px', borderLeft: '1px solid rgba(245,241,234,0.14)' }}>
              <button onClick={() => setI((i - 1 + SLIDES.length) % SLIDES.length)} aria-label="Previous"
                style={{ width: 44, height: 44, background: 'transparent', border: 'none', color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 18, cursor: 'pointer', opacity: 0.8 }}>←</button>
              <button onClick={() => setI((i + 1) % SLIDES.length)} aria-label="Next"
                style={{ width: 44, height: 44, background: 'transparent', border: 'none', color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 18, cursor: 'pointer', opacity: 0.8 }}>→</button>
            </div>
          </div>
          <style>{`@keyframes sliderFill { from { width: 0 } to { width: 100% } }`}</style>
        </div>
      </Container>
    </section>
  );
};

const HeroMission = ({ setRoute }) => (
  <section style={{ padding: '96px 40px 40px' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
        <Eyebrow>Est. MMXXVI · Kathmandu</Eyebrow>
        <h1 style={{
          fontFamily: 'var(--serif)', fontWeight: 300,
          fontSize: 'clamp(64px,9.5vw,132px)', lineHeight: 0.94,
          letterSpacing: '-0.03em', margin: 0,
        }}>
          Building <em style={{ fontStyle: 'italic' }}>Responsible</em><br/>A.I. Nexus.
        </h1>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 48, paddingTop: 28, borderTop: '1px solid var(--rule)', alignItems: 'start' }}>
        <div/>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.5, color: 'var(--ink-700)', maxWidth: 680, margin: 0 }}>
          An independent nonprofit convening researchers, policymakers, and builders to steward the development of AI in the public interest — from Kathmandu, for the world.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 180 }}>
          <Button variant="primary" onClick={() => setRoute('olympiad')}>Nepal AI Olympiad</Button>
          <Button variant="ghost" onClick={() => setRoute('research')}>All research</Button>
        </div>
      </div>
    </Container>
  </section>
);

// ——— HOME ———
const TWEAKS = /*EDITMODE-BEGIN*/{"heroVariant":"slider"}/*EDITMODE-END*/;

const HomePage = ({ setRoute }) => {
  const [hero, setHero] = React.useState(TWEAKS.heroVariant || 'imagery');
  const [tweakOpen, setTweakOpen] = React.useState(false);
  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweakOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweakOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  const setHeroAndPersist = (v) => {
    setHero(v);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { heroVariant: v } }, '*');
  };
  const Hero = hero === 'imagery' ? HeroImagery : hero === 'mission' ? HeroMission : hero === 'slider' ? HeroSlider : HeroActive;
  return (
  <main data-screen-label="Home">
    <Hero setRoute={setRoute}/>
    {tweakOpen && (
      <div style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 50, background: 'var(--ink)', color: 'var(--paper)', padding: '20px 22px', width: 280, boxShadow: '0 20px 60px rgba(0,0,0,0.25)' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)', marginBottom: 14 }}>Tweaks · Hero</div>
        {[
          ['slider', 'Initiatives slider', 'Rotating full-bleed slides — one per programme'],
          ['active', 'Active work ticker', 'Headline + live list of what is happening'],
          ['imagery', 'Imagery split', 'Headline paired with a photo anchor'],
          ['mission', 'Mission statement', 'Large mission headline, minimal'],
        ].map(([k, l, d]) => (
          <div key={k} onClick={() => setHeroAndPersist(k)} style={{
            padding: '12px 0', borderTop: '1px solid rgba(245,241,234,0.15)', cursor: 'pointer',
            opacity: hero === k ? 1 : 0.55,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: hero === k ? 'var(--accent)' : 'transparent', border: '1px solid var(--accent-soft)' }}/>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 15 }}>{l}</span>
            </div>
            <div style={{ marginLeft: 16, marginTop: 4, fontSize: 11, color: 'var(--paper-200)' }}>{d}</div>
          </div>
        ))}
      </div>
    )}


    {/* Stats strip */}
    <section style={{ marginTop: 80, borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', background: 'var(--paper-200)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', padding: '56px 40px' }}>
          <Stat value="12" label="Working papers" sub="In circulation with ministries & partners" />
          <Stat value="4" label="Olympiads run" sub="Over 3,200 students since 2023" />
          <Stat value="38" label="Partner institutions" sub="Nepal, South Asia, and further abroad" />
          <Stat value="06" label="Convenings this year" sub="By invitation, with limited public seats" />
        </div>
      </Container>
    </section>

    {/* What we do */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead
          number="01"
          eyebrow="What we do"
          title={<>Four lines of work, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>one standing question.</em></>}
          lede="We publish working papers, convene practitioners, run the national AI Olympiad, and advise the people writing the rules. In every room, we ask the same thing: who, precisely, is this for?"
        />
        <RuleGrid cols={2}>
          {[
            {
              n: '01', k: 'Research & policy',
              t: 'Governance, ethics, and evaluation standards',
              d: "Working papers, briefings, and on-the-record positions for government and civil society. We hedge only when the evidence demands it.",
              cta: 'Read the research', r: 'research',
            },
            {
              n: '02', k: 'Programs',
              t: 'Fellowships, internships, and practitioner trainings',
              d: "A nine-month fellowship for researchers and civil servants; summer internships; workshops for judiciary, health, and education practitioners.",
              cta: 'Explore programs', r: 'programs',
            },
            {
              n: '03', k: 'AI Olympiad',
              t: 'A national Olympiad, with a team at the international stage',
              d: "Since 2023 we run Nepal's national AI Olympiad. The top finishers go on to represent Nepal at the International AI Olympiad each year.",
              cta: 'About the Olympiad', r: 'olympiad',
            },
            {
              n: '04', k: 'Convenings',
              t: 'Careful, invite-only rooms for practitioners',
              d: "Two-day convenings on specific, decidable questions — algorithmic auditing, meaningful consent, public-sector procurement.",
              cta: 'Upcoming convenings', r: 'convenings',
            },
          ].map(c => (
            <div key={c.n} style={{ background: 'var(--paper)', padding: '40px 36px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <Eyebrow number={c.n}>{c.k}</Eyebrow>
              </div>
              <h3 style={{
                fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 32,
                lineHeight: 1.15, letterSpacing: '-0.01em', margin: '4px 0 0',
              }}>{c.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0, maxWidth: '48ch' }}>{c.d}</p>
              <div style={{ marginTop: 8 }}>
                <TextLink onClick={() => setRoute(c.r)}>{c.cta} →</TextLink>
              </div>
            </div>
          ))}
        </RuleGrid>
      </Container>
    </section>

    {/* Featured paper — dark section */}
    <section style={{ padding: '96px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <Eyebrow onInk>Working paper · 02 / 2026 · 48 pp</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: '18px 0 20px', color: 'var(--paper)',
            }}>
              Who audits the auditors? <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>On evaluation standards for public-sector AI.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--paper-200)', maxWidth: '48ch', margin: '0 0 28px' }}>
              A proposal for independent, publicly-funded audit infrastructure — and the four questions that should decide what an audit counts for. Co-authored with the Ministry of Communication &amp; Information Technology.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="accent" onClick={() => setRoute('reading')}>Read the paper</Button>
              <Button variant="ghostInk">Download PDF · 48 pp</Button>
            </div>
          </div>
          <ImgSlot label="Document · archival, top-down" tone="dark" aspect="4/3" />
        </div>
      </Container>
    </section>

    {/* Olympiad banner */}
    <section style={{ padding: '0 40px', background: 'var(--paper)' }}>
      <Container>
        <div style={{
          margin: '-48px 0 0',
          position: 'relative',
          background: 'var(--accent)', color: 'var(--paper)',
          padding: '56px 56px',
          display: 'grid', gridTemplateColumns: '1fr auto',
          gap: 48, alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(245,241,234,0.85)', marginBottom: 14 }}>Nepal AI Olympiad · 2026 · Fourth edition</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 48, fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--paper)', maxWidth: 720 }}>
              Registration is open. <em style={{ fontStyle: 'italic' }}>Three months, three rounds, one team for Riyadh.</em>
            </div>
            <div style={{ marginTop: 16, fontSize: 15, color: 'var(--paper-200)', maxWidth: '64ch' }}>
              A national Olympiad for students in grades 9–12. Top finishers form the Nepal team at the International AI Olympiad 2026.
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Button variant="primary" style={{ background: 'var(--ink)' }} onClick={() => setRoute('olympiad')}>Register · deadline 30 June</Button>
            <Button variant="ghostInk" onClick={() => setRoute('olympiad')}>How it works</Button>
          </div>
        </div>
      </Container>
    </section>

    {/* Recent perspectives */}
    <section style={{ padding: '120px 40px 96px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 48, marginBottom: 40, alignItems: 'baseline' }}>
          <Eyebrow number="02">Perspectives</Eyebrow>
          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.015em', margin: 0 }}>
            Recent writing <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>from the field.</em>
          </h2>
          <TextLink onClick={() => setRoute('research')}>All writing →</TextLink>
        </div>
        <RuleGrid cols={3}>
          <ArticleCard kind="Briefing" title="A tool is only as" titleItalic="responsible as the room it was built in."
            date="14 April 2026" length="05 min" onClick={() => setRoute('reading')} />
          <ArticleCard kind="Perspective · 03" title="Five seats at the table." titleItalic="None of them ours."
            date="02 April 2026" length="08 min" onClick={() => setRoute('reading')} />
          <ArticleCard kind="Letter" title="To the Minister," titleItalic="on meaningful consent."
            date="22 March 2026" length="03 min" onClick={() => setRoute('reading')} />
        </RuleGrid>
      </Container>
    </section>

    {/* Nexus + mission */}
    <section style={{ padding: '96px 40px', borderTop: '1px solid var(--rule)', background: 'var(--paper-200)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <NexusDiagram size={440} />
          </div>
          <div>
            <Eyebrow>The Nexus</Eyebrow>
            <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.015em', margin: '14px 0 24px' }}>
              Five seats at the table. <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>None of them ours.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-700)', maxWidth: '52ch' }}>
              Our mark carries our mission structurally — five connected nodes for the constituencies we convene, held together by a single responsible centre. Our role is the edges, not the nodes.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <Button variant="primary" onClick={() => setRoute('about')}>About the Foundation</Button>
              <Button variant="ghost" onClick={() => setRoute('team')}>Meet the team</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>

    {/* Convening callout */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 48, marginBottom: 40, alignItems: 'baseline' }}>
          <Eyebrow number="03">Convenings</Eyebrow>
          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.015em', margin: 0 }}>
            Careful rooms, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>decidable questions.</em>
          </h2>
          <TextLink onClick={() => setRoute('convenings')}>All convenings →</TextLink>
        </div>

        <div>
          <EventRow date="22 · 05 · 2026" kind="Convening" title="Who, precisely, is this for? — Public-sector evaluation" location="Kathmandu · Hotel Annapurna" status="Open" onClick={() => setRoute('convenings')}/>
          <EventRow date="14 · 07 · 2026" kind="Workshop" title="Judiciary & algorithmic systems — a two-day training" location="Patan · Supreme Court Complex" status="Invite" onClick={() => setRoute('convenings')}/>
          <EventRow date="09 · 09 · 2026" kind="Convening" title="Meaningful consent in public health data" location="Kathmandu · Soaltee" status="Open" onClick={() => setRoute('convenings')}/>
          <div style={{ borderTop: '1px solid var(--rule)', marginTop: 0 }}/>
        </div>
      </Container>
    </section>

    {/* Partners strip */}
    <section style={{ padding: '80px 40px', borderTop: '1px solid var(--rule)', background: 'var(--paper-200)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 32, alignItems: 'baseline' }}>
          <Eyebrow>In partnership with</Eyebrow>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 24, color: 'var(--ink-700)', fontStyle: 'italic', fontWeight: 300 }}>
            We work with ministries, universities, and civil-society organisations across Nepal and abroad.
          </div>
        </div>
        <RuleGrid cols={5} style={{ background: 'var(--rule)' }}>
          <PartnerPlate name="Ministry of Communication & IT" type="Government · Nepal"/>
          <PartnerPlate name="Tribhuvan University" type="Academic · Kathmandu"/>
          <PartnerPlate name="Kathmandu University" type="Academic · Dhulikhel"/>
          <PartnerPlate name="UNESCO · Kathmandu" type="Multilateral"/>
          <PartnerPlate name="Mozilla Foundation" type="Nonprofit"/>
          <PartnerPlate name="Ministry of Education" type="Government · Nepal"/>
          <PartnerPlate name="Alan Turing Institute" type="Academic · UK"/>
          <PartnerPlate name="AI Fund for South Asia" type="Funder"/>
          <PartnerPlate name="Nepal Law Society" type="Civil society"/>
          <PartnerPlate name="IOAI Secretariat" type="International"/>
        </RuleGrid>
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'flex-end' }}>
          <TextLink onClick={() => setRoute('partners')}>All partners →</TextLink>
        </div>
      </Container>
    </section>

    {/* House quote */}
    <section style={{ padding: '120px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
      <Container width={980}>
        <Eyebrow onInk>House quote</Eyebrow>
        <div style={{ marginTop: 24, fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 64, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          "A tool is only as responsible <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>as the room it was built in."</em>
        </div>
        <div style={{ marginTop: 40, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)' }}>
          — From the charter · BRAIN Foundation · 2026
        </div>
      </Container>
    </section>

    {/* Support CTA */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start', paddingTop: 48, borderTop: '1px solid var(--rule)' }}>
          <div>
            <Eyebrow>Support the Foundation</Eyebrow>
            <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 64, lineHeight: 1, letterSpacing: '-0.025em', margin: '18px 0 0' }}>
              A field worth <em style={{ fontStyle: 'italic' }}>getting right.</em>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-700)' }}>
              BRAIN Foundation is funded by a mix of individual donors, institutional grants, and earned income from trainings. We publish our full funder list and annual report each year. If you think this work matters, we'd be glad of your help.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <Button variant="accent" onClick={() => setRoute('support')}>Donate</Button>
              <Button variant="ghost" onClick={() => setRoute('partners')}>Become a partner</Button>
              <Button variant="ghost" onClick={() => setRoute('careers')}>Careers</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  </main>
  );
};

Object.assign(window, { HomePage });
