// ——— RESEARCH INDEX ———
const ResearchPage = ({ setRoute }) => {
  const [filter, setFilter] = React.useState('all');
  const [topic, setTopic] = React.useState('all');
  const items = [
    { kind: 'Working paper · 02', title: 'Who audits the auditors?', italic: 'On evaluation standards for public-sector AI.', date: 'April 2026', length: '48 pp', cat: 'paper', topic: 'governance' },
    { kind: 'Briefing', title: 'A tool is only as', italic: 'responsible as the room it was built in.', date: '14 April 2026', length: '05 min', cat: 'briefing', topic: 'ethics' },
    { kind: 'Perspective · 03', title: 'Five seats at the table.', italic: 'None of them ours.', date: '02 April 2026', length: '08 min', cat: 'perspective', topic: 'governance' },
    { kind: 'Letter', title: 'To the Minister,', italic: 'on meaningful consent.', date: '22 March 2026', length: '03 min', cat: 'letter', topic: 'policy' },
    { kind: 'Working paper · 01', title: 'On the stewardship', italic: 'of learning machines.', date: 'January 2026', length: '32 pp', cat: 'paper', topic: 'ethics' },
    { kind: 'Briefing', title: 'Public-interest evaluation,', italic: 'a short defence.', date: '18 February 2026', length: '06 min', cat: 'briefing', topic: 'governance' },
    { kind: 'Report', title: 'State of AI in Nepal', italic: '2026 — an institutional audit.', date: 'February 2026', length: '84 pp', cat: 'paper', topic: 'policy' },
    { kind: 'Perspective · 02', title: 'What we mean', italic: 'when we say "responsible".', date: '12 January 2026', length: '10 min', cat: 'perspective', topic: 'ethics' },
    { kind: 'Briefing', title: 'Procurement rules', italic: 'for machine-learning systems.', date: '06 January 2026', length: '07 min', cat: 'briefing', topic: 'policy' },
  ];
  const filters = [
    { k: 'all', l: 'All' },
    { k: 'paper', l: 'Working papers' },
    { k: 'briefing', l: 'Briefings' },
    { k: 'perspective', l: 'Perspectives' },
    { k: 'letter', l: 'Letters' },
  ];
  const topics = [
    { k: 'all', l: 'All topics' },
    { k: 'governance', l: 'Governance' },
    { k: 'ethics', l: 'Ethics' },
    { k: 'policy', l: 'Policy' },
  ];
  const shown = items.filter(i => (filter === 'all' || i.cat === filter) && (topic === 'all' || i.topic === topic));
  return (
    <main data-screen-label="Research">
      <section style={{ padding: '96px 40px 48px' }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
            <Eyebrow number="01">Research</Eyebrow>
            <div>
              <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(56px,7vw,92px)', lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0 }}>
                Everything <em style={{ fontStyle: 'italic' }}>we've published,</em><br/>and why.
              </h1>
              <p style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 680 }}>
                Working papers are the long view. Briefings respond to a decision in flight. Perspectives are where we think out loud. Letters are on-the-record positions.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* Featured paper */}
      <section style={{ padding: '0 40px 72px' }}>
        <Container>
          <div style={{
            background: 'var(--ink)', color: 'var(--paper)',
            display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 0, alignItems: 'stretch',
          }}>
            <div style={{ padding: '56px 56px' }}>
              <Eyebrow onInk>Featured · Working paper · 02 / 2026</Eyebrow>
              <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.015em', margin: '16px 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: 15, lineHeight: 1.65, color: 'var(--paper-200)', maxWidth: '46ch' }}>
                Forty-eight pages, four questions, one proposal: a publicly-funded audit infrastructure for machine-learning systems in government use.
              </p>
              <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
                <Button variant="accent" onClick={() => setRoute('reading')}>Read the paper</Button>
                <Button variant="ghostInk">Download · 48 pp</Button>
              </div>
            </div>
            <ImgSlot label="Figure 01 · audit infrastructure diagram" tone="dark" aspect="auto" style={{ aspectRatio: 'auto', height: '100%' }}/>
          </div>
        </Container>
      </section>

      <section style={{ padding: '0 40px 96px' }}>
        <Container>
          {/* Filters */}
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 24, alignItems: 'center', padding: '22px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', marginBottom: 32 }}>
            <Eyebrow>Filter</Eyebrow>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {filters.map(f => (
                <button key={f.k} onClick={() => setFilter(f.k)}
                  style={{
                    background: filter === f.k ? 'var(--ink)' : 'transparent',
                    color: filter === f.k ? 'var(--paper)' : 'var(--ink-soft)',
                    border: 0, padding: '8px 14px',
                    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
                    textTransform: 'uppercase', cursor: 'pointer', borderRadius: 2,
                  }}>{f.l}</button>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {topics.map(t => (
                <button key={t.k} onClick={() => setTopic(t.k)}
                  style={{
                    background: 'transparent',
                    color: topic === t.k ? 'var(--accent)' : 'var(--ink-soft)',
                    border: 0, padding: '8px 10px',
                    fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
                    textTransform: 'uppercase', cursor: 'pointer',
                    borderBottom: topic === t.k ? '1px solid var(--accent)' : '1px solid transparent',
                  }}>{t.l}</button>
              ))}
            </div>
          </div>

          <RuleGrid cols={3}>
            {shown.map((i, idx) => (
              <ArticleCard key={idx} kind={i.kind} title={i.title} titleItalic={i.italic}
                date={i.date} length={i.length} onClick={() => setRoute('reading')} />
            ))}
          </RuleGrid>

          {shown.length === 0 && (
            <div style={{ padding: '80px 0', textAlign: 'center', color: 'var(--ink-soft)', fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic' }}>
              No items for this filter — try another.
            </div>
          )}
        </Container>
      </section>
    </main>
  );
};

// ——— READING VIEW ———
const ReadingPage = ({ setRoute }) => (
  <main data-screen-label="Reading">
    <article style={{ padding: '72px 40px 48px' }}>
      <div style={{ maxWidth: 780, margin: '0 auto' }}>
        <div style={{ marginBottom: 24, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          <a onClick={() => setRoute('research')} style={{ cursor: 'pointer', color: 'var(--ink-soft)' }}>← All research</a>
        </div>
        <Eyebrow>Working paper · 02 / 2026 · 48 pp</Eyebrow>
        <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(44px,5.5vw,68px)', lineHeight: 1.02, letterSpacing: '-0.02em', margin: '24px 0 28px' }}>
          Who audits the auditors? <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>On evaluation standards for public-sector AI.</em>
        </h1>
        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', paddingBottom: 28, borderBottom: '1px solid var(--rule)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
          <span>By Bikram Adhikari · Dr. Anuradha Shrestha</span>
          <span>·</span>
          <span>18 April 2026</span>
          <span>·</span>
          <span>Policy &amp; Standards</span>
        </div>
        <div style={{ marginTop: 36, fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.5, color: 'var(--ink-700)', fontStyle: 'italic' }}>
          A proposal for independent, publicly-funded audit infrastructure — and the four questions that should decide what an audit counts for.
        </div>
        <div style={{ marginTop: 40, fontFamily: 'var(--sans)', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-700)' }}>
          <p>AI systems should be tested on the people they'll be used on — not the people who build them. This is the premise of the paper, and the premise of the Foundation: that the institutions now shaping the field owe a serious account to the publics already living with its consequences.</p>
          <p>We open with a short history of how the word "audit" came to mean, in the context of machine-learning deployments, a great many incompatible things. Some of that incompatibility is honest — the field is young — and some of it is strategic.</p>

          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.015em', margin: '48px 0 20px' }}>
            One — The four questions
          </h2>
          <p>Every audit worth the name answers four questions. Who commissioned it? Who can read it? What can it compel? And what happens if the finding is adverse? We argue that the first two are contested in bad faith; the second two, hardly at all.</p>

          <p style={{ fontFamily: 'var(--serif)', fontSize: 26, fontStyle: 'italic', color: 'var(--ink)', margin: '40px 0', lineHeight: 1.35, paddingLeft: 24, borderLeft: '2px solid var(--accent)' }}>
            Who, precisely, is this for?
          </p>
          <p>That is the question we return to, in every chapter. Not as rhetoric — as a test the reader should apply to each proposed standard, each convening, each working group, each of our own recommendations.</p>

          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.015em', margin: '48px 0 20px' }}>
            Two — What a standard can bind
          </h2>
          <p>A standard is only as strong as the institution willing to enforce it. In Nepal, and in most jurisdictions we surveyed, the enforcing institution is either absent, under-resourced, or captured by the very entities it is asked to audit. The paper proposes a remedy: a publicly-funded standing office, reporting directly to parliament, with a narrow but binding remit.</p>
        </div>

        <div style={{ marginTop: 56, padding: '28px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <Eyebrow>Cite this paper</Eyebrow>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button variant="ghost">Download PDF</Button>
            <Button variant="ghost">Copy citation</Button>
            <Button variant="primary" onClick={() => setRoute('research')}>All research</Button>
          </div>
        </div>

        <div style={{ marginTop: 48 }}>
          <Eyebrow>Authors</Eyebrow>
          <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>Bikram Adhikari</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 4 }}>Director, Research &amp; Policy</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>Dr. Anuradha Shrestha</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 4 }}>Executive Director</div>
            </div>
          </div>
        </div>
      </div>
    </article>

    {/* Related */}
    <section style={{ padding: '72px 40px 96px', background: 'var(--paper-200)', borderTop: '1px solid var(--rule)', marginTop: 72 }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 48, marginBottom: 32, alignItems: 'baseline' }}>
          <Eyebrow number="02">Related</Eyebrow>
          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.015em', margin: 0 }}>
            Where this sits <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>in the catalogue.</em>
          </h2>
          <TextLink onClick={() => setRoute('research')}>All →</TextLink>
        </div>
        <RuleGrid cols={3}>
          <ArticleCard kind="Briefing" title="Public-interest evaluation," titleItalic="a short defence." date="18 February 2026" length="06 min" onClick={() => setRoute('reading')} />
          <ArticleCard kind="Working paper · 01" title="On the stewardship" titleItalic="of learning machines." date="January 2026" length="32 pp" onClick={() => setRoute('reading')} />
          <ArticleCard kind="Briefing" title="Procurement rules" titleItalic="for machine-learning systems." date="06 January 2026" length="07 min" onClick={() => setRoute('reading')} />
        </RuleGrid>
      </Container>
    </section>
  </main>
);

Object.assign(window, { ResearchPage, ReadingPage });