// ——— AI OLYMPIAD ———
const OlympiadPage = ({ setRoute }) => (
  <main data-screen-label="AI Olympiad">
    {/* Masthead */}
    <section style={{ padding: '72px 40px 48px', background: 'var(--ink)', color: 'var(--paper)', borderBottom: '1px solid var(--rule-inverse)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 40 }}>
          <Eyebrow onInk>Nepal AI Olympiad · MMXXVI</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(64px,9vw,128px)', lineHeight: 0.94, letterSpacing: '-0.03em', margin: 0, color: 'var(--paper)' }}>
              The Nepal <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>AI Olympiad.</em>
            </h1>
            <p style={{ marginTop: 36, fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.45, color: 'var(--paper-200)', maxWidth: 760 }}>
              A national competition for students in grades 9–12. Three rounds, three months, and a seat on the Nepal team at the International AI Olympiad.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr auto', gap: 48, paddingTop: 28, borderTop: '1px solid var(--rule-inverse)', alignItems: 'end' }}>
          <div/>
          <div>
            <Eyebrow onInk>Registration opens</Eyebrow>
            <div style={{ marginTop: 10, fontFamily: 'var(--serif)', fontSize: 34, fontWeight: 300, color: 'var(--paper)', letterSpacing: '-0.015em' }}>15 May 2026</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--paper-200)', marginTop: 6 }}>Closes 30 June</div>
          </div>
          <div>
            <Eyebrow onInk>National finals</Eyebrow>
            <div style={{ marginTop: 10, fontFamily: 'var(--serif)', fontSize: 34, fontWeight: 300, color: 'var(--paper)', letterSpacing: '-0.015em' }}>14 September 2026</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--paper-200)', marginTop: 6 }}>Kathmandu · Tribhuvan University</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Button variant="accent">Register a student</Button>
            <Button variant="ghostInk">For schools</Button>
          </div>
        </div>
      </Container>
    </section>

    {/* Stats */}
    <section style={{ padding: '72px 40px', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {[
            ['3,200+', 'Students since 2023'],
            ['142', 'Participating schools'],
            ['72', 'Districts represented'],
            ['04', 'Years at the international stage'],
          ].map(([v, l]) => (
            <div key={l} style={{ background: 'var(--paper)', padding: '40px 32px' }}>
              <Stat value={v} label={l}/>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* How it works */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="01" eyebrow="How it works" title={<>Three rounds, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>one team.</em></>} lede="The Olympiad runs over three months. Each round narrows the field. The top six finishers form the Nepal team at the International AI Olympiad." />

        <RuleGrid cols={3}>
          {[
            {
              n: '01', t: 'Qualifier',
              when: 'July · online',
              d: "An online, open-book qualifier: reasoning, probability, linear algebra, and a short coding task. Open to any registered student in grades 9–12.",
              who: '~1,400 students · 2025 cohort',
            },
            {
              n: '02', t: 'Regional rounds',
              when: 'August · seven cities',
              d: "In-person, four-hour sitting across seven regional hubs — Kathmandu, Pokhara, Biratnagar, Nepalgunj, Butwal, Birgunj, Dhangadhi.",
              who: 'Top 160 qualify',
            },
            {
              n: '03', t: 'National finals',
              when: 'September · Kathmandu',
              d: "Two days at Tribhuvan University: a scientific round, a practical round, and a short interview. Top six are named to the Nepal team.",
              who: 'Top 06 form Team Nepal',
            },
          ].map(r => (
            <div key={r.n} style={{ background: 'var(--paper)', padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 340 }}>
              <Eyebrow number={r.n}>{r.when}</Eyebrow>
              <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.01em', margin: '6px 0 0' }}>{r.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0 }}>{r.d}</p>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--rule)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>{r.who}</div>
            </div>
          ))}
        </RuleGrid>
      </Container>
    </section>

    {/* Syllabus */}
    <section style={{ padding: '96px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <SectionHead number="02" eyebrow="What's on the paper" title={<>The syllabus, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>published in full.</em></>} lede="The Olympiad syllabus is public. It mirrors the international syllabus maintained by IOAI, with additions for supervised ML practice." />
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr', gap: 48 }}>
          <div/>
          {[
            ['Scientific round', [
              'Mathematics of machine learning',
              'Probability & statistics',
              'Linear algebra',
              'Search & optimisation',
              'Information theory basics',
              'Fairness & evaluation metrics',
            ]],
            ['Practical round', [
              'Python · NumPy, Pandas, scikit-learn',
              'Supervised learning workflows',
              'Data cleaning & feature design',
              'Model validation & reporting',
              'A short written defence of method',
              'Documentation & reproducibility',
            ]],
          ].map(([h, items]) => (
            <div key={h}>
              <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 28, margin: '0 0 20px', letterSpacing: '-0.01em' }}>{h}</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {items.map(x => (
                  <li key={x} style={{ padding: '12px 0', borderTop: '1px solid var(--rule)', fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink-700)' }}>{x}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, textAlign: 'right' }}>
          <Button variant="ghost">Download full syllabus · 22 pp</Button>
        </div>
      </Container>
    </section>

    {/* Team Nepal */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="03" eyebrow="Team Nepal at the IOAI" title={<>Four years, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>three medals, one silver.</em></>} lede="Team Nepal has represented the country at the International AI Olympiad since its inaugural year. Six students, one team leader, one deputy." />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <ImgSlot label="Team Nepal · IOAI 2025, Beijing" aspect="4/3" />
            <div style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Figure 01 · IOAI 2025 · Team Nepal, Beijing</div>
          </div>
          <div>
            <div style={{ borderTop: '1px solid var(--rule)' }}>
              {[
                ['2025', 'Beijing', '01 silver · 02 bronze', 'Team leader: Dr. Bikram Adhikari'],
                ['2024', 'Bucharest', '01 bronze · 02 honourable mentions', 'Team leader: Sunita Rai'],
                ['2023', 'Sofia', '01 bronze', 'Inaugural Team Nepal'],
              ].map(([y, loc, res, lead]) => (
                <div key={y} style={{ padding: '24px 0', borderBottom: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 24, alignItems: 'baseline' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.1em', color: 'var(--accent)' }}>{y}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2 }}>{loc}</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 6 }}>{lead}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink)' }}>{res}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <Button variant="primary">Team Nepal archive</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>

    {/* Alumni voices */}
    <section style={{ padding: '96px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
      <Container>
        <SectionHead number="04" eyebrow="Alumni" title={<>Where our finalists <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>went next.</em></>} onInk />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--rule-inverse)', border: '1px solid var(--rule-inverse)' }}>
          {[
            ['S. Maharjan', '2023 · Silver', 'Undergraduate, MIT · studying ML systems.'],
            ['R. Bhandari', '2024 · Bronze', 'First-year, IIT Bombay · interning at a Nepali fintech.'],
            ['A. Thapa',    '2024 · H.M.',   'Gap year — teaches a Saturday ML club at her former school.'],
            ['D. Giri',     '2025 · Silver', 'Studying at Tribhuvan University; BRAIN research associate.'],
            ['N. Karki',    '2025 · Bronze', 'Accepted to ETH Zurich, deferred a year for a fellowship.'],
            ['P. Joshi',    '2025 · Bronze', 'Coding instructor, Nepal AI Olympiad regional hub, Biratnagar.'],
          ].map(([n, m, w]) => (
            <div key={n} style={{ background: 'var(--ink-700)', padding: '28px 28px' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)' }}>{m}</div>
              <div style={{ marginTop: 10, fontFamily: 'var(--serif)', fontSize: 24, color: 'var(--paper)' }}>{n}</div>
              <div style={{ marginTop: 10, fontSize: 14, lineHeight: 1.55, color: 'var(--paper-200)' }}>{w}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* For teachers & schools */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="05" eyebrow="For teachers & schools" title={<>Run a hub, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>bring your students.</em></>} lede="Any recognised school in Nepal can register students. We provide a free teacher's kit, a syllabus map aligned to NCED, and an optional two-day workshop." />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
          {[
            ['Free to enter', "No registration fee. We cover all regional-round and finals costs, including travel for out-of-Valley finalists."],
            ["Teacher's kit", "A printed and digital kit with past papers, worked solutions, a 12-week preparation syllabus, and marking schemes."],
            ['School partnerships', "Schools registering five or more students receive a free one-day teacher workshop and a classroom starter library."],
          ].map(([h, d]) => (
            <div key={h} style={{ padding: '28px 0', borderTop: '2px solid var(--ink)' }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 26, margin: '0 0 14px', letterSpacing: '-0.01em' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, padding: '32px 40px', background: 'var(--accent)', color: 'var(--paper)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(245,241,234,0.85)', marginBottom: 8 }}>For schools</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 300, letterSpacing: '-0.015em', color: 'var(--paper)' }}>
              Register your school as a regional hub for 2026.
            </div>
          </div>
          <Button variant="primary" style={{ background: 'var(--ink)' }}>Contact the Olympiad office</Button>
        </div>
      </Container>
    </section>

    {/* FAQ */}
    <section style={{ padding: '96px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)' }}>
      <Container width={920}>
        <SectionHead number="06" eyebrow="Questions, answered" title={<>Everything a student, parent, or teacher <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>might ask.</em></>}/>
        <Accordion items={[
          { q: 'Who is eligible to participate?', a: 'Any student enrolled in grades 9 to 12 at a recognised school in Nepal. Students must be Nepali citizens or long-term residents. There are no subject prerequisites — the syllabus is fully self-contained.' },
          { q: 'Is there a registration fee?', a: 'No. The Olympiad is free to enter. We cover travel and accommodation for students who qualify for the national finals from outside the Kathmandu Valley, and partial travel support for regional rounds.' },
          { q: 'What should I study to prepare?', a: "We publish the full syllabus and past papers every year. A well-prepared student will be comfortable with high-school mathematics, basic Python, and an introductory machine-learning course. Our teacher's kit maps the syllabus to a 12-week study plan." },
          { q: 'Does my school need to register me?', a: 'No — students can register individually. However, we encourage schools to register, so we can coordinate the regional round logistics and offer teacher support.' },
          { q: 'What happens at the International Olympiad?', a: 'The top six national finalists form Team Nepal at the International AI Olympiad (IOAI), held each year in a different country. Travel, accommodation, and training are fully funded by BRAIN Foundation and our international partners.' },
          { q: 'I am a teacher — how can I help?', a: "Register your school, attend our annual teacher's workshop (August), and consider running an AI club for your students. We provide a starter library and curriculum materials at no cost." },
        ]}/>
      </Container>
    </section>

    {/* Partners */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="07" eyebrow="Olympiad partners" title={<>The Olympiad is run with <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>many hands.</em></>}/>
        <RuleGrid cols={5}>
          <PartnerPlate name="Ministry of Education" type="Official partner"/>
          <PartnerPlate name="NCED" type="Curriculum partner"/>
          <PartnerPlate name="Tribhuvan University" type="Host · finals"/>
          <PartnerPlate name="Kathmandu University" type="Academic"/>
          <PartnerPlate name="IOAI Secretariat" type="International"/>
          <PartnerPlate name="UNESCO Kathmandu" type="Supporting"/>
          <PartnerPlate name="Digital Nepal Framework" type="Government"/>
          <PartnerPlate name="Ncell Foundation" type="Corporate donor"/>
          <PartnerPlate name="Nabil Bank" type="Corporate donor"/>
          <PartnerPlate name="Open Society Foundations" type="Grant"/>
        </RuleGrid>
      </Container>
    </section>
  </main>
);

Object.assign(window, { OlympiadPage });
