function ApiRetention() {
  const rows = [
    { k: 'Interactions',    v: '24 months',        note: 'GDPR-compliant' },
    { k: 'Rate limits',     v: '2 hours',          note: 'sliding window in D1' },
    { k: 'Audit log',       v: '90 days',          note: 'tamper-evident, queryable' },
    { k: 'Usage counters',  v: 'monthly reset',    note: '1st of month 00:00 UTC via Cloudflare Cron' },
  ];
  return (
    <section id="retention" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Retention & compliance</div>
          <h2 className="h2">What we store, and for how long.</h2>
        </div>
        <table className="retention-table">
          <thead>
            <tr>
              <th>Data class</th>
              <th>Retention</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.k}>
                <td className="cell-name">{r.k}</td>
                <td className="cell-retention mono">{r.v}</td>
                <td className="cell-desc">{r.note}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
window.ApiRetention = ApiRetention;