/* global React, PORTAL */
const { useState, useEffect } = React;

const VOK_VERSION = '2026-07-16';

const KEY_TERMS = [
  {
    art: 'Art. 2',
    title: 'Doel van verwerking',
    body: 'Lake-Project verwerkt uw persoonsgegevens uitsluitend voor de uitvoering van de overeengekomen diensten — nooit voor eigen doeleinden.',
  },
  {
    art: 'Art. 5',
    title: 'Beveiliging',
    body: 'Versleuteling in rust en tijdens transport (TLS 1.2+), toegangscontrole op minimale rechten, MFA verplicht op alle systemen met persoonsgegevens.',
  },
  {
    art: 'Art. 6',
    title: 'Sub-verwerkers',
    body: 'Alleen Cloudflare (hosting/opslag) en Resend (e-mail) worden gebruikt als sub-verwerkers. Met beide zijn EU Standard Contractual Clauses (SCCs) van kracht. U wordt 30 dagen vóór een nieuwe sub-verwerker geïnformeerd.',
  },
  {
    art: 'Art. 8',
    title: 'Datalekken binnen 24 uur',
    body: 'Lake-Project meldt u een (vermoedelijk) datalek uiterlijk 24 uur na ontdekking en verleent alle medewerking voor eventuele melding bij de Autoriteit Persoonsgegevens.',
  },
  {
    art: 'Art. 10',
    title: 'Verwijdering na beëindiging',
    body: 'Na afloop van de dienstverlening worden uw persoonsgegevens verwijderd of geretourneerd binnen 30 dagen, tenzij een wettelijke bewaarplicht geldt.',
  },
];

const VOK_ARTICLES = [
  {
    title: 'Artikel 1 — Definities',
    body: 'Begrippen die in de AVG zijn gedefinieerd hebben in deze VOK dezelfde betekenis. "Betrokkene" is de natuurlijke persoon op wie de persoonsgegevens betrekking hebben. "Datalek" is een inbreuk in verband met persoonsgegevens als bedoeld in art. 4 lid 12 AVG. "Sub-verwerker" is een derde partij die door Lake-Project wordt ingeschakeld voor de verwerking van persoonsgegevens namens u, zoals vermeld in Bijlage B.',
  },
  {
    title: 'Artikel 2 — Reikwijdte en doel',
    items: [
      'Lake-Project verwerkt persoonsgegevens uitsluitend ten behoeve van de uitvoering van de overeengekomen diensten en conform eventuele schriftelijke instructies van Verwerkingsverantwoordelijke.',
      'Lake-Project verwerkt de persoonsgegevens niet voor eigen doeleinden of andere doeleinden.',
      'Lake-Project verwerkt persoonsgegevens primair in de Europese Economische Ruimte (EER). Voor sub-verwerkers buiten de EER zijn EU Standard Contractual Clauses (SCCs) van kracht.',
    ],
  },
  {
    title: 'Artikel 3 — Instructies',
    items: [
      'Lake-Project handelt uitsluitend op basis van gedocumenteerde instructies van Verwerkingsverantwoordelijke, tenzij een wettelijke verplichting anders vereist.',
      'Lake-Project deelt Verwerkingsverantwoordelijke onverwijld mede als een instructie naar haar oordeel inbreuk maakt op de AVG.',
    ],
  },
  {
    title: 'Artikel 4 — Vertrouwelijkheid',
    body: 'Lake-Project waarborgt dat personen die gemachtigd zijn persoonsgegevens te verwerken, zijn gehouden door een wettelijke of contractuele geheimhoudingsplicht. Toegang wordt beperkt tot het strikt noodzakelijke.',
  },
  {
    title: 'Artikel 5 — Beveiliging',
    body: 'Lake-Project treft passende technische en organisatorische maatregelen, waaronder: (i) versleuteling van persoonsgegevens in rust en tijdens transport (TLS 1.2+); (ii) toegangscontrole op basis van minimale rechten; (iii) verplichte MFA op systemen die persoonsgegevens bevatten; (iv) patchbeheer waarbij kritieke updates binnen 30 dagen worden toegepast; (v) periodieke back-ups met gedocumenteerde herstelprocedures.',
  },
  {
    title: 'Artikel 6 — Sub-verwerkers',
    items: [
      'Verwerkingsverantwoordelijke verleent Lake-Project toestemming om Cloudflare, Inc. (hosting, opslag, spambeveiliging, EER-routing vanuit Amsterdam) en Resend/WorkOS, Inc. (transactionele e-mailbezorging) in te schakelen als sub-verwerkers. Met beide zijn verwerkersovereenkomsten en EU SCCs van kracht.',
      'Lake-Project legt aan sub-verwerkers gelijkwaardige verplichtingen op als in deze VOK. Lake-Project blijft volledig aansprakelijk voor de naleving door sub-verwerkers.',
      'Lake-Project stelt Verwerkingsverantwoordelijke minimaal 30 dagen van tevoren in kennis van nieuwe sub-verwerkers. Verwerkingsverantwoordelijke kan binnen 14 dagen schriftelijk bezwaar maken.',
    ],
  },
  {
    title: 'Artikel 7 — Rechten van betrokkenen',
    body: 'Lake-Project assisteert Verwerkingsverantwoordelijke bij het beantwoorden van verzoeken van betrokkenen (art. 15–22 AVG) en stuurt rechtstreeks bij haar ingediende verzoeken onverwijld door naar Verwerkingsverantwoordelijke, zonder deze zelfstandig te beantwoorden.',
  },
  {
    title: 'Artikel 8 — Meldplicht datalekken',
    items: [
      'Lake-Project stelt Verwerkingsverantwoordelijke onverwijld en uiterlijk 24 uur na ontdekking op de hoogte van een (vermoedelijk) datalek dat betrekking heeft op de verwerkte persoonsgegevens.',
      'De melding bevat ten minste: de aard van het datalek, de categorieën en (geschatte) aantallen betrokkenen, de waarschijnlijke gevolgen, en de genomen of voorgestelde maatregelen.',
      'Lake-Project verleent alle medewerking die nodig is voor melding bij de Autoriteit Persoonsgegevens (art. 33 AVG) en eventuele kennisgeving aan betrokkenen (art. 34 AVG).',
    ],
  },
  {
    title: 'Artikel 9 — Audit en aantoonbaarheid',
    body: 'Lake-Project stelt alle informatie beschikbaar die nodig is om nakoming van deze VOK aan te tonen. Op verzoek, met minimaal 30 dagen schriftelijke aankondiging en op kosten van Verwerkingsverantwoordelijke, zijn audits of inspecties mogelijk.',
  },
  {
    title: 'Artikel 10 — Teruggave en verwijdering',
    body: 'Na beëindiging van de dienstverlening verwijdert of retourneert Lake-Project — naar keuze van Verwerkingsverantwoordelijke — alle persoonsgegevens en bestaande kopieën binnen 30 dagen, tenzij een wettelijke bewaarplicht anders vereist. Lake-Project bevestigt de verwijdering schriftelijk.',
  },
  {
    title: 'Artikel 11 — Duur',
    body: 'Deze VOK is van kracht zolang Lake-Project persoonsgegevens verwerkt namens Verwerkingsverantwoordelijke in het kader van de dienstverlening en eindigt van rechtswege bij beëindiging van de onderliggende opdracht, onverminderd artikel 10.',
  },
  {
    title: 'Artikel 12 — Aansprakelijkheid',
    body: 'De aansprakelijkheidsregeling uit de onderliggende overeenkomst is van overeenkomstige toepassing op schade die voortvloeit uit schending van deze VOK, voor zover de AVG dit toestaat. De aansprakelijkheid jegens betrokkenen wordt niet beperkt.',
  },
  {
    title: 'Artikel 13 — Toepasselijk recht en bevoegde rechter',
    body: 'Op deze VOK is Nederlands recht van toepassing. Geschillen worden, voor zover wettelijk toegestaan, voorgelegd aan de bevoegde rechter te Rotterdam, Nederland.',
  },
];

function fmtDate(d) {
  if (!d) return '—';
  return new Date(d).toLocaleString('nl-NL', { day: '2-digit', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}

function printAccepted(acc) {
  const w = window.open('', '_blank');
  const articles = VOK_ARTICLES.map(a => `
    <h2>${a.title}</h2>
    ${a.body ? `<p>${a.body}</p>` : ''}
    ${a.items ? `<ol>${a.items.map(i=>`<li>${i}</li>`).join('')}</ol>` : ''}
  `).join('');

  w.document.write(`<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Verwerkersovereenkomst — ${acc.client_company_name} × Lake-Project</title>
<style>
@page { size: A4; margin: 20mm 22mm 18mm 22mm; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui,-apple-system,sans-serif; font-size: 9pt; color: #1a1a1a; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-header { border-bottom: 2pt solid #0B1117; padding-bottom: 12px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; }
h1 { font-size: 15pt; margin: 0 0 3px; color: #0B1117; }
.sub { font-size: 7pt; color: #555; font-family: monospace; }
.meta { text-align: right; font-size: 7pt; font-family: monospace; color: #777; line-height: 1.7; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.party { background: #f8f9fc; border: 1px solid #dde; border-radius: 3px; padding: 12px; }
.party-role { font-size: 6.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #777; font-family: monospace; margin-bottom: 5px; }
.party-name { font-size: 10pt; font-weight: 700; color: #0B1117; margin-bottom: 3px; }
.party-detail { font-size: 8pt; color: #444; line-height: 1.65; }
h2 { font-size: 8.5pt; font-weight: 700; color: #0B1117; margin: 12px 0 4px; border-bottom: 1px solid #e8eaf0; padding-bottom: 3px; }
p { font-size: 8.5pt; color: #333; line-height: 1.65; margin: 0 0 6px; }
ol, ul { padding-left: 16px; margin: 0 0 6px; }
li { font-size: 8.5pt; color: #333; line-height: 1.6; margin-bottom: 3px; }
.section-label { font-size: 6.5pt; letter-spacing: 0.18em; text-transform: uppercase; color: #2d7a6a; font-family: monospace; margin: 16px 0 8px; border-top: 1px solid #dde; padding-top: 8px; }
.acc-block { margin-top: 20px; padding: 14px; background: #f0faf7; border: 1pt solid #2d7a6a; border-radius: 3px; break-inside: avoid; }
.acc-block h3 { font-size: 9pt; color: #0B1117; margin: 0 0 10px; }
.acc-grid { display: grid; grid-template-columns: 140px 1fr; gap: 2px 10px; font-size: 8pt; }
.al { color: #777; font-family: monospace; font-size: 6.5pt; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 0; }
.av { color: #222; padding: 3px 0; font-weight: 500; }
.lp-note { margin-top: 10px; padding-top: 8px; border-top: 1px solid #c0ddd6; font-size: 7pt; color: #666; line-height: 1.6; }
.footer { margin-top: 16px; font-size: 6.5pt; color: #aaa; font-family: monospace; text-align: center; }
.print-btn { display: block; margin-bottom: 14px; padding: 8px 18px; background: #0B1117; color: #6FE3D1; border: 1px solid #6FE3D1; border-radius: 3px; cursor: pointer; font-size: 10pt; }
@media print { .print-btn { display: none; } }
</style>
</head>
<body>
<button class="print-btn" onclick="window.print()">Print / Opslaan als PDF (A4)</button>

<div class="doc-header">
  <div>
    <div class="sub">Lake Project · KvK 29816688 · Rotterdam · lake-project.com</div>
    <h1>Verwerkersovereenkomst</h1>
    <div class="sub">Gegevensverwerkingsovereenkomst als bedoeld in Art. 28 lid 3 AVG/GDPR</div>
  </div>
  <div class="meta">
    <div>VOK versie: ${acc.vok_version || VOK_VERSION}</div>
    <div>Geaccepteerd: ${fmtDate(acc.accepted_at)}</div>
  </div>
</div>

<div class="parties">
  <div class="party">
    <div class="party-role">Verwerkingsverantwoordelijke</div>
    <div class="party-name">${acc.client_company_name}</div>
    <div class="party-detail">
      ${acc.client_kvk ? `KvK: ${acc.client_kvk}<br>` : ''}
      ${acc.client_address ? `${acc.client_address}<br>` : ''}
      Vertegenwoordigd door: <strong>${acc.authorized_rep_name}</strong>${acc.authorized_rep_function ? ` &mdash; ${acc.authorized_rep_function}` : ''}
    </div>
    <div style="font-size:6.5pt;color:#999;margin-top:8px;font-family:monospace">hierna: "Verwerkingsverantwoordelijke"</div>
  </div>
  <div class="party">
    <div class="party-role">Verwerker</div>
    <div class="party-name">Lake Project (Lake-Project)</div>
    <div class="party-detail">
      KvK: 29816688 · Rotterdam, Nederland<br>
      Vertegenwoordigd door: <strong>Alexander van der Plas</strong>
    </div>
    <div style="font-size:6.5pt;color:#999;margin-top:8px;font-family:monospace">hierna: "Verwerker"</div>
  </div>
</div>

<div class="section-label">Overwegingen</div>
<p>In het kader van de uitvoering van de overeengekomen diensten verwerkt Lake-Project persoonsgegevens namens Verwerkingsverantwoordelijke als bedoeld in art. 4 lid 8 AVG. Partijen leggen de voorwaarden voor deze verwerking vast in onderhavige verwerkersovereenkomst (de "VOK").</p>

<div class="section-label">Artikelen</div>
${articles}

<div class="section-label">Bijlage B — Sub-verwerkers</div>
<p>Cloudflare, Inc. (VS / EU-West Amsterdam) — hosting, database, bestandsopslag, spambeveiliging · DPA + EU SCCs<br>
Resend (WorkOS, Inc., VS) — transactionele e-mail · DPA + EU SCCs</p>

<div class="section-label">Acceptatie</div>
<div class="acc-block">
  <h3>&#10003; Digitale acceptatie geregistreerd</h3>
  <div class="acc-grid">
    <span class="al">Verwerkingsverantwoordelijke</span>
    <span class="av">${acc.client_company_name}${acc.client_kvk ? ` &middot; KvK ${acc.client_kvk}` : ''}</span>
    <span class="al">Geaccepteerd door</span>
    <span class="av">${acc.authorized_rep_name}${acc.authorized_rep_function ? `, ${acc.authorized_rep_function}` : ''}</span>
    <span class="al">Tijdstip (UTC)</span>
    <span class="av">${fmtDate(acc.accepted_at)}</span>
    <span class="al">IP-adres</span>
    <span class="av">${acc.ip_address || '—'}</span>
    <span class="al">VOK versie</span>
    <span class="av">${acc.vok_version || VOK_VERSION}</span>
    <span class="al">Methode</span>
    <span class="av">Elektronische acceptatie via geverifieerd Lake-Project klantportaal (eIDAS Art. 25 / Wet elektronische handtekeningen)</span>
  </div>
  <div class="lp-note">
    <strong>Verwerker:</strong> Lake Project (Lake-Project) &middot; KvK 29816688 &middot; Rotterdam &middot; Alexander van der Plas &middot; hello@lake-project.com<br>
    Deze standaard VOK is opgesteld door Lake-Project. De elektronische acceptatie via het geverifieerde klantportaal vormt een rechtsgeldige overeenkomst. Lake-Project accepteert de inhoud van deze overeenkomst bij aanbod aan opdrachtgevers.
  </div>
</div>
<div class="footer">Lake-Project &middot; VOK versie ${VOK_VERSION} &middot; lake-project.com/trust/vok &middot; Gegenereerd ${new Date().toLocaleDateString('nl-NL',{day:'2-digit',month:'long',year:'numeric'})}</div>
</body></html>`);
  w.document.close();
}

function StepIndicator({ step }) {
  const steps = ['Your details', 'Review & accept'];
  return (
    <div style={{ display: 'flex', gap: 0, marginBottom: 28 }}>
      {steps.map((label, i) => {
        const n = i + 1;
        const active = n === step;
        const done = n < step;
        return (
          <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
            <div style={{
              width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
              background: done ? 'var(--ok)' : active ? 'var(--signal)' : 'var(--night-elev-1)',
              color: (done || active) ? 'var(--abyss)' : 'var(--fg-subtle)',
              border: active || done ? 'none' : '1px solid var(--border)',
            }}>
              {done ? '✓' : n}
            </div>
            <span style={{ fontSize: 12, color: active ? 'var(--fg)' : 'var(--fg-subtle)', fontWeight: active ? 500 : 400 }}>{label}</span>
            {i < steps.length - 1 && <div style={{ flex: 1, height: 1, background: 'var(--border)', marginLeft: 8 }} />}
          </div>
        );
      })}
    </div>
  );
}

function Agreements() {
  const [acceptance, setAcceptance] = useState(undefined);
  const [step, setStep]             = useState(1);
  const [agreed, setAgreed]         = useState(false);
  const [busy, setBusy]             = useState(false);
  const [error, setError]           = useState('');
  const [showFull, setShowFull]     = useState(false);
  const [form, setForm] = useState({
    client_company_name: '',
    client_kvk: '',
    client_address: '',
    authorized_rep_name: '',
    authorized_rep_function: '',
  });

  useEffect(() => {
    PORTAL.get('/agreements').then(setAcceptance).catch(() => setAcceptance(null));
    Promise.all([
      PORTAL.get('/company').catch(() => ({})),
      PORTAL.get('/profile').catch(() => ({})),
    ]).then(([co, ct]) => {
      setForm(prev => ({
        ...prev,
        client_company_name: co?.name || '',
        client_address: [co?.address_street, co?.address_postcode, co?.address_city].filter(Boolean).join(', '),
        authorized_rep_name: ct?.name || '',
      }));
    });
  }, []);

  const f = k => e => setForm(p => ({ ...p, [k]: e.target.value }));

  async function accept() {
    if (!agreed) return;
    setBusy(true); setError('');
    try {
      const result = await PORTAL.post('/agreements', { ...form, vok_version: VOK_VERSION });
      setAcceptance(result);
    } catch (ex) {
      setError(ex?.error || 'Something went wrong. Please try again.');
    } finally { setBusy(false); }
  }

  // Loading
  if (acceptance === undefined) {
    return (
      <div style={{ padding: 24, color: 'var(--fg-subtle)', fontSize: 13 }}>Loading…</div>
    );
  }

  // Already accepted
  if (acceptance) {
    return (
      <div>
        <h1 className="page-title">Data processing agreement</h1>
        <div className="page-subtitle">Verwerkersovereenkomst · Art. 28 AVG/GDPR</div>

        <div className="card" style={{ maxWidth: 580, margin: '20px 0' }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(5,150,105,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ok)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>Agreement on file</div>
              <div style={{ fontSize: 11, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)' }}>Accepted {fmtDate(acceptance.accepted_at)}</div>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '4px 12px', fontSize: 13 }}>
              {[
                ['Company', acceptance.client_company_name],
                ['KvK', acceptance.client_kvk || '—'],
                ['Address', acceptance.client_address || '—'],
                ['Signed by', `${acceptance.authorized_rep_name}${acceptance.authorized_rep_function ? `, ${acceptance.authorized_rep_function}` : ''}`],
                ['VOK version', acceptance.vok_version],
              ].map(([label, val]) => (
                <React.Fragment key={label}>
                  <span style={{ color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '5px 0', borderBottom: '1px solid var(--border-hairline)' }}>{label}</span>
                  <span style={{ color: 'var(--fg-muted)', padding: '5px 0', borderBottom: '1px solid var(--border-hairline)' }}>{val}</span>
                </React.Fragment>
              ))}
            </div>
          </div>
          <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border)', display: 'flex', gap: 8 }}>
            <button className="btn btn--ghost" onClick={() => printAccepted(acceptance)}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}>
                <polyline points="6 9 6 2 18 2 18 9" /><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2" /><rect x="6" y="14" width="12" height="8" />
              </svg>
              Print / Save as PDF
            </button>
          </div>
        </div>

        <div style={{ fontSize: 12, color: 'var(--fg-faint)', fontFamily: 'var(--font-mono)', marginTop: 8 }}>
          Questions? Contact <a href="mailto:hello@lake-project.com" style={{ color: 'var(--signal)' }}>hello@lake-project.com</a>
        </div>
      </div>
    );
  }

  // Acceptance flow
  return (
    <div>
      <h1 className="page-title">Data processing agreement</h1>
      <div className="page-subtitle">Verwerkersovereenkomst · Art. 28 AVG/GDPR</div>

      <div style={{ maxWidth: 600, marginTop: 20 }}>
        <div style={{ padding: '12px 16px', background: 'rgba(37,99,235,0.07)', border: '1px solid rgba(37,99,235,0.22)', borderRadius: 4, fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.65, marginBottom: 24 }}>
          <strong style={{ color: 'var(--fg)' }}>GDPR Art. 28 requires a signed data processing agreement</strong> before we process personal data on your behalf. This takes about 2 minutes to complete.
        </div>

        <StepIndicator step={step} />

        {step === 1 && (
          <div className="card">
            <div className="card-head"><span className="card-title">Your details</span></div>
            <div className="card-body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 16px' }}>
              <div className="field" style={{ gridColumn: '1/-1' }}>
                <label className="field-label">Company name *</label>
                <input className="field-input" required value={form.client_company_name} onChange={f('client_company_name')} placeholder="Your legal entity name" />
              </div>
              <div className="field">
                <label className="field-label">KvK number</label>
                <input className="field-input" value={form.client_kvk} onChange={f('client_kvk')} placeholder="e.g. 12345678" />
              </div>
              <div className="field">
                <label className="field-label">Authorized representative *</label>
                <input className="field-input" required value={form.authorized_rep_name} onChange={f('authorized_rep_name')} placeholder="Full name" />
              </div>
              <div className="field" style={{ gridColumn: '1/-1' }}>
                <label className="field-label">Address</label>
                <input className="field-input" value={form.client_address} onChange={f('client_address')} placeholder="Street, postcode, city" />
              </div>
              <div className="field" style={{ gridColumn: '1/-1' }}>
                <label className="field-label">Function / title of signatory</label>
                <input className="field-input" value={form.authorized_rep_function} onChange={f('authorized_rep_function')} placeholder="e.g. Director, CEO, Privacy Officer" />
              </div>
            </div>
            <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end' }}>
              <button
                className="btn btn--primary"
                disabled={!form.client_company_name.trim() || !form.authorized_rep_name.trim()}
                onClick={() => setStep(2)}
              >
                Continue to review →
              </button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            {/* Key terms */}
            <div className="card" style={{ margin: '0 0 16px' }}>
              <div className="card-head"><span className="card-title">Key terms</span></div>
              <div style={{ padding: '4px 20px 16px' }}>
                {KEY_TERMS.map(t => (
                  <div key={t.art} style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--border-hairline)' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--signal)', flexShrink: 0, paddingTop: 2, minWidth: 48 }}>{t.art}</span>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg)', marginBottom: 2 }}>{t.title}</div>
                      <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{t.body}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Full VOK toggle */}
            <div className="card" style={{ margin: '0 0 16px' }}>
              <div
                onClick={() => setShowFull(p => !p)}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 20px', cursor: 'pointer', userSelect: 'none', borderBottom: showFull ? '1px solid var(--border)' : 'none' }}
              >
                <span style={{ fontSize: 13, fontWeight: 500 }}>Full verwerkersovereenkomst</span>
                <span style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>{showFull ? '▾ Collapse' : '▸ View full agreement'}</span>
              </div>
              {showFull && (
                <div style={{ padding: '16px 20px', maxHeight: 440, overflowY: 'auto' }}>
                  {/* Parties */}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
                    {[
                      { role: 'Verwerkingsverantwoordelijke', name: form.client_company_name, detail: `${form.client_kvk ? `KvK: ${form.client_kvk} · ` : ''}${form.client_address || ''}\nVertegenwoordigd door: ${form.authorized_rep_name}${form.authorized_rep_function ? ` (${form.authorized_rep_function})` : ''}` },
                      { role: 'Verwerker', name: 'Lake Project (Lake-Project)', detail: 'KvK: 29816688 · Rotterdam, NL\nVertegenwoordigd door: Alexander van der Plas' },
                    ].map(p => (
                      <div key={p.role} style={{ background: 'var(--abyss)', border: '1px solid var(--border)', borderRadius: 3, padding: 12 }}>
                        <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 4 }}>{p.role}</div>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>{p.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--fg-muted)', lineHeight: 1.65, whiteSpace: 'pre-line' }}>{p.detail}</div>
                      </div>
                    ))}
                  </div>
                  {VOK_ARTICLES.map(a => (
                    <div key={a.title} style={{ marginBottom: 14 }}>
                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg)', marginBottom: 6, paddingBottom: 4, borderBottom: '1px solid var(--border-hairline)' }}>{a.title}</div>
                      {a.body && <p style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.65, margin: '0 0 6px' }}>{a.body}</p>}
                      {a.items && (
                        <ol style={{ margin: '0 0 0 16px', padding: 0 }}>
                          {a.items.map((item, i) => (
                            <li key={i} style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.65, marginBottom: 4 }}>{item}</li>
                          ))}
                        </ol>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Acceptance */}
            <div className="card" style={{ margin: '0 0 16px' }}>
              <div className="card-body">
                <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={agreed}
                    onChange={e => setAgreed(e.target.checked)}
                    style={{ marginTop: 2, flexShrink: 0 }}
                  />
                  <span style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.65 }}>
                    I have read and agree to this verwerkersovereenkomst on behalf of{' '}
                    <strong style={{ color: 'var(--fg)' }}>{form.client_company_name}</strong>, and I am authorized to enter into this agreement on behalf of this company.
                  </span>
                </label>
                {error && (
                  <div style={{ marginTop: 12, padding: '8px 12px', background: 'rgba(220,38,38,0.08)', border: '1px solid rgba(220,38,38,0.3)', borderRadius: 3, fontSize: 12, color: 'var(--danger)' }}>
                    {error}
                  </div>
                )}
              </div>
              <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <button className="btn btn--ghost" onClick={() => setStep(1)}>← Back</button>
                <button
                  className="btn btn--primary"
                  disabled={!agreed || busy}
                  onClick={accept}
                >
                  {busy ? 'Processing…' : 'Sign & accept agreement'}
                </button>
              </div>
            </div>

            <div style={{ fontSize: 11, color: 'var(--fg-faint)', fontFamily: 'var(--font-mono)', lineHeight: 1.6 }}>
              Your acceptance is recorded with a timestamp and your IP address. This constitutes a legally binding agreement under Dutch law and eIDAS Art. 25.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.Agreements = Agreements;
