// Security & Compliance page
function SecurityPage({ onNavigate }) {
  return (
    <div className="page">
      <section className="hero" style={{ paddingTop: 100, paddingBottom: 60 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <span className="eyebrow rise" data-d="1">Security &amp; compliance</span>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 24, maxWidth: 1000 }}>
            Built for the bar set by <em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>NHS, government &amp; finance.</em>
          </h1>
          <p className="lead rise" data-d="3" style={{ marginTop: 28, maxWidth: 700 }}>
            We've been hosting clinical workloads, processing payments and serving government departments since 2016. Security isn't a feature on our roadmap — it's the foundation we built the platform on.
          </p>

          <div className="rise" data-d="4" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {[
              ["UK", "Data sovereignty"],
              ["CREST", "Pen-tested annually"],
              ["OWASP+", "Exceeds top-10 baseline"],
              ["ISO-aligned", "27001 controls mapped"],
            ].map(([k, v]) => (
              <div key={k} style={{ padding: 20, border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-elev)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 4 }}>{k}</div>
                <div className="mono" style={{ color: "var(--fg-faint)", fontSize: 11 }}>{v.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pillars */}
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <span className="eyebrow">Five pillars</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 56 }}>How we keep your data safe.</h2>

          <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
            {[
              {
                num: "01", t: "Application security",
                d: "CSRF and XSS protection in every form. Hashed passwords with bank-grade one-way algorithms. Account-lock and brute-force protection. IP-based rate limiting. SQL injection mitigation at the ORM layer.",
                items: ["OWASP Top 10 controls", "Parameterised queries", "Output encoding", "Content-Security-Policy headers", "HSTS + secure cookies"],
              },
              {
                num: "02", t: "Identity &amp; access",
                d: "Two-factor authentication out of the box (TOTP and SMS). SSO via Active Directory, Azure AD, Google Workspace and any SAML 2.0 IdP. Granular role-based access control with field-level permissions. Audit trail on every login.",
                items: ["2FA: TOTP &amp; SMS", "SAML 2.0 SSO", "Azure AD / AD / Google", "Field-level RBAC", "Session timeout policies"],
              },
              {
                num: "03", t: "Data protection",
                d: "Encryption at rest (AES-256) and in transit (TLS 1.3). UK data residency by default, EU/US on request. GDPR tooling baked in: consent ledger, configurable retention, right-to-erasure, data portability exports.",
                items: ["AES-256 at rest", "TLS 1.3 in transit", "UK residency default", "GDPR tooling built-in", "Configurable retention"],
              },
              {
                num: "04", t: "Auditing &amp; observability",
                d: "Every datastore writes a tamper-evident audit trail — who, what, when, before/after. Live security report flags weak configurations. Status panel surfaces health, performance and incident history in real time.",
                items: ["Immutable audit log", "Before/after snapshots", "Live security report", "Real-time status panel", "Anomaly alerting"],
              },
              {
                num: "05", t: "Operational security",
                d: "CREST-certified penetration testing on every major release. UK-only engineering team with vetted access. Incident response runbooks, on-call rotation, and a published status history. Continuous platform updates roll out without customer downtime.",
                items: ["CREST pen tests", "UK-only access", "Vetted engineers", "On-call rotation", "Zero-downtime deploys"],
              },
            ].map((p) => (
              <div key={p.num} style={{ background: "var(--bg-elev)", padding: 40, display: "grid", gridTemplateColumns: "100px 1fr 1fr", gap: 32, alignItems: "start" }}>
                <div className="mono" style={{ color: "var(--fg-faint)", fontSize: 14 }}>{p.num}</div>
                <div>
                  <h3 className="h-medium" style={{ marginBottom: 12 }} dangerouslySetInnerHTML={{ __html: p.t }} />
                  <p className="body" style={{ fontSize: 15 }} dangerouslySetInnerHTML={{ __html: p.d }} />
                </div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.items.map(it => (
                    <li key={it} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--fg-muted)" }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ color: "var(--accent)", flexShrink: 0 }}><path d="M5 13l4 4L19 7"/></svg>
                      <span dangerouslySetInnerHTML={{ __html: it }} />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Compliance frameworks */}
      <section style={{ background: "var(--bg-sunken)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <span className="eyebrow">Compliance</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 16, maxWidth: 700 }}>The frameworks we work to.</h2>
          <p className="body" style={{ marginBottom: 48, maxWidth: 600 }}>
            We've answered enough enterprise security questionnaires to know which controls customers ask about. Here's where we stand.
          </p>
          <div className="grid-2" style={{ gap: 16 }}>
            {[
              ["UK GDPR &amp; Data Protection Act 2018", "Full compliance. Consent ledger, retention policies, erasure tooling, DPIA support and Data Processor Agreements available.", "Compliant"],
              ["NHS Data Security &amp; Protection Toolkit", "Submitted annually. We host clinical applications across multiple NHS Trusts under DSPT.", "Submitted annually"],
              ["Crown Commercial G-Cloud", "Approved supplier on the G-Cloud framework — public sector buyers can procure us via the Digital Marketplace.", "Approved supplier"],
              ["ISO 27001 controls", "We map to Annex A controls and can provide a control matrix on request.", "Aligned"],
              ["PCI-DSS (via Stripe)", "We don't store cardholder data — payments are tokenised through Stripe, who handle Level 1 compliance for us.", "SAQ-A"],
              ["Cyber Essentials", "Held continuously. Renewed annually with independent assessor.", "Certified"],
            ].map(([t, d, status]) => (
              <div key={t} className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
                  <h3 className="h-small" dangerouslySetInnerHTML={{ __html: t }} />
                  <span className="chip-accent chip" style={{ flexShrink: 0, fontSize: 10 }}>{status}</span>
                </div>
                <p className="body" style={{ fontSize: 14 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Subprocessors */}
      <section>
        <div className="container">
          <span className="eyebrow">Sub-processors</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 16, maxWidth: 700 }}>The trusted parties in our supply chain.</h2>
          <p className="body" style={{ marginBottom: 32, maxWidth: 600 }}>
            We keep this list deliberately short. Every name here has been vetted, contracted under DPA, and is subject to our ongoing security review.
          </p>
          <div className="spec-list">
            {[
              ["Amazon Web Services", "Compute, storage, networking", "EU-West-2 (London)"],
              ["Stripe", "Payment processing", "Tokenised — no PAN stored"],
              ["Google", "Ads, analytics, Maps API, reCAPTCHA", "Optional per application"],
            ].map(([k, v, where], i) => (
              <div key={k} className="row">
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="h-small" style={{ marginBottom: 4 }}>{k}</div>
                  <div className="body" style={{ fontSize: 14 }}>{v}</div>
                </div>
                <span className="mono" style={{ color: "var(--fg-faint)" }}>{where}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { SecurityPage });