// ——— ABOUT ———
const AboutPage = ({ setRoute }) => (
  <main data-screen-label="About">
    {/* Hero */}
    <section style={{ padding: '96px 40px 72px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <Eyebrow number="01">About</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
              A responsible centre <em style={{ fontStyle: 'italic' }}>for a hopeful field.</em>
            </h1>
            <p style={{ marginTop: 32, fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.5, color: 'var(--ink-700)', maxWidth: 780 }}>
              BRAIN Foundation is an independent nonprofit, registered in Nepal in 2026, convening researchers, policymakers, and builders to steward the development of AI in the public interest. We publish, convene, train, and advise — and we run the national AI Olympiad.
            </p>
          </div>
        </div>
      </Container>
    </section>

    {/* Nexus diagram */}
    <section style={{ padding: '72px 40px', borderTop: '1px solid var(--rule)', borderBottom: '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={480} />
          </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)' }}>
              The Nexus mark carries our mission structurally — five connected nodes for the stakeholders we convene: <strong>researchers, builders, governments, civil society, and the public</strong> — held together by a single responsible centre.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-700)' }}>
              Our role is the <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>edges</em>, not the nodes. We do not represent any one constituency. We speak with industry, and sometimes against it; with government, and sometimes against it.
            </p>
          </div>
        </div>
      </Container>
    </section>

    {/* Voice pillars */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="02" eyebrow="How we sound" title={<>Four pillars, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>one standing question.</em></>} lede="We write like a paper of record, not a product. Measured, slightly austere, occasionally wry." />
        <RuleGrid cols={4}>
          {[
            ['Considered.', "We take the long view. When we speak, it's because we have something load-bearing to add."],
            ['Plain.',      'We use ordinary words. Jargon earns its place only when no plain word will do — and is glossed when used.'],
            ['Humane.',     'AI is about people. We write as if they are in the room — because often they are.'],
            ['Honest.',     "We hedge only when evidence demands it. We don't hide behind 'many believe' when we mean 'we believe'."],
          ].map(([h, p]) => (
            <div key={h} style={{ background: 'var(--paper)', padding: '36px 32px', minHeight: 220 }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 34, fontWeight: 300, letterSpacing: '-0.01em', margin: '0 0 16px', color: 'var(--accent)' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>{p}</p>
            </div>
          ))}
        </RuleGrid>
      </Container>
    </section>

    {/* Charter / history */}
    <section style={{ padding: '96px 40px', borderTop: '1px solid var(--rule)' }}>
      <Container>
        <SectionHead number="03" eyebrow="Charter" title={<>The short version, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>for a long-running brief.</em></>}/>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr', gap: 48 }}>
          <div/>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.6, color: 'var(--ink-700)' }}>
            <p style={{ margin: '0 0 18px', maxWidth: '48ch' }}>BRAIN Foundation was founded in early 2026 by a small group of researchers, civil servants, and engineers who had worked on AI questions in Nepal's public sector and felt the country needed a standing institution — not a project or a consultancy — to carry the work forward.</p>
            <p style={{ margin: 0, maxWidth: '48ch' }}>We took a simple premise into our charter: <em style={{ fontStyle: 'italic' }}>a tool is only as responsible as the room it was built in.</em> Our job is to change the rooms.</p>
          </div>
          <div>
            <div style={{ borderLeft: '1px solid var(--rule)', paddingLeft: 32 }}>
              {[
                ['2023', 'First Nepal AI Olympiad, 600 students, 12 schools.'],
                ['2024', "Foundation charter drafted; partnership with Ministry of Communication & IT."],
                ['2025', "First briefing on public-sector evaluation; trainings for judiciary."],
                ['2026', 'Registered as an independent nonprofit. Fourth Olympiad. First working paper.'],
              ].map(([y, d]) => (
                <div key={y} style={{ padding: '18px 0', borderBottom: '1px solid var(--rule)' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>{y}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.4, color: 'var(--ink)' }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>

    {/* Team CTA */}
    <section style={{ padding: '96px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Eyebrow onInk>Team</Eyebrow>
            <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 64, lineHeight: 1.02, letterSpacing: '-0.02em', margin: '18px 0 24px' }}>
              Small, careful, <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>always listening.</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--paper-200)', maxWidth: '50ch' }}>
              We are a team of fourteen, across research, policy, convenings, and communications — plus a standing board of advisers from Nepal, India, and the UK.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <Button variant="accent" onClick={() => setRoute('team')}>Meet the team</Button>
              <Button variant="ghostInk" onClick={() => setRoute('careers')}>Careers →</Button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
            <ImgSlot label="Portrait · researcher" aspect="4/5" tone="dark" />
            <ImgSlot label="Convening · Kathmandu" aspect="4/5" tone="dark" />
          </div>
        </div>
      </Container>
    </section>

    {/* Governance */}
    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="04" eyebrow="Governance" title={<>Independence is a practice, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>not a statement.</em></>} />
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr', gap: 48 }}>
          <div/>
          {[
            ['Funding', "We publish our full funder list in every annual report. No single donor contributes more than 15% of our budget. We decline funding that constrains our research agenda."],
            ['Disclosure', "Authors of working papers declare relevant affiliations. Convening participants are asked to name the constituency they are speaking for — or from."],
            ['Board', "A standing board of seven, meeting quarterly. Members serve three-year terms and cannot simultaneously hold executive positions in companies we write about."],
            ['Accountability', "An annual public report. A public errata page. A standing mailing address for complaints."],
          ].map(([h, p]) => (
            <div key={h} style={{ padding: '24px 0', borderTop: '1px solid var(--rule)' }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 24, margin: '0 0 12px' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>{p}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  </main>
);

// ——— TEAM ———
const TeamPage = ({ setRoute }) => {
  const leadership = [
    ['Dr. Anuradha Shrestha', 'Executive Director', "Previously head of the Digital Nepal initiative at MoCIT; DPhil in ML, Oxford. Writes on public-sector evaluation."],
    ['Bikram Adhikari', 'Director, Research & Policy', 'Formerly Alan Turing Institute; authored the Foundation\'s first working paper. Areas: governance, auditing.'],
    ['Sunita Rai', 'Director, Programs', 'Runs the AI Olympiad and the fellowship programme. Previously director of school outreach at Kathmandu University.'],
  ];
  const team = [
    ['Pratima Gurung', 'Head of Communications'],
    ['Dev Karki', 'Senior Policy Fellow'],
    ['Maya Thapa', 'Convenings Lead'],
    ['Rohan Sharma', 'Lead Engineer'],
    ['Sajana Tamang', 'Research Associate'],
    ['Kiran Basnet', 'Research Associate'],
    ['Nisha Pokhrel', 'Programs Manager'],
    ['Aman Joshi', 'Olympiad Coordinator'],
    ['Reshma Sapkota', 'Grants & Operations'],
    ['Ujjwal Lama', 'Research Assistant'],
    ['Tsering Dolma', 'Communications Assistant'],
  ];
  const board = [
    ['Prof. J. Rai', 'Chair · Tribhuvan University'],
    ['Shanti Prabhu', 'IIT Delhi'],
    ['Mark Weinstein', 'Alan Turing Institute'],
    ['Dr. Neha Karki', 'Ministry of Health, Nepal (former)'],
    ['Lhamo Sherpa', 'Nepal Law Society'],
    ['Dr. Arjun Bhattarai', 'Independent researcher'],
    ['Asha Kiran', 'Mozilla Foundation'],
  ];
  return (
    <main data-screen-label="Team">
      <section style={{ padding: '96px 40px 72px' }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
            <Eyebrow number="01">Team</Eyebrow>
            <div>
              <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
                The people in <em style={{ fontStyle: 'italic' }}>the rooms.</em>
              </h1>
              <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--ink-700)', maxWidth: 680 }}>
                Fourteen full-time staff, seven board members, and a growing network of fellows and affiliates. Researchers, policymakers, engineers, and communicators.
              </p>
            </div>
          </div>
        </Container>
      </section>

      <section style={{ padding: '72px 40px', borderTop: '1px solid var(--rule)' }}>
        <Container>
          <SectionHead number="02" eyebrow="Leadership" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 40 }}>
            {leadership.map(([n, t, b]) => (
              <PersonCard key={n} name={n} title={t} bio={b}/>
            ))}
          </div>
        </Container>
      </section>

      <section style={{ padding: '72px 40px', borderTop: '1px solid var(--rule)' }}>
        <Container>
          <SectionHead number="03" eyebrow="Staff" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32 }}>
            {team.map(([n, t]) => (
              <div key={n}>
                <ImgSlot label="Portrait" aspect="1/1" />
                <div style={{ marginTop: 12, fontFamily: 'var(--serif)', fontSize: 18 }}>{n}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 4 }}>{t}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section style={{ padding: '72px 40px', borderTop: '1px solid var(--rule)', background: 'var(--paper-200)' }}>
        <Container>
          <SectionHead number="04" eyebrow="Board of advisers" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 0, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
            {board.map(([n, t]) => (
              <div key={n} style={{ background: 'var(--paper)', padding: '28px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.005em' }}>{n}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, textAlign: 'right' }}>
            <Button variant="ghost" onClick={() => setRoute('careers')}>Open roles →</Button>
          </div>
        </Container>
      </section>
    </main>
  );
};

Object.assign(window, { AboutPage, TeamPage });
