const SIGNALS = [
  { k: '0 bytes', v: 'leave your laptop' },
  { k: 'Local SQLite', v: 'not a cloud database' },
  { k: 'Zero telemetry', v: 'no usage tracking, ever' },
  { k: 'No screenshots', v: 'uploaded, ever' },
];

const TraceTrust = () => {
  const t = window.TRACE;
  return (
    <section id="privacy" className="trace-trust" style={{
      padding: '40px 48px 100px', fontFamily: t.sans,
      borderTop: `1px solid ${t.hair}`,
    }}>
      <div className="trace-trust-panel" style={{
        maxWidth: 1080, margin: '0 auto',
        background: t.bgDark, color: t.inkDark, borderRadius: 24,
        padding: '56px 52px', display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 48, alignItems: 'center',
      }}>
        <div style={{ minWidth: 0 }}>
          <Eyebrow color="rgba(252,247,248,0.55)" style={{ marginBottom: 16 }}>Privacy, by construction</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(26px, 3vw, 36px)', lineHeight: 1.12,
            letterSpacing: '-0.02em', fontWeight: 700, margin: '0 0 16px',
          }}>
            The model runs on your machine. So does everything it sees.
          </h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(252,247,248,0.72)', margin: 0 }}>
            No server ever receives your window titles, app names, URLs, or
            screenshots. Trace classifies locally and only ever exports the
            timesheet you choose to share.
          </p>
        </div>
        <div className="trace-trust-signals" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 16, minWidth: 0 }}>
          {SIGNALS.map(s => (
            <div key={s.k} style={{
              border: '1px solid rgba(252,247,248,0.14)', borderRadius: 14,
              padding: '18px 16px', background: 'rgba(252,247,248,0.03)',
            }}>
              <div style={{ fontFamily: t.serif, fontSize: 22, color: t.sky }}>{s.k}</div>
              <div style={{ fontSize: 12.5, color: 'rgba(252,247,248,0.6)', marginTop: 4 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        maxWidth: 1080, margin: '28px auto 0', textAlign: 'center',
        fontSize: 13.5, color: t.faint,
      }}>
        Built for teams too — Admin Sync for approvals, invoicing & reporting is coming soon.
      </div>
    </section>
  );
};

window.TraceTrust = TraceTrust;