/* Trust Center — public-facing security posture page.
   attestia.ai/trust  — no auth, lives outside the app shell. */

const CERTS = [
  { n: "SOC 2", level: "Type II", status: "current", date: "Renewed Sep 2026", auditor: "KPMG", color: "#2f6e47" },
  { n: "HIPAA", level: "BAA-eligible", status: "current", date: "BAA executed", auditor: "Internal + Schellman", color: "#2f6e47" },
  { n: "GDPR", level: "Compliant", status: "current", date: "DPA available", auditor: "Outside counsel", color: "#2f6e47" },
  { n: "ISO 27001", level: "In progress", status: "progress", date: "Audit Q1 2027", auditor: "Schellman", color: "#9a6418" },
  { n: "EU AI Act", level: "Article 12", status: "current", date: "Ready · Aug 2026 deadline", auditor: "Self-attested", color: "#2f6e47" },
  { n: "FDA 21 CFR 11", level: "Compliant", status: "current", date: "Validation pack available", auditor: "Self-attested", color: "#2f6e47" },
];

const SUBPROC = [
  { name: "Amazon Web Services", svc: "Infrastructure · object storage", data: "Encrypted evidence chains, sources, logs", region: "us-east-1", baa: true, dpa: true },
  { name: "OpenAI", svc: "LLM judge · model B (Claude)", data: "Redacted claim text only · PHI scrubbed pre-flight", region: "US", baa: true, dpa: true },
  { name: "Anthropic", svc: "LLM judge · model B (Claude)", data: "Redacted claim text only · PHI scrubbed pre-flight", region: "US", baa: true, dpa: true },
  { name: "Google Cloud (Gemini)", svc: "LLM judge · model C (Gemini)", data: "Redacted claim text only · PHI scrubbed pre-flight", region: "US", baa: true, dpa: true },
  { name: "GitHub", svc: "Public bulletin commits", data: "Daily Merkle roots only · no customer data", region: "Global", baa: false, dpa: false },
  { name: "Stripe", svc: "Billing", data: "Billing contact + payment method · no PHI", region: "US", baa: false, dpa: true },
  { name: "Auth0", svc: "Authentication", data: "User identity · tenant metadata · no PHI", region: "US", baa: true, dpa: true },
  { name: "Vercel", svc: "Dashboard hosting", data: "Static assets · no PHI", region: "Global edge", baa: false, dpa: true },
];

const TrustCenter = ({ onExit }) => {
  return (
    <div className="trust">
      <header className="auditor__chrome">
        <div className="auditor__chrome-inner">
          <div className="auditor__brand">
            <span className="auditor__brand-mark">Attestia</span>
            <span className="auditor__brand-sub">Trust Center</span>
          </div>
          <nav className="trust-nav">
            <a href="#overview">Overview</a>
            <a href="#certifications">Certifications</a>
            <a href="#data">Data flow</a>
            <a href="#subprocessors">Sub-processors</a>
            <a href="#faq">FAQ</a>
          </nav>
          <div className="spacer" />
          <Button variant="ghost" size="sm" iconRight={window.Icon.external({ size: 11 })} onClick={onExit}>Back to product</Button>
        </div>
      </header>

      <main className="trust__main">
        {/* Hero */}
        <section className="trust-hero" id="overview">
          <div className="text-xs mono muted" style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Trust Center · last updated 2026-10-22</div>
          <h1 className="trust-hero__title"><em>Built for proof, not promises.</em></h1>
          <p className="trust-hero__sub">
            Attestia processes evidence about regulated AI. The chain we produce is verifiable without our cooperation —
            but our infrastructure itself also has to clear the bar. This page documents how.
          </p>
          <div className="trust-hero__stats">
            <div className="trust-stat"><div className="trust-stat__num mono">6</div><div className="trust-stat__lbl">Frameworks attested</div></div>
            <div className="trust-stat"><div className="trust-stat__num mono">99.97%</div><div className="trust-stat__lbl">Uptime (90d)</div></div>
            <div className="trust-stat"><div className="trust-stat__num mono">0</div><div className="trust-stat__lbl">Reportable incidents (24mo)</div></div>
            <div className="trust-stat"><div className="trust-stat__num mono">14m</div><div className="trust-stat__lbl">Median seal latency</div></div>
          </div>
          <div className="row gap-2" style={{ marginTop: 32 }}>
            <Button variant="primary" icon={window.Icon.download({ size: 13 })}>Request SOC 2 report</Button>
            <Button variant="secondary" icon={window.Icon.download({ size: 13 })}>Download DPA</Button>
            <Button variant="ghost" icon={window.Icon.external({ size: 12 })}>View status page</Button>
          </div>
        </section>

        {/* Certifications */}
        <section id="certifications">
          <h2 className="auditor-h2"><em>Certifications &amp; attestations.</em></h2>
          <p className="text-sm muted" style={{ marginTop: 4, maxWidth: "60ch" }}>
            Independently audited. Reports available under mutual NDA — request directly from your sales contact or via the buttons above.
          </p>
          <div className="cert-grid">
            {CERTS.map((c) => (
              <div key={c.n} className={`cert-card cert-card--${c.status}`}>
                <div className="cert-card__head">
                  <div className="cert-card__seal">
                    <CertSeal label={c.n} color={c.color} />
                  </div>
                  <div>
                    <div className="cert-card__name">{c.n}</div>
                    <div className="cert-card__level">{c.level}</div>
                  </div>
                  {c.status === "current"
                    ? <Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Current</Badge>
                    : <Badge tone="partial" icon={window.Icon.clock({ size: 11 })}>In progress</Badge>}
                </div>
                <div className="cert-card__meta">
                  <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Date</span><span>{c.date}</span></div>
                  <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Auditor</span><span>{c.auditor}</span></div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Data flow diagram */}
        <section id="data">
          <h2 className="auditor-h2"><em>How your data flows.</em></h2>
          <p className="text-sm muted" style={{ marginTop: 4, maxWidth: "64ch" }}>
            Every wrapped call passes through redaction <em>before</em> a single byte reaches a third-party LLM. PHI is replaced with deterministic surrogates and original spans are hashed; the surrogates are never reversed.
          </p>
          <div className="flow">
            {[
              { n: "01", t: "Your app", s: "OpenAI client wrapped by @attestia/sdk", tag: "Tenant edge" },
              { n: "02", t: "Redaction", s: "PHI detected, surrogates substituted, originals hashed", tag: "US-East · BAA region" },
              { n: "03", t: "LLM provider", s: "Receives only redacted text", tag: "OpenAI / Anthropic / Gemini" },
              { n: "04", t: "Multi-judge", s: "Three judges score each claim independently", tag: "US-East · BAA region" },
              { n: "05", t: "Seal", s: "Ed25519 signature, Merkle leaf, content-addressed sources", tag: "Tenant-private storage" },
              { n: "06", t: "Bulletin", s: "Daily root committed to public GitHub repo", tag: "GitHub · public" },
            ].map((s) => (
              <div key={s.n} className="flow__step">
                <div className="flow__n mono">{s.n}</div>
                <div className="flow__body">
                  <div className="flow__title">{s.t}</div>
                  <div className="flow__sub">{s.s}</div>
                  <div className="flow__tag mono">{s.tag}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Sub-processors */}
        <section id="subprocessors">
          <h2 className="auditor-h2"><em>Sub-processors.</em></h2>
          <p className="text-sm muted" style={{ marginTop: 4, maxWidth: "64ch" }}>
            Every vendor that handles tenant data, what they receive, and the legal basis. Material changes are notified to compliance contacts 30 days in advance.
          </p>
          <div className="card" style={{ overflow: "hidden", marginTop: 16 }}>
            <table className="table">
              <thead>
                <tr><th>Vendor</th><th>Service</th><th>Data handled</th><th>Region</th><th>BAA</th><th>DPA</th></tr>
              </thead>
              <tbody>
                {SUBPROC.map((p) => (
                  <tr key={p.name}>
                    <td className="fw-600">{p.name}</td>
                    <td className="text-sm">{p.svc}</td>
                    <td className="text-sm muted">{p.data}</td>
                    <td className="text-sm mono">{p.region}</td>
                    <td>{p.baa ? <Badge tone="sealed" icon={window.Icon.checkSimple({ size: 10 })}>Yes</Badge> : <Badge tone="neutral">N/A</Badge>}</td>
                    <td>{p.dpa ? <Badge tone="sealed" icon={window.Icon.checkSimple({ size: 10 })}>Yes</Badge> : <Badge tone="neutral">N/A</Badge>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="row gap-2" style={{ marginTop: 12 }}>
            <Button variant="ghost" size="sm" icon={window.Icon.download({ size: 12 })}>Download full DPA</Button>
            <Button variant="ghost" size="sm" icon={window.Icon.bell({ size: 12 })}>Subscribe to sub-processor changes</Button>
          </div>
        </section>

        {/* FAQ */}
        <section id="faq">
          <h2 className="auditor-h2"><em>Security FAQ.</em></h2>
          <div className="faq-list">
            <FAQItem
              q="Can my data be used to train your judge models?"
              a="No. Tenant data is contractually excluded from any training, evaluation, or fine-tuning of judges. Judge models are versioned and content-addressed in the evidence chain so this is auditable."
            />
            <FAQItem
              q="What happens if Attestia is acquired or shuts down?"
              a="The verify protocol is fully open. Tenants can verify every existing trace using public-key crypto and the public GitHub bulletin without our cooperation. Source tarballs and the verify CLI binary hashes are escrowed."
            />
            <FAQItem
              q="Where is the data physically stored?"
              a="Healthcare tenants are routed to us-east-1 with a Business Associate Agreement. EU tenants have eu-west-1 with appropriate transfer safeguards. Tenant region is set at signup and is immutable."
            />
            <FAQItem
              q="How quickly is a security incident disclosed?"
              a="Material incidents: notification within 72 hours per GDPR Article 33 and HIPAA breach notification timelines. Pre-material incidents are summarized in the next monthly digest."
            />
            <FAQItem
              q="Can I delete my data (GDPR Article 17)?"
              a="Content is purged on request within 30 days. Cryptographic hashes remain in the evidence chain — these contain no PHI but make the deletion itself auditable. Erasure is logged in the audit trail."
            />
          </div>
        </section>

        <footer className="auditor-footer">
          <span className="muted text-xs">Last updated 2026-10-22 · this page is committed to today's public bulletin</span>
          <div className="spacer" />
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">security@attestia.ai</a>
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">PGP key {window.Icon.external({ size: 10 })}</a>
        </footer>
      </main>
    </div>
  );
};

const CertSeal = ({ label, color }) => (
  <svg width="56" height="56" viewBox="0 0 56 56">
    <circle cx="28" cy="28" r="26" fill="none" stroke={color} strokeWidth="1" opacity="0.5" />
    <circle cx="28" cy="28" r="22" fill="none" stroke={color} strokeWidth="1.2" />
    <text x="28" y="32" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="7" fill={color} fontWeight="600" letterSpacing="0.5">{label}</text>
  </svg>
);

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <button className={`faq ${open ? "faq--open" : ""}`} onClick={() => setOpen((o) => !o)}>
      <div className="faq__head">
        <span className="faq__q">{q}</span>
        <span className="faq__icon">{open ? window.Icon.minus({ size: 14 }) : window.Icon.plus({ size: 14 })}</span>
      </div>
      {open && <div className="faq__a">{a}</div>}
    </button>
  );
};

window.TrustCenter = TrustCenter;