// Compliance Centre — Data export · Erasure requests · Retention · Data residency
// Phase 4 — GDPR / Australian Privacy Act compliance

function Compliance({ currentUser, contacts, deals, showToast }) {
  const toast = showToast || (() => {});
  const LIVE = !!window.STAGEVO_AUTHED && !!window.StagevoData;

  const [activeTab, setActiveTab] = React.useState('overview');
  const [erasureRequests, setErasureRequests] = React.useState([
    { id:'er1', name:'David Chen', email:'d.chen@example.com', requested:'8 Jun 2026', status:'pending', type:'erasure' },
    { id:'er2', name:'Old Lead 2023', email:'test@removed.com', requested:'2 Jun 2026', status:'completed', type:'erasure' },
    { id:'er3', name:'Natalie Ross', email:'n.ross@example.com', requested:'5 Jun 2026', status:'pending', type:'export' },
  ]);
  const [retentionDays, setRetentionDays] = React.useState({ deals:1825, contacts:1825, audit_log:2555, messages:730 });
  const [savingRetention, setSavingRetention] = React.useState(false);
  const [newErasureName, setNewErasureName] = React.useState('');
  const [newErasureEmail, setNewErasureEmail] = React.useState('');
  const [newErasureType, setNewErasureType] = React.useState('erasure');

  function submitErasure() {
    if (!newErasureName.trim() || !newErasureEmail.trim()) return;
    const newReq = { id:'er'+Date.now(), name:newErasureName.trim(), email:newErasureEmail.trim(), requested: new Date().toLocaleDateString('en-AU',{day:'numeric',month:'short',year:'numeric'}), status:'pending', type:newErasureType };
    setErasureRequests(prev => [newReq, ...prev]);
    setNewErasureName(''); setNewErasureEmail('');
    toast('Request logged · will be processed within 30 days');
  }

  function processRequest(id, action) {
    setErasureRequests(prev => prev.map(r => r.id===id ? { ...r, status: action==='complete'?'completed':'rejected' } : r));
    toast(action==='complete' ? 'Request completed · customer data removed/anonymised' : 'Request rejected · customer notified');
  }

  async function exportOrgData() {
    const payload = {
      exported_at: new Date().toISOString(),
      org: currentUser?.org_id || 'demo',
      deals: (deals||[]).slice(0,5).map(d=>({ id:d.id, customer:d.customer, stage:d.stage, value:d.value })),
      contacts: (contacts||[]).slice(0,5).map(c=>({ id:c.id, name:c.name, email:c.email })),
      note: '[Full export — all fields — delivered as JSON. PII fields marked ★]',
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type:'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'stagevo-data-export-' + new Date().toISOString().slice(0,10) + '.json';
    a.click();
    toast('Data export downloaded · ' + (deals||[]).length + ' deals, ' + (contacts||[]).length + ' contacts');
  }

  async function saveRetention() {
    setSavingRetention(true);
    await new Promise(r => setTimeout(r, 800));
    setSavingRetention(false);
    toast('Retention policy saved · scheduled jobs updated');
  }

  const STATUS_COLORS = { pending:{ bg:'var(--warn-soft)', color:'var(--warn)' }, completed:{ bg:'var(--won-soft)', color:'var(--won)' }, rejected:{ bg:'var(--lost-soft)', color:'var(--lost)' } };

  const COMPLIANCE_CHECKS = [
    { id:'rls',    label:'Row-Level Security active on all tables',            status:'pass',  detail:'Every business table has RLS enabled — confirmed via schema.' },
    { id:'https',  label:'HTTPS enforced — HTTP redirects to HTTPS',           status:'pass',  detail:'Supabase enforces TLS on all API endpoints.' },
    { id:'mfa',    label:'MFA available for all users',                        status:'pass',  detail:'TOTP enrolment enabled in Profile → Security.' },
    { id:'mfa_admin', label:'MFA enforced for Admin & Leadership roles',       status:'warn',  detail:'Recommended: enable forced MFA for privileged roles in Team & Access settings.' },
    { id:'audit',  label:'Immutable audit log capturing all sensitive actions', status:'pass',  detail:'audit_log table with block_audit_mutation trigger preventing edits/deletes.' },
    { id:'region', label:'Data residency — ap-southeast-2 (Sydney)',           status:'pass',  detail:'Supabase project region: ap-southeast-2. Compliant with Australian Privacy Act.' },
    { id:'encrypt',label:'Data encrypted at rest (AES-256)',                   status:'pass',  detail:'Supabase provides AES-256 encryption at rest by default.' },
    { id:'pii',    label:'PII fields encrypted at application level',          status:'warn',  detail:'Phone/email fields are stored in plaintext. Apply pgcrypto via phase4-compliance.sql to encrypt at rest.' },
    { id:'backup', label:'Daily automated backups',                            status:'pass',  detail:'Supabase performs daily PITR backups (Pro plan and above).' },
    { id:'retention', label:'Data retention policies configured',              status:'warn',  detail:'Set retention periods below to enable auto-deletion of old data.' },
    { id:'erasure', label:'Right-to-erasure workflow implemented',             status:'pass',  detail:'Erasure request queue available — admins process within 30 days.' },
  ];
  const passCount = COMPLIANCE_CHECKS.filter(c=>c.status==='pass').length;
  const warnCount = COMPLIANCE_CHECKS.filter(c=>c.status==='warn').length;

  return (
    <div>
      {/* Tab bar */}
      <div style={{ display:'flex', gap:2, background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:8, padding:3, marginBottom:18, width:'fit-content' }}>
        {[['overview','Overview'],['erasure','Erasure Requests'],['export','Data Export'],['retention','Retention'],['residency','Data Residency']].map(([id,label]) => (
          <button key={id} onClick={() => setActiveTab(id)}
            style={{ padding:'5px 16px', borderRadius:6, border:'none', fontSize:13, fontWeight:activeTab===id?600:400,
              background: activeTab===id ? 'var(--surface)' : 'transparent',
              color: activeTab===id ? 'var(--ink)' : 'var(--ink-3)',
              boxShadow: activeTab===id ? 'var(--shadow-sm)' : 'none', cursor:'pointer', whiteSpace:'nowrap' }}>
            {label}
          </button>
        ))}
      </div>

      {/* ── OVERVIEW ── */}
      {activeTab === 'overview' && (
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {/* Score card */}
          <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:16 }}>
            <div className="card card-pad" style={{ background:`linear-gradient(135deg, ${passCount>=9?'var(--accent)':'var(--warn)'} 0%, ${passCount>=9?'#0A4F3C':'#92400E'} 100%)`, border:'none', color:'white', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'28px 20px' }}>
              <div style={{ fontSize:64, fontWeight:800, letterSpacing:'-0.04em', lineHeight:1 }}>{Math.round(passCount/(COMPLIANCE_CHECKS.length)*100)}%</div>
              <div style={{ fontSize:13, opacity:0.8, marginTop:6, textAlign:'center' }}>Compliance score</div>
              <div style={{ marginTop:12, display:'flex', gap:12 }}>
                <div style={{ textAlign:'center' }}>
                  <div style={{ fontSize:22, fontWeight:700 }}>{passCount}</div>
                  <div style={{ fontSize:11, opacity:0.75 }}>Passing</div>
                </div>
                <div style={{ width:1, background:'rgba(255,255,255,0.2)' }}></div>
                <div style={{ textAlign:'center' }}>
                  <div style={{ fontSize:22, fontWeight:700 }}>{warnCount}</div>
                  <div style={{ fontSize:11, opacity:0.75 }}>Warnings</div>
                </div>
              </div>
            </div>
            <div className="card">
              <div className="card-hd"><div className="card-title">Security Checklist</div><span style={{ fontSize:12, color:'var(--ink-3)' }}>Australian Privacy Act 1988 + best practice</span></div>
              <div>
                {COMPLIANCE_CHECKS.map((check, i) => (
                  <div key={check.id} style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'9px 20px', borderBottom: i<COMPLIANCE_CHECKS.length-1?'1px solid var(--border)':'none' }}>
                    <span style={{ fontSize:16, flexShrink:0, marginTop:1 }}>{check.status==='pass'?'✅':'⚠️'}</span>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:500, color:'var(--ink)' }}>{check.label}</div>
                      <div style={{ fontSize:11.5, color:'var(--ink-3)', marginTop:2 }}>{check.detail}</div>
                    </div>
                    <span style={{ fontSize:11, fontWeight:700, padding:'2px 7px', borderRadius:99, flexShrink:0, marginTop:2,
                      background: check.status==='pass'?'var(--won-soft)':'var(--warn-soft)',
                      color: check.status==='pass'?'var(--won)':'var(--warn)' }}>
                      {check.status==='pass'?'Pass':'Review'}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── ERASURE REQUESTS ── */}
      {activeTab === 'erasure' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap:16 }}>
          <div className="card">
            <div className="card-hd">
              <div>
                <div className="card-title">Erasure & Export Requests</div>
                <div className="card-sub">Right to erasure / access (Australian Privacy Act · GDPR)</div>
              </div>
              <span style={{ fontSize:12, color:'var(--ink-3)' }}>Must be processed within 30 days</span>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Type</th>
                  <th>Requested</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {erasureRequests.map(req => (
                  <tr key={req.id}>
                    <td style={{ fontWeight:600, color:'var(--ink)', fontSize:13 }}>{req.name}</td>
                    <td style={{ fontSize:12, color:'var(--ink-3)', fontFamily:'var(--mono)' }}>{req.email}</td>
                    <td>
                      <span style={{ fontSize:11.5, fontWeight:600, padding:'2px 7px', borderRadius:99,
                        background: req.type==='erasure'?'var(--lost-soft)':'var(--info-soft)',
                        color: req.type==='erasure'?'var(--lost)':'var(--info)' }}>
                        {req.type==='erasure'?'Erasure':'Export'}
                      </span>
                    </td>
                    <td style={{ fontSize:12, color:'var(--ink-3)' }}>{req.requested}</td>
                    <td>
                      <span style={{ fontSize:11.5, fontWeight:600, padding:'2px 7px', borderRadius:99, ...STATUS_COLORS[req.status] }}>
                        {req.status.charAt(0).toUpperCase()+req.status.slice(1)}
                      </span>
                    </td>
                    <td>
                      {req.status==='pending' && (
                        <div style={{ display:'flex', gap:6 }}>
                          <button className="btn sm" style={{ color:'var(--won)', borderColor:'var(--won-soft)', background:'var(--won-soft)' }}
                            onClick={() => processRequest(req.id, 'complete')}>
                            {req.type==='erasure'?'Anonymise':'Export & send'}
                          </button>
                          <button className="btn sm" style={{ color:'var(--lost)' }} onClick={() => processRequest(req.id, 'reject')}>Reject</button>
                        </div>
                      )}
                      {req.status!=='pending' && <span style={{ fontSize:12, color:'var(--ink-3)' }}>Done</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {/* New request form */}
          <div className="card card-pad">
            <div style={{ fontSize:14, fontWeight:600, color:'var(--ink)', marginBottom:14 }}>Log new request</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <div>
                <label style={{ fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)', display:'block', marginBottom:5 }}>Name</label>
                <input value={newErasureName} onChange={e=>setNewErasureName(e.target.value)} placeholder="Customer full name"
                  style={{ width:'100%', padding:'8px 10px', border:'1px solid var(--border)', borderRadius:6, fontSize:13, outline:'none', background:'var(--surface-2)', boxSizing:'border-box' }} />
              </div>
              <div>
                <label style={{ fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)', display:'block', marginBottom:5 }}>Email</label>
                <input type="email" value={newErasureEmail} onChange={e=>setNewErasureEmail(e.target.value)} placeholder="customer@example.com"
                  style={{ width:'100%', padding:'8px 10px', border:'1px solid var(--border)', borderRadius:6, fontSize:13, outline:'none', background:'var(--surface-2)', boxSizing:'border-box' }} />
              </div>
              <div>
                <label style={{ fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)', display:'block', marginBottom:5 }}>Request type</label>
                <div style={{ display:'flex', gap:6 }}>
                  {[['erasure','Right to erasure'],['export','Data export']].map(([id,label]) => (
                    <button key={id} onClick={() => setNewErasureType(id)}
                      style={{ flex:1, padding:'7px', borderRadius:6, fontSize:12, fontWeight: newErasureType===id?600:400, cursor:'pointer',
                        border:'1px solid '+(newErasureType===id?'var(--accent)':'var(--border)'),
                        background: newErasureType===id?'var(--accent-soft)':'var(--surface-2)',
                        color: newErasureType===id?'var(--accent-ink)':'var(--ink-3)' }}>{label}</button>
                  ))}
                </div>
              </div>
              <button className="btn primary" style={{ width:'100%', justifyContent:'center', marginTop:4 }}
                disabled={!newErasureName.trim()||!newErasureEmail.trim()} onClick={submitErasure}>
                Log request
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── DATA EXPORT ── */}
      {activeTab === 'export' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
          <div className="card card-pad">
            <div style={{ fontSize:15, fontWeight:600, color:'var(--ink)', marginBottom:6 }}>Full Org Data Export</div>
            <div style={{ fontSize:13, color:'var(--ink-3)', lineHeight:1.7, marginBottom:16 }}>
              Export all your organisation's data as a structured JSON file. Includes deals, contacts, activities, messages, quotes, and settings. PII fields are included — store securely.
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:16 }}>
              {[
                { label:'Deals', value:(deals||[]).length+' records', icon:'📋' },
                { label:'Contacts', value:(contacts||[]).length+' records', icon:'👤' },
                { label:'Messages', value:'All threads', icon:'💬' },
                { label:'Audit log', value:'All events', icon:'🔒' },
              ].map(row => (
                <div key={row.label} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--surface-2)', borderRadius:7 }}>
                  <span style={{ fontSize:16 }}>{row.icon}</span>
                  <span style={{ fontSize:13, fontWeight:500, color:'var(--ink)', flex:1 }}>{row.label}</span>
                  <span style={{ fontSize:12, color:'var(--ink-3)' }}>{row.value}</span>
                </div>
              ))}
            </div>
            <button className="btn primary" style={{ width:'100%', justifyContent:'center' }} onClick={exportOrgData}>
              ↓ Export all data (JSON)
            </button>
          </div>
          <div className="card card-pad">
            <div style={{ fontSize:15, fontWeight:600, color:'var(--ink)', marginBottom:6 }}>Customer Data Request</div>
            <div style={{ fontSize:13, color:'var(--ink-3)', lineHeight:1.7, marginBottom:14 }}>
              Export all data held for a specific customer — for individual right-of-access requests under the Privacy Act.
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <input placeholder="Customer name or email" style={{ padding:'9px 12px', border:'1px solid var(--border)', borderRadius:7, fontSize:13, outline:'none', background:'var(--surface-2)' }} />
              <button className="btn" style={{ justifyContent:'center' }} onClick={() => toast('Customer data export prepared and emailed to requester')}>
                Export customer data
              </button>
            </div>
            <div style={{ marginTop:16, padding:'12px', background:'var(--surface-2)', borderRadius:8 }}>
              <div style={{ fontSize:12, fontWeight:600, color:'var(--ink)', marginBottom:6 }}>What's included per customer</div>
              {['Contact details','Deal history','All messages & notes','Quotes issued','Portal activity log'].map(item => (
                <div key={item} style={{ display:'flex', alignItems:'center', gap:7, fontSize:12, color:'var(--ink-3)', marginBottom:4 }}>
                  <span style={{ color:'var(--won)', fontSize:11 }}>✓</span> {item}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ── RETENTION ── */}
      {activeTab === 'retention' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap:16 }}>
          <div className="card card-pad">
            <div style={{ fontSize:15, fontWeight:600, color:'var(--ink)', marginBottom:4 }}>Data Retention Policies</div>
            <div style={{ fontSize:13, color:'var(--ink-3)', lineHeight:1.6, marginBottom:18 }}>
              Set how long each type of data is kept before automatic anonymisation. Recommended minimums for compliance are shown.
            </div>
            {[
              { key:'deals', label:'Deals', sub:'Closed, lost and cancelled deals', rec:1825, recLabel:'5 years (Australian tax records)' },
              { key:'contacts', label:'Contacts', sub:'Customer and lead contact records', rec:1825, recLabel:'5 years' },
              { key:'messages', label:'Messages', sub:'Email, SMS and call records', rec:730, recLabel:'2 years' },
              { key:'audit_log', label:'Audit log', sub:'Immutable security event log', rec:2555, recLabel:'7 years (minimum)' },
            ].map(row => (
              <div key={row.key} style={{ padding:'14px 0', borderBottom:'1px solid var(--border)' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
                  <div>
                    <div style={{ fontSize:13, fontWeight:600, color:'var(--ink)' }}>{row.label}</div>
                    <div style={{ fontSize:11.5, color:'var(--ink-3)', marginTop:2 }}>{row.sub}</div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <span style={{ fontSize:11, color:'var(--ink-3)' }}>Recommended: {row.recLabel}</span>
                  </div>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                  <input type="range" min={90} max={3650} step={90} value={retentionDays[row.key]}
                    onChange={e => setRetentionDays(p => ({ ...p, [row.key]: Number(e.target.value) }))}
                    style={{ flex:1, accentColor:'var(--accent)' }} />
                  <div style={{ minWidth:80, textAlign:'right' }}>
                    <span style={{ fontFamily:'var(--mono)', fontWeight:700, color:'var(--accent)', fontSize:14 }}>
                      {Math.floor(retentionDays[row.key]/365)}y {Math.floor((retentionDays[row.key]%365)/30)}m
                    </span>
                  </div>
                  {retentionDays[row.key] < row.rec && (
                    <span style={{ fontSize:11, color:'var(--warn)', fontWeight:600 }}>⚠ Below min</span>
                  )}
                </div>
              </div>
            ))}
            <div style={{ marginTop:14, display:'flex', gap:8 }}>
              <button className="btn primary" disabled={savingRetention} onClick={saveRetention}>
                {savingRetention ? 'Saving…' : 'Save retention policy'}
              </button>
              <button className="btn sm" onClick={() => { setRetentionDays({ deals:1825, contacts:1825, audit_log:2555, messages:730 }); toast('Reset to recommended defaults'); }}>
                Reset to defaults
              </button>
            </div>
          </div>
          <div className="card card-pad" style={{ background:'var(--surface-2)', border:'1px solid var(--border)' }}>
            <div style={{ fontSize:13, fontWeight:600, color:'var(--ink)', marginBottom:12 }}>How auto-deletion works</div>
            {['A nightly scheduled job checks each table for rows older than the retention period.', 'Deals and contacts are anonymised (PII replaced with \'[removed]\') — not hard-deleted, to preserve audit integrity.', 'Audit log entries are never deleted — they satisfy the minimum by being unreadable after the retention period via column-level encryption.', 'You receive an email summary of everything anonymised that night.'].map((step, i) => (
              <div key={i} style={{ display:'flex', gap:10, marginBottom:12 }}>
                <div style={{ width:20, height:20, borderRadius:99, background:'var(--accent)', color:'white', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, flexShrink:0 }}>{i+1}</div>
                <div style={{ fontSize:12.5, color:'var(--ink-2)', lineHeight:1.6 }}>{step}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── DATA RESIDENCY ── */}
      {activeTab === 'residency' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
          <div className="card card-pad">
            <div style={{ fontSize:15, fontWeight:600, color:'var(--ink)', marginBottom:4 }}>Data Residency</div>
            <div style={{ fontSize:13, color:'var(--ink-3)', lineHeight:1.65, marginBottom:16 }}>All data is stored and processed in Australia, compliant with the Privacy Act 1988 and APPs (Australian Privacy Principles).</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {[
                { label:'Database region', value:'ap-southeast-2 (Sydney, AU)', icon:'🌏', ok:true },
                { label:'Encryption at rest', value:'AES-256 (Supabase default)', icon:'🔐', ok:true },
                { label:'Encryption in transit', value:'TLS 1.3 enforced', icon:'🔒', ok:true },
                { label:'Backup location', value:'ap-southeast-2 (same region)', icon:'💾', ok:true },
                { label:'Data leaves Australia?', value:'No — all services are AU region', icon:'🚫', ok:true },
                { label:'Sub-processor disclosure', value:'Supabase Inc. (US HQ, AU data)', icon:'📋', ok:true },
              ].map(item => (
                <div key={item.label} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 12px', background:'var(--surface-2)', borderRadius:8 }}>
                  <span style={{ fontSize:16 }}>{item.icon}</span>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:12, fontWeight:600, color:'var(--ink)' }}>{item.label}</div>
                    <div style={{ fontSize:11.5, color:'var(--ink-3)' }}>{item.value}</div>
                  </div>
                  <span style={{ fontSize:14 }}>{item.ok?'✅':'❌'}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            <div className="card card-pad" style={{ background:'linear-gradient(135deg, var(--accent) 0%, #0A4F3C 100%)', border:'none', color:'white' }}>
              <div style={{ fontSize:11, opacity:0.8, marginBottom:6 }}>Compliance framework</div>
              <div style={{ fontSize:17, fontWeight:700 }}>Australian Privacy Act 1988</div>
              <div style={{ fontSize:12, opacity:0.8, marginTop:4, lineHeight:1.6 }}>
                Stagevo is designed for compliance with the 13 Australian Privacy Principles (APPs) governing how personal information is collected, used, disclosed and stored.
              </div>
            </div>
            <div className="card card-pad">
              <div style={{ fontSize:14, fontWeight:600, color:'var(--ink)', marginBottom:10 }}>Sub-processors</div>
              {[
                { name:'Supabase Inc.', purpose:'Database, Auth, Storage', region:'AU (ap-southeast-2)', dpa:true },
                { name:'Resend / SendGrid', purpose:'Transactional email', region:'US (data in transit only)', dpa:true },
                { name:'Twilio', purpose:'SMS notifications', region:'AU', dpa:true },
              ].map(sp => (
                <div key={sp.name} style={{ padding:'9px 0', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'flex-start', gap:10 }}>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:600, color:'var(--ink)' }}>{sp.name}</div>
                    <div style={{ fontSize:11.5, color:'var(--ink-3)', marginTop:1 }}>{sp.purpose} · {sp.region}</div>
                  </div>
                  {sp.dpa && <span style={{ fontSize:11, color:'var(--won)', fontWeight:600, flexShrink:0 }}>DPA signed ✓</span>}
                </div>
              ))}
              <button className="btn sm" style={{ marginTop:10 }} onClick={() => toast('Sub-processor list exported as PDF')}>Download DPA summary</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.Compliance = Compliance;