// Compliance.jsx — frameworks + attestations + report previews
const Compliance = () => {
  const frameworks = [
    { name: 'SOC 2 Type II', body: 'Security, Availability, Confidentiality' },
    { name: 'ISO 27001:2022', body: 'Information security management' },
    { name: 'PCI DSS v4.0', body: 'Cardholder data environments' },
    { name: 'HIPAA / HITECH', body: 'Healthcare and PHI workloads' },
    { name: 'NIST CSF 2.0', body: 'Govern · Identify · Protect · Detect · Respond · Recover' },
    { name: 'NIS2 Directive', body: 'Essential and important EU entities' },
    { name: 'DORA', body: 'Financial digital operational resilience' },
    { name: 'CMMC 2.0', body: 'US DoD contractor cybersecurity' },
  ];

  return (
    <section style={{
      position: 'relative', padding: '96px 32px',
      background: 'linear-gradient(180deg, #010102 0%, #050507 50%, #010102 100%)',
      borderTop: '1px solid #1a1b1e', borderBottom: '1px solid #1a1b1e',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <p style={{
              fontSize: 13, fontWeight: 500, color: '#828fff',
              letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
            }}>Reporting & compliance</p>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
              fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
              color: '#f7f8f8', margin: '0 0 16px',
            }}>Compliance-ready reports</h2>
          </div>
          <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.6, margin: 0 }}>
            Every finding is mapped to the frameworks your regulators, customers, and board ask about, with an executive summary, technical detail, and reproducible evidence.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24 }}>
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {frameworks.map(f => (
                <div key={f.name} style={{
                  background: '#0f1011', border: '1px solid #23252a', borderRadius: 10,
                  padding: '14px 16px',
                }}>
                  <div style={{ fontSize: 14, color: '#f7f8f8', fontWeight: 500, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="check" size={12} color="#27a644" strokeWidth={2.5} />
                    {f.name}
                  </div>
                  <div style={{ fontSize: 12, color: '#8a8f98' }}>{f.body}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Report mockup */}
          <div style={{
            background: '#0f1011', border: '1px solid #23252a', borderRadius: 16,
            overflow: 'hidden', position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 1,
              background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.3) 50%, transparent)',
            }} />
            <div style={{
              padding: '14px 18px', borderBottom: '1px solid #1e1f22',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 6,
                background: '#1a1b1e', border: '1px solid #23252a',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="layers" size={13} color="#828fff" />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: '#f7f8f8', fontWeight: 500 }}>Engagement report — ACME Corp</div>
                <div style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)' }}>GS-2026-0431 · Q2 retest · 142 pages</div>
              </div>
            </div>

            <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div>
                <div style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }}>Executive summary</div>
                <div style={{
                  height: 5, background: '#1a1b1e', borderRadius: 3, marginBottom: 4,
                  overflow: 'hidden', position: 'relative',
                }}>
                  <div style={{ height: '100%', width: '88%', background: 'linear-gradient(90deg, #27a644, #5e6ad2)' }} />
                </div>
                <div style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)' }}>Posture score: 88 / 100 (↑ 17 from Q1)</div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
                {[
                  { l: 'Critical', v: 0, c: '#27a644' },
                  { l: 'High', v: 2, c: '#d98326' },
                  { l: 'Medium', v: 9, c: '#5e6ad2' },
                  { l: 'Low', v: 14, c: '#62666d' },
                ].map(s => (
                  <div key={s.l} style={{
                    background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 8,
                    padding: '8px 10px', textAlign: 'center',
                  }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: s.c, lineHeight: 1 }}>{s.v}</div>
                    <div style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginTop: 4 }}>{s.l}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                {['SOC 2 CC7.1', 'ISO A.8.16', 'PCI DSS 6.3.1', 'NIST CSF DE.CM'].map(t => (
                  <span key={t} style={{
                    fontSize: 10, padding: '3px 7px', borderRadius: 4,
                    background: '#141516', border: '1px solid #23252a', color: '#828fff',
                    fontFamily: 'var(--font-mono)',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Compliance });