// ——— PROGRAMS ———
const ProgramsPage = ({ setRoute }) => (
  <main data-screen-label="Programs">
    <section style={{ padding: '96px 40px 72px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
          <Eyebrow number="01">Programs</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
              Fellowships, internships, <em style={{ fontStyle: 'italic' }}>trainings.</em>
            </h1>
            <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
              We bring researchers, civil servants, and early-career technologists into the work. Our programs are small, well-funded, and publicly accountable.
            </p>
          </div>
        </div>
      </Container>
    </section>

    {/* Featured fellowship */}
    <section style={{ padding: '0 40px 72px' }}>
      <Container>
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '64px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow onInk>Flagship · Open for 2026/27</Eyebrow>
            <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.015em', margin: '18px 0 20px', color: 'var(--paper)' }}>
              The BRAIN Fellowship. <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>Nine months, six fellows.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--paper-200)', maxWidth: '48ch' }}>
              A fully-funded, nine-month fellowship for early-career researchers, civil servants, and engineers working on questions of AI governance and public-sector deployment. Each fellow writes a working paper and convenes a workshop.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <Button variant="accent">Apply · deadline 15 July</Button>
              <Button variant="ghostInk">Fellowship handbook · PDF</Button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 1, background: 'var(--rule-inverse)' }}>
            {[['09', 'Months'], ['06', 'Fellows'], ['01', 'Working paper each'], ['USD 18k', 'Stipend']].map(([v, l]) => (
              <div key={l} style={{ background: 'var(--ink)', padding: '22px 20px' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 40, fontWeight: 300, color: 'var(--paper)', letterSpacing: '-0.02em' }}>{v}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)', marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>

    {/* Programs list */}
    <section style={{ padding: '72px 40px' }}>
      <Container>
        <SectionHead number="02" eyebrow="All programs" title={<>Five lines of work, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>shared between them.</em></>}/>
        <RuleGrid cols={2}>
          {[
            ['Fellowship', 'Nine months', 'Early-career researchers and civil servants. Stipend, housing, full research budget.', 'Open · rolling'],
            ['Summer internship', 'Ten weeks', 'Undergraduate interns join a team for a focused project. Paid, with mentoring.', 'Open · March'],
            ['Practitioner training', '2–5 days', 'Short courses for judiciary, health, and education practitioners working with ML systems.', 'Quarterly'],
            ['Residency', '3 months', 'A writing residency for policy writers and journalists. Desk space, stipend, library access.', 'Invite-only'],
            ['Teacher development', '2 days', 'Summer workshops for school teachers running AI clubs or Olympiad preparation.', 'August'],
            ['Civil-service exchange', '6 months', 'Secondments from the Nepali civil service to BRAIN — and the other way around.', 'Rolling'],
          ].map(([t, len, d, status]) => (
            <div key={t} style={{ background: 'var(--paper)', padding: '32px 32px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 220 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>{len}</div>
                <Tag tone={status.includes('Open') ? 'ember' : 'ink'}>{status}</Tag>
              </div>
              <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.01em', margin: 0 }}>{t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0 }}>{d}</p>
            </div>
          ))}
        </RuleGrid>
      </Container>
    </section>

    {/* What fellows write about */}
    <section style={{ padding: '96px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <SectionHead number="03" eyebrow="What fellows write about" title={<>The questions <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>already in the room.</em></>} lede="Fellows propose their own research question. In recent years, these have clustered around four themes." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
          {[
            ['Public-sector ML deployments', "What does 'accountable' mean, operationally, for a triage tool in a district hospital?"],
            ['Meaningful consent', "What can a person in a health or welfare queue actually consent to?"],
            ['Evaluation standards', "How do we move from 'tested on a benchmark' to 'tested with the people affected'?"],
            ['Labour & displacement', "Who loses work when a ministry adopts an automated system? Who gains?"],
          ].map(([h, q]) => (
            <div key={h} style={{ padding: '24px 0', borderTop: '2px solid var(--ink)' }}>
              <h4 style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15, margin: '0 0 12px', letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--ink)' }}>{h}</h4>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 17, fontStyle: 'italic', color: 'var(--ink-700)', lineHeight: 1.5, margin: 0 }}>{q}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* Application */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="04" eyebrow="How to apply" title={<>Four steps, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>no gatekeeping.</em></>}/>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
          <div/>
          <div>
            {[
              ['01', 'Written proposal', 'A 1,000-word research proposal. We provide the template and two past-year examples. No CV at this stage.'],
              ['02', 'Conversation', 'Shortlisted applicants have a one-hour conversation with two members of the research team. We discuss the proposal, not credentials.'],
              ['03', 'Reference check', 'Two references. One can be a colleague, the other a person the proposed research would affect.'],
              ['04', 'Offer', 'Decisions within six weeks of the deadline. Stipend, desk, and a named mentor on day one.'],
            ].map(([n, t, d]) => (
              <div key={n} style={{ padding: '28px 0', borderTop: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '80px 1fr', gap: 24 }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.14em', color: 'var(--accent)' }}>{n}</div>
                <div>
                  <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 24, margin: '0 0 8px' }}>{t}</h4>
                  <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0, maxWidth: '58ch' }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  </main>
);

// ——— CONVENINGS ———
const ConveningsPage = ({ setRoute }) => (
  <main data-screen-label="Convenings">
    <section style={{ padding: '96px 40px 48px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
          <Eyebrow number="01">Convenings</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
              Careful rooms, <em style={{ fontStyle: 'italic' }}>decidable questions.</em>
            </h1>
            <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
              We hold two-day convenings on specific, decidable questions — never on "AI in general". Most are by invitation, with a handful of public seats balloted each quarter.
            </p>
          </div>
        </div>
      </Container>
    </section>

    <section style={{ padding: '48px 40px 48px' }}>
      <Container>
        <SectionHead eyebrow="Upcoming" />
        <div>
          <EventRow date="22 · 05 · 2026" kind="Convening" title="Who, precisely, is this for? — Public-sector evaluation" location="Kathmandu · Hotel Annapurna" status="Open"/>
          <EventRow date="14 · 07 · 2026" kind="Workshop" title="Judiciary & algorithmic systems — a two-day training" location="Patan · Supreme Court Complex" status="Invite"/>
          <EventRow date="09 · 09 · 2026" kind="Convening" title="Meaningful consent in public health data" location="Kathmandu · Soaltee" status="Open"/>
          <EventRow date="03 · 11 · 2026" kind="Symposium" title="AI policy in South Asia — a regional gathering" location="Delhi · India International Centre" status="Open"/>
          <EventRow date="02 · 12 · 2026" kind="Convening" title="Procurement standards for ML systems in government" location="Kathmandu · BRAIN offices" status="Invite"/>
          <div style={{ borderTop: '1px solid var(--rule)' }}/>
        </div>
      </Container>
    </section>

    <section style={{ padding: '72px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <SectionHead number="02" eyebrow="How our convenings work" title={<>A format, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>not an agenda.</em></>}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {[
            ['Two days, twenty people', "Half a dozen affected practitioners, half a dozen ministry officials, the researchers who have written on the question, and a quiet minority from industry."],
            ['Chatham House, mostly', "What is said is on the record; who said it is not. A published proceedings is released within four weeks."],
            ['One decidable question', "We do not hold convenings on 'AI' as such. Every invitation names a specific decision in flight — a procurement rule, a standard, an operating procedure."],
          ].map(([h, d]) => (
            <div key={h} style={{ background: 'var(--paper)', padding: '32px 28px' }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 24, margin: '0 0 12px', letterSpacing: '-0.005em' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>

    <section style={{ padding: '72px 40px' }}>
      <Container>
        <SectionHead number="03" eyebrow="Past convenings · proceedings" title={<>Every convening <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>leaves a record.</em></>}/>
        <RuleGrid cols={3}>
          <ArticleCard kind="Proceedings · Feb 2026" title="On meaningful consent" titleItalic="in public health deployments." date="Feb 2026" length="28 pp" onClick={() => setRoute('reading')}/>
          <ArticleCard kind="Proceedings · Nov 2025" title="Stewardship of" titleItalic="automated triage systems." date="Nov 2025" length="34 pp" onClick={() => setRoute('reading')}/>
          <ArticleCard kind="Proceedings · Aug 2025" title="A short defence" titleItalic="of public-interest evaluation." date="Aug 2025" length="22 pp" onClick={() => setRoute('reading')}/>
        </RuleGrid>
      </Container>
    </section>
  </main>
);

Object.assign(window, { ProgramsPage, ConveningsPage });
