// ——— SUPPORT / DONATE ———
const SupportPage = ({ setRoute }) => {
  const [amount, setAmount] = React.useState(100);
  const [frequency, setFrequency] = React.useState('monthly');
  const presets = [25, 50, 100, 250, 500, 1000];
  return (
    <main data-screen-label="Support">
      <section style={{ padding: '96px 40px 72px' }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
            <Eyebrow number="01">Support</Eyebrow>
            <div>
              <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
                A field worth <em style={{ fontStyle: 'italic' }}>getting right.</em>
              </h1>
              <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
                BRAIN Foundation is funded by a mix of individual donors, institutional grants, and earned income from trainings. We publish our full funder list in every annual report. If you think this work matters, we'd be glad of your help.
              </p>
            </div>
          </div>
        </Container>
      </section>

      <section style={{ padding: '0 40px 96px' }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
            <div style={{ background: 'var(--paper)', padding: '48px 48px' }}>
              <Eyebrow>Make a gift</Eyebrow>
              <div style={{ marginTop: 16, display: 'flex', gap: 4 }}>
                {['monthly', 'once'].map(f => (
                  <button key={f} onClick={() => setFrequency(f)} style={{
                    padding: '10px 18px', fontFamily: 'var(--mono)', fontSize: 11,
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                    background: frequency === f ? 'var(--ink)' : 'transparent',
                    color: frequency === f ? 'var(--paper)' : 'var(--ink-soft)',
                    border: 0, cursor: 'pointer', borderRadius: 2,
                  }}>{f === 'monthly' ? 'Monthly' : 'One-off'}</button>
                ))}
              </div>
              <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                {presets.map(p => (
                  <button key={p} onClick={() => setAmount(p)} style={{
                    padding: '22px 0', background: amount === p ? 'var(--accent)' : 'var(--paper-200)',
                    color: amount === p ? 'var(--paper)' : 'var(--ink)',
                    border: '1px solid ' + (amount === p ? 'var(--accent)' : 'var(--rule)'),
                    borderRadius: 2, cursor: 'pointer',
                    fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 400, letterSpacing: '-0.01em',
                    transition: 'all 140ms',
                  }}>USD {p}</button>
                ))}
              </div>
              <div style={{ marginTop: 16 }}>
                <label style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Or a specific amount</label>
                <input value={amount} onChange={e => setAmount(e.target.value)} style={{
                  marginTop: 8, width: '100%', padding: '14px 16px',
                  fontFamily: 'var(--serif)', fontSize: 22,
                  background: 'transparent', border: '1px solid var(--rule)', borderRadius: 2,
                }}/>
              </div>
              <div style={{ marginTop: 24, padding: '18px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>You will give</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 32, letterSpacing: '-0.015em' }}>
                  USD {amount}<span style={{ fontSize: 16, color: 'var(--ink-soft)', fontStyle: 'italic', marginLeft: 10 }}>{frequency === 'monthly' ? '/ month' : 'one time'}</span>
                </div>
              </div>
              <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
                <Button variant="accent" style={{ flex: 1, justifyContent: 'center', padding: '14px 0' }}>Continue to secure checkout →</Button>
              </div>
              <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                Donations are processed by Stripe. BRAIN Foundation is registered in Nepal. Receipts are issued on every gift; Nepal-based donors receive a 80G-equivalent certificate for tax purposes.
              </div>
            </div>
            <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '48px 48px' }}>
              <Eyebrow onInk>What your gift does</Eyebrow>
              <div style={{ marginTop: 28 }}>
                {[
                  ['USD 25 · monthly', 'Buys a finalist a return bus ticket from their district to Kathmandu — and a hot meal on the way.'],
                  ['USD 100 · monthly', "Underwrites one teacher's kit for a school running an AI club — printed, bound, and shipped."],
                  ['USD 500 · monthly', 'Funds one regional-round venue for the Olympiad — room, lunch, invigilators.'],
                  ['USD 1,000 · monthly', 'Supports a fellow for one month — stipend, housing, and research budget.'],
                ].map(([t, d]) => (
                  <div key={t} style={{ padding: '18px 0', borderTop: '1px solid rgba(245,241,234,0.15)' }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)' }}>{t}</div>
                    <div style={{ marginTop: 8, fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.4, color: 'var(--paper)' }}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Container>
      </section>

      <section style={{ padding: '96px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
        <Container>
          <SectionHead number="02" eyebrow="Other ways to support" title={<>A gift is one way. <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>There are others.</em></>}/>
          <RuleGrid cols={3}>
            {[
              ['Institutional grants', 'We accept programmatic grants from foundations and multilateral donors aligned with our charter. Contact our grants office.'],
              ['Corporate partnerships', 'Named scholarships, regional Olympiad hubs, and convening sponsorship. No product placements; no editorial influence.'],
              ['In-kind', 'Office space in a new city, travel for finalists, printing for publications, pro-bono legal counsel — we welcome thoughtful proposals.'],
              ['Legacy giving', "Remember BRAIN Foundation in your will. Our legal counsel can draw up a bequest or endowed fellowship in a loved one's name."],
              ['Volunteer', 'We maintain a small network of volunteer invigilators, translators, and workshop facilitators. Rolling applications.'],
              ['Amplify', 'Share our work. Subscribe to The Quarterly. Invite us to speak. Not everyone can give money.'],
            ].map(([h, d]) => (
              <div key={h} style={{ background: 'var(--paper)', padding: '28px 28px', minHeight: 200 }}>
                <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>
            ))}
          </RuleGrid>
        </Container>
      </section>

      <section style={{ padding: '96px 40px' }}>
        <Container>
          <SectionHead number="03" eyebrow="Where the money goes" title={<>Every rupee, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>accounted for.</em></>} lede="Our last financial year was independently audited by CA Nepal Associates. The full audit and annual report are public."/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            <div>
              {[
                ['Research & policy', 38, 'Working papers, briefings, fellowships.'],
                ['Olympiad & programs', 28, "Nepal AI Olympiad, internships, teachers' kits."],
                ['Convenings', 14, 'Venues, travel, proceedings.'],
                ['Operations', 12, 'Staff, office, legal, audit.'],
                ['Communications', 8, 'Publishing, translation, website.'],
              ].map(([l, p, d]) => (
                <div key={l} style={{ padding: '16px 0', borderTop: '1px solid var(--rule)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>{l}</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--accent)' }}>{p}%</div>
                  </div>
                  <div style={{ marginTop: 10, height: 6, background: 'var(--paper-200)' }}>
                    <div style={{ height: '100%', width: `${p * 2.2}%`, background: 'var(--accent)' }}/>
                  </div>
                  <div style={{ marginTop: 8, fontSize: 13, color: 'var(--ink-soft)' }}>{d}</div>
                </div>
              ))}
            </div>
            <div style={{ padding: '36px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
              <Eyebrow onInk>Accountability</Eyebrow>
              <p style={{ marginTop: 16, fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.55, color: 'var(--paper-200)' }}>
                No single donor contributes more than 15% of our operating budget. We decline funding that constrains our research agenda.
              </p>
              <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Button variant="accent">Annual report 2025 · PDF</Button>
                <Button variant="ghostInk">Audit · PDF</Button>
                <Button variant="ghostInk">Full funder list</Button>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </main>
  );
};

// ——— CAREERS ———
const CareersPage = ({ setRoute }) => (
  <main data-screen-label="Careers">
    <section style={{ padding: '96px 40px 72px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
          <Eyebrow number="01">Careers</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
              Come work <em style={{ fontStyle: 'italic' }}>in the rooms.</em>
            </h1>
            <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
              We hire slowly and for the long view. Our staff include researchers, civil servants, engineers, and communicators. We pay at Nepal-competitive rates with transparent bands published internally.
            </p>
          </div>
        </div>
      </Container>
    </section>

    <section style={{ padding: '48px 40px 96px' }}>
      <Container>
        <SectionHead number="02" eyebrow="Open roles" />
        <div style={{ borderTop: '1px solid var(--rule)' }}>
          {[
            ['Senior Policy Researcher', 'Research · Full-time', 'Kathmandu', 'Open · 30 May deadline'],
            ['Olympiad Programme Manager', 'Programs · Full-time', 'Kathmandu', 'Open · 15 May deadline'],
            ['Software Engineer (ML tooling)', 'Engineering · Full-time', 'Kathmandu / Remote (Nepal)', 'Open · rolling'],
            ['Communications Associate', 'Communications · Full-time', 'Kathmandu', 'Open · 02 June deadline'],
            ['Summer Interns (×6)', 'Programs · 10 weeks', 'Kathmandu', 'Open · 30 April deadline'],
            ['Fellowship 2026/27', 'Fellowship · 9 months', 'Kathmandu', 'Open · 15 July deadline'],
          ].map(([title, kind, loc, status]) => (
            <div key={title} style={{
              display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 160px 140px',
              gap: 24, alignItems: 'baseline',
              padding: '28px 0', borderBottom: '1px solid var(--rule)',
              cursor: 'pointer',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-200)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.25, letterSpacing: '-0.005em' }}>{title}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>{kind}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{loc}</div>
              <Tag tone="ember">{status}</Tag>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink)', borderBottom: '1px solid var(--accent)', paddingBottom: 2, justifySelf: 'end' }}>View role →</div>
            </div>
          ))}
        </div>
      </Container>
    </section>

    <section style={{ padding: '96px 40px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <SectionHead number="03" eyebrow="How we hire" title={<>A considered process, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>without theatre.</em></>}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
          {[
            ['01', 'A letter, not a CV', "A 500-word letter on why this role. We don't screen on CV first."],
            ['02', 'One conversation', 'An hour with two staff. No take-home tests, unless the role requires specific technical evidence.'],
            ['03', 'A small piece of work', 'Paid, and only if the role requires it. Never longer than four hours.'],
            ['04', 'A decision in two weeks', "If we're not going to hire you, we tell you why — briefly, but usefully."],
          ].map(([n, h, d]) => (
            <div key={n} style={{ padding: '20px 0', borderTop: '2px solid var(--ink)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--accent)' }}>{n}</div>
              <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 22, margin: '10px 0 10px', letterSpacing: '-0.005em' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.55, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>

    <section style={{ padding: '96px 40px' }}>
      <Container>
        <SectionHead number="04" eyebrow="What we offer" title={<>Modest but serious, <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>and stated plainly.</em></>} />
        <RuleGrid cols={3}>
          {[
            ['Transparent pay bands', 'Internal pay bands are published to all staff. No negotiation theatre.'],
            ['Four-day week', 'Thursday is a no-meeting day. Fridays are optional for most roles.'],
            ['A learning budget', 'USD 1,500 per year, per person, for books, courses, conferences.'],
            ['Health & leave', 'Full health cover for staff and dependants. Six weeks annual leave. Paid sabbatical every five years.'],
            ['A quiet office', 'A bright, book-lined office in Kupondole. Sit at a desk, or on the terrace.'],
            ['Real work', 'Small team, load-bearing work, authorship on your name, no corporate theatre.'],
          ].map(([h, d]) => (
            <div key={h} style={{ background: 'var(--paper)', padding: '28px 28px' }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 22, margin: '0 0 10px', letterSpacing: '-0.005em' }}>{h}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.55, margin: 0 }}>{d}</p>
            </div>
          ))}
        </RuleGrid>
      </Container>
    </section>
  </main>
);

// ——— CONTACT ———
const ContactPage = ({ setRoute }) => (
  <main data-screen-label="Contact">
    <section style={{ padding: '96px 40px 72px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48 }}>
          <Eyebrow number="01">Contact</Eyebrow>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
              Write to us. <em style={{ fontStyle: 'italic' }}>We read everything.</em>
            </h1>
            <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
              A named person at each desk. A one-working-day acknowledgement on every email. For press, for partnership, for a comment on a paper — or just to disagree.
            </p>
          </div>
        </div>
      </Container>
    </section>

    <section style={{ padding: '0 40px 96px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div style={{ padding: '40px 0', borderTop: '1px solid var(--rule)' }}>
            <Eyebrow>Send a note</Eyebrow>
            <form onSubmit={e => { e.preventDefault(); alert('Thank you — we will be in touch.'); }} style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {[['name', 'Your name'], ['email', 'Email address']].map(([n, l]) => (
                  <label key={n} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{l}</span>
                    <input required style={{ padding: '12px 14px', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 2, fontFamily: 'var(--sans)', fontSize: 14 }}/>
                  </label>
                ))}
              </div>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Reason</span>
                <select style={{ padding: '12px 14px', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 2, fontFamily: 'var(--sans)', fontSize: 14 }}>
                  <option>General enquiry</option>
                  <option>Press</option>
                  <option>Partnership</option>
                  <option>Olympiad</option>
                  <option>A comment on a paper</option>
                  <option>Donation / support</option>
                  <option>Something else</option>
                </select>
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Your note</span>
                <textarea rows={6} style={{ padding: '14px 14px', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 2, fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.55, resize: 'vertical' }}/>
              </label>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
                <div style={{ fontSize: 12, color: 'var(--ink-soft)' }}>We'll reply within one working day.</div>
                <Button variant="primary">Send note</Button>
              </div>
            </form>
          </div>

          <div style={{ padding: '40px 0 40px 48px', borderTop: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)' }}>
            <Eyebrow>Desks</Eyebrow>
            <div style={{ marginTop: 20 }}>
              {[
                ['General', 'hello@brainfoundation.np', 'Dev Karki · Operations'],
                ['Press', 'press@brainfoundation.np', 'Pratima Gurung · Communications'],
                ['Research', 'research@brainfoundation.np', 'Bikram Adhikari · Director'],
                ['Olympiad', 'olympiad@brainfoundation.np', 'Aman Joshi · Coordinator'],
                ['Partnerships', 'partners@brainfoundation.np', 'Maya Thapa · Convenings'],
                ['Careers', 'careers@brainfoundation.np', 'Reshma Sapkota · Operations'],
              ].map(([d, e, p]) => (
                <div key={d} style={{ padding: '16px 0', borderBottom: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '100px 1fr auto', gap: 16, alignItems: 'baseline' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>{d}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)' }}>{e}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 4 }}>{p}</div>
                  </div>
                </div>
              ))}
            </div>

            <Eyebrow style={{ marginTop: 40 }}>Office</Eyebrow>
            <div style={{ marginTop: 16, fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.5, color: 'var(--ink-700)' }}>
              BRAIN Foundation<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>Kupondole Heights, Block C, 2/F</em><br/>
              Lalitpur · 44600 · Nepal
            </div>
            <div style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-700)', lineHeight: 1.8 }}>
              +977 1 555 0200<br/>
              Mon–Thu · 09:30–17:30 NPT
            </div>

            <div style={{ marginTop: 32, aspectRatio: '4/3', background: 'repeating-linear-gradient(45deg,#ebe5d9 0 12px,#ded6c5 12px 24px)', padding: 18, display: 'flex', alignItems: 'flex-end', color: 'var(--ink-soft)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              [ Map · Kupondole, Lalitpur ]
            </div>
          </div>
        </div>
      </Container>
    </section>
  </main>
);

Object.assign(window, { SupportPage, CareersPage, ContactPage });
