function ApiReference() {
  const groups = [
    {
      name: 'Scoring', count: 6,
      endpoints: [
        { m: 'POST', p: '/v1/score',                               d: 'Score a single oversight interaction. Returns composite JIS + 7-dim breakdown.' },
        { m: 'POST', p: '/v1/score/batch',                         d: 'Score up to 1,000 interactions in a single request. Chunked response.' },
        { m: 'GET',  p: '/v1/operator/:operator_id/profile',       d: 'Current JIS, 30-day decay projection, per-dimension history for one operator.' },
        { m: 'GET',  p: '/v1/organization/dashboard',              d: 'Org-level JIS distribution, per-domain breakdown, alert summary.' },
        { m: 'POST', p: '/v1/maintenance/recommend',               d: 'Request next Invisible Maintenance intervention for an operator.' },
        { m: 'GET',  p: '/v1/compliance/report',                   d: 'Generate Article 14 machine-readable compliance report. JSON, CSV, or PDF.' },
      ],
    },
    {
      name: 'Admin', count: 3,
      endpoints: [
        { m: 'POST', p: '/v1/admin/key/rotate',   d: 'Rotate an API key with zero downtime. Old key valid for 24h grace window.' },
        { m: 'POST', p: '/v1/admin/key/revoke',   d: 'Immediately revoke an API key. Takes effect within 60 seconds at edge.' },
        { m: 'GET',  p: '/v1/admin/audit-log',    d: 'Query tamper-evident audit log. 11 event types, 90-day retention.' },
      ],
    },
    {
      name: 'Public demo', count: 2,
      endpoints: [
        { m: 'POST', p: '/assessments',               d: 'Start an anonymous 5-minute assessment session. No API key required.' },
        { m: 'GET',  p: '/assessments/:sessionId',    d: 'Retrieve an assessment session\u2019s JIS and breakdown.' },
      ],
    },
    {
      name: 'Meta', count: 2,
      endpoints: [
        { m: 'GET', p: '/',    d: 'Service root. Returns build hash, K8 envelope version, uptime.' },
        { m: 'GET', p: '/v1',  d: 'API v1 catalog. Machine-readable endpoint list.' },
      ],
    },
  ];
  return (
    <section id="reference" className="section section-surface">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Endpoint reference · v1.0</div>
          <h2 className="h2">Thirteen endpoints. Four groups.</h2>
          <p className="section-lede">
            Every endpoint returns a K8 v2 envelope: <span className="mono">{'{ ok, data, error, meta }'}</span>. All
            responses include <span className="mono">meta.request_id</span> and <span className="mono">meta.latency_ms</span>.
          </p>
        </div>

        <div className="ref-groups">
          {groups.map(g => (
            <div className="ref-group" key={g.name}>
              <header className="ref-group-head">
                <h3 className="ref-group-name">{g.name}</h3>
                <div className="ref-group-count">{g.count} endpoint{g.count === 1 ? '' : 's'}</div>
              </header>
              <div className="ref-list">
                {g.endpoints.map(e => (
                  <div className="ref-row" key={e.p}>
                    <div className={`ref-method ref-${e.m.toLowerCase()}`}>{e.m}</div>
                    <div className="ref-path mono">{e.p}</div>
                    <div className="ref-desc">{e.d}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ApiReference = ApiReference;