/* global React, Common */
const { Eyebrow, SectionTitle, SectionLead } = Common;

function PrivacySection() {
  const points = [
    { k: "0", l: "telemetry, if you opt out", d: "anonymous counts only. flip one toggle and we get nothing, ever." },
    { k: "0", l: "accounts created", d: "no signup, no email, no waitlist" },
    { k: "0", l: "audio bytes saved to disk", d: "ring buffer in RAM, then gone" },
    { k: "AES-256-GCM", l: "key encryption", d: "if you connect a cloud STT, your keys live in the OS keychain" },
  ];
  return (
    <section style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={9} color="#4ADE80">privacy</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            Your voice doesn't<br/>leave your machine.
          </SectionTitle>
          <SectionLead align="center">
            Default mode is fully offline. The cloud is opt-in, explicit, and per-provider. We don't know who you are. We'd like to keep it that way.
          </SectionLead>
        </div>

        <div className="reveal privacy-grid" style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: 16, overflow: "hidden",
        }}>
          {points.map((p, i) => (
            <div key={i} style={{
              padding: "32px 28px", background: "var(--bg-deep)",
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 700,
                letterSpacing: "-0.03em", color: "var(--fg)",
                background: "linear-gradient(135deg, #34D399, #38BDF8)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              }}>{p.k}</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)",
                letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 4,
              }}>{p.l}</div>
              <div style={{ fontSize: 14, color: "var(--fg-muted)", marginTop: 8, lineHeight: 1.5 }}>{p.d}</div>
            </div>
          ))}
        </div>

        <div className="reveal" style={{
          marginTop: 16, padding: "16px 20px",
          background: "rgba(0,0,0,0.4)",
          border: "1px solid var(--line)",
          borderRadius: 12,
          fontFamily: "var(--font-mono)", fontSize: 12,
          color: "var(--fg-faint)",
          lineHeight: 1.6,
        }}>
          <span style={{ color: "#4ADE80" }}>$</span> sudo lsof -i -P | grep -i dimmy
          <br/>
          <span style={{ color: "var(--fg-faint)" }}># nothing. as expected.</span>
        </div>
      </div>
    </section>
  );
}

window.PrivacySection = PrivacySection;