/* Security & Compliance page */

const SecurityPage = () => (
  <div style={{ width: 1440, background: 'var(--paper)', color: 'var(--ink)', fontFamily: 'var(--font-sans)' }}>
    <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={28} />
        </a>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--ink-2)' }}>
          <a style={secNavLink} href="index.html#product">Product</a>
          <a style={secNavLink} href="index.html#how-it-works">How it works</a>
          <a style={secNavLink} href="pricing.html">Pricing</a>
          <a style={secNavLink} href="index.html#customers">Customers</a>
          <a style={secNavLink} href="index.html#docs">Docs</a>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, fontSize: 14 }}>
        <a style={secNavLink} href="signin.html?return=product.html">Sign in</a>
        <a style={secBtnPrimary} href="signin.html?return=product.html">Request access →</a>
      </div>
    </nav>

    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ SECURITY</div>
      <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 84, lineHeight: 0.96, letterSpacing: '-0.025em', margin: '0 0 28px', maxWidth: 920 }}>
        Built for a<br/>
        <em style={{ color: 'var(--accent)' }}>regulated industry.</em>
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 640, margin: 0 }}>
        Title data is sensitive. We treat every upload as confidential property data
        and build our infrastructure around that assumption.
      </p>
    </section>

    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ SOC 2 TYPE I READINESS</div>
      <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 48, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px' }}>
        Roadmap to audit.<br/>
        <em style={{ color: 'var(--ink-3)' }}>Not just a checkbox.</em>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        <SecCard status="LIVE" title="Access control" desc="Role-based access with least-privilege defaults. Session-gated product pages." />
        <SecCard status="LIVE" title="Data encryption" desc="AES-256 at rest. TLS 1.3 in transit. No plaintext storage of search packages." />
        <SecCard status="Q3 2025" title="SOC 2 Type I" desc="Planned audit with a Big Four firm. Controls documented. Gap remediation in progress." />
        <SecCard status="LIVE" title="Audit logging" desc="Every document access, every report generation, every status change — logged and immutable." />
        <SecCard status="LIVE" title="Retention policies" desc="Customer-configurable retention. Automatic purging post-commitment per underwriter policy." />
        <SecCard status="Q4 2025" title="Penetration testing" desc="Third-party pentest scheduled for post-beta hardening. Results shared with enterprise pilots." />
      </div>
    </section>

    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div className="meta" style={{ marginBottom: 16 }}>§ INFRASTRUCTURE</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 48, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px' }}>
            Cloud-native.<br/>
            <em style={{ color: 'var(--accent)' }}>Zero on-premise.</em>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: '0 0 24px' }}>
            No local servers to patch. No VPN required. Examiners access reports through
            a browser, and agencies configure retention through a settings panel.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14, color: 'var(--ink-2)' }}>
            <div>• Multi-region deployment for availability</div>
            <div>• Automated backup with 30-day point-in-time recovery</div>
            <div>• DDoS protection at the edge</div>
            <div>• Isolated tenant namespaces (platform wave)</div>
          </div>
        </div>
        <div style={{ border: '1px solid var(--rule-strong)', background: 'var(--paper)' }}>
          <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>DATA FLOW</div>
          </div>
          <div style={{ padding: '24px' }}>
            {[
              { step: 'Upload', desc: 'Encrypted TLS transfer to object storage' },
              { step: 'Process', desc: 'Ephemeral compute — no persistent disk' },
              { step: 'Output', desc: 'Structured report + retained source package' },
              { step: 'Access', desc: 'Session-gated, audit-logged, time-bounded' },
            ].map((item, i) => (
              <div key={item.step} style={{ display: 'flex', gap: 16, padding: '14px 0', borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', width: 80 }}>{item.step}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ CONTACT SECURITY</div>
      <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 48, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px' }}>
        Report a vulnerability.
      </h2>
      <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: '0 0 16px', maxWidth: 560 }}>
        If you discover a security issue, email us directly. We respond within 24 hours
        and coordinate disclosure responsibly.
      </p>
      <a href="mailto:security@titleverifi.com" style={{ color: 'var(--accent)', textDecoration: 'none', fontWeight: 500, fontSize: 15 }}>security@titleverifi.com</a>
    </section>

    <footer style={{ padding: '48px 56px', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, fontSize: 13, color: 'var(--ink-3)' }}>
      <div>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={20} />
        </a>
        <p style={{ marginTop: 16, lineHeight: 1.6, maxWidth: 280 }}>AI title intelligence for closing services. Made for examiners.</p>
      </div>
      <SecFooterCol head="Product" items={['Overview','Report','Pricing','Security','Changelog']} />
      <SecFooterCol head="Company" items={['About','Customers','Careers','Press']} />
      <SecFooterCol head="Resources" items={['Docs','API','Sample report','Support']} />
      <SecFooterCol head="Legal" items={['Terms','Privacy','SOC 2 readiness','Subprocessors']} />
    </footer>
  </div>
);

const secNavLink = { color: 'inherit', textDecoration: 'none', cursor: 'pointer' };
const secBtnPrimary = { background: 'var(--ink)', color: 'var(--paper)', border: 'none', padding: '8px 14px', borderRadius: 'var(--r-2)', fontSize: 14, fontFamily: 'inherit', fontWeight: 500, cursor: 'pointer', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' };

const SecCard = ({ status, title, desc }) => (
  <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.06em', color: status === 'LIVE' ? 'var(--status-clear)' : 'var(--status-review)', marginBottom: 12, textTransform: 'uppercase' }}>{status}</div>
    <div style={{ fontSize: 20, fontWeight: 600, fontFamily: 'var(--font-serif)', fontStyle: 'italic', marginBottom: 8 }}>{title}</div>
    <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 }}>{desc}</p>
  </div>
);

const secFooterHref = (label) => {
  const key = label.toLowerCase();
  if (key.includes('overview')) return 'index.html';
  if (key.includes('report')) return 'signin.html?return=product.html';
  if (key.includes('pricing')) return 'pricing.html';
  if (key.includes('about')) return 'about.html';
  if (key.includes('security')) return 'security.html';
  if (key.includes('changelog')) return 'changelog.html';
  if (key.includes('support')) return 'support.html';
  if (key.includes('terms')) return 'terms.html';
  if (key.includes('privacy')) return 'privacy.html';
  if (key.includes('docs')) return 'index.html#docs';
  if (key.includes('api') || key.includes('sample')) return 'signin.html?return=product.html';
  if (key.includes('customer')) return 'index.html#customers';
  return 'index.html#docs';
};

const SecFooterCol = ({ head, items }) => (
  <div>
    <div className="meta" style={{ marginBottom: 12 }}>{head.toUpperCase()}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map(i => <a style={{ color: 'inherit', textDecoration: 'none' }} href={secFooterHref(i)} key={i}>{i}</a>)}
    </div>
  </div>
);

window.SecurityPage = SecurityPage;