function Authentication() {
  const items = [
    { h: 'Header-based',   b: 'X-API-Key header (primary). api_key body field deprecated 2026-04-17, sunset 2026-07-15.' },
    { h: 'Key format',     b: 'ck_live_<26-char Crockford base32>. 8-char prefix non-secret and indexed for lookup.' },
    { h: 'At-rest hashing', b: 'Keys SHA-256 hashed with pepper in Cloudflare Secrets Store. Pepper never in D1, logs, or git.' },
    { h: 'Uniform timing',  b: '80 ms uniform timing floor across all auth outcomes. Blocks key-enumeration side channels.' },
    { h: 'Rate limits',     b: 'Two-layer: 60 req/60 s per IP pre-auth (fail closed) + 1,000 req/60 s per key post-auth.' },
    { h: 'Per-org CORS',   b: 'Per-org allowed_origins allowlist + env-level global allowlist for preflight. Unknown origins on OPTIONS return 403 with no reflection.' },
  ];
  return (
    <section id="auth" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Authentication</div>
          <h2 className="h2">One header. One key. Two layers of defense.</h2>
        </div>
        <div className="auth-grid">
          {items.map(i => (
            <div className="auth-item" key={i.h}>
              <div className="auth-h">{i.h}</div>
              <p className="auth-b">{i.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Authentication = Authentication;