// ---------- Security ----------
function SecurityPage() {
  const certs = [
    { t: 'SOC 2 Type II', b: 'Audited annually by an independent third party.' },
    { t: 'ISO 27001', b: 'Certified information security management system.' },
    { t: 'GDPR', b: 'Fully compliant, with DPA available on request.' },
    { t: 'AES-256', b: 'All data encrypted at rest and in transit (TLS 1.3).' },
    { t: 'SSO / SAML', b: 'Enterprise single sign-on via Okta, Azure AD, Google.' },
    { t: 'Daily backups', b: '35-day retention, geo-redundant storage (AU/EU).' },
  ];
  return (
    <SideRailLayout current="/security">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Security" title="Your defect records are evidence. We treat them that way." subtitle="Certified, encrypted, audited. Ready for even the most regulated builds." align="left" />
      </Block>
      <Block pad="0 56px 32px">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="sec-grid">
          {certs.map(c => (
            <div key={c.t} style={{ padding: 22, borderRadius: 10, background: 'var(--paper-2)', border: '1px solid var(--rule)' }}>
              <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 8 }}>{c.t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-3)' }}>{c.b}</div>
            </div>
          ))}
        </div>
      </Block>
      <Block pad="32px 56px 72px">
        <div style={{
          padding: 32, borderRadius: 12, background: 'var(--ink)', color: 'var(--paper)',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        }} className="sec-cta">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>For security teams</div>
            <h3 style={{ fontSize: 22, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.01em' }}>Need our security package?</h3>
            <div style={{ fontSize: 14, color: 'color-mix(in oklab, var(--paper) 70%, transparent)' }}>Pen-test reports, SOC 2, DPA, sub-processor list — request the full bundle.</div>
          </div>
          <Btn to="/contact" variant="accent" size="md">Request security pack</Btn>
        </div>
      </Block>
      <style>{`@media(max-width:720px){.sec-grid{grid-template-columns:1fr !important;}.sec-cta{grid-template-columns:1fr !important;}}`}</style>
    </SideRailLayout>
  );
}

window.SecurityPage = SecurityPage;