// Acceptatie-agent · Interactieve sandbox v3
// 3 fases: Data (visuele streams) · Toets (compactere rules-grid) · Adviesrapport

const { useState } = React;

// ============================================================================
// DATA · 3 scenario's
// ============================================================================
// Streams (vaste volgorde): 0=polis · 1=object · 2=relatie · 3=openbaar · 4=satelliet
// Elke stream kent vaste viz-type + scenario-specifieke data.

const ACCEPT_SCENARIOS = [
  {
    key: 'risico',
    label: 'Risico-flags',
    sub: 'Meerdere signalen tegelijk',
    accent: 'fail',
    aanvraag: {
      ref: 'AANVR-0243',
      product: 'Bedrijfsgebouw',
      klant: 'T. van Berg',
      profiel: 'Buiten standaardkaders',
      som: '€ 310.000'
    },
    streams: [
      { label: 'Polis-historie',   status: 'warn', fact: '2 claims · 3 jaar',
        viz: { kind: 'spark', bars: [2,7,3,8,2,3], spikes: [1,3] } },
      { label: 'Object & risico',  status: 'fail', fact: 'Waarde € 310.000',
        viz: { kind: 'gauge', pct: 124, limit: 90 } },
      { label: 'Relatie & klant',  status: 'ok',   fact: 'KYC compleet',
        viz: { kind: 'id', initials: 'TB', checks: ['KYC', 'Sanctie', 'ID'] } },
      { label: 'Openbare bronnen', status: 'warn', fact: 'Eigendom < 1 jaar oud',
        viz: { kind: 'map', pinX: 38, pinY: 60, zone: true } },
      { label: 'Satellietbeeld',   status: 'fail', fact: '~180m² gemeten',
        viz: { kind: 'sat', mismatch: true } },
      { label: 'Aanvraag-bijlagen', status: 'ok',  fact: '1 foto · zijaanzicht',
        viz: { kind: 'photos', count: 1 } }
    ],
    rules: [
      { label: 'Object-waarde buiten limiet',       status: 'fail', detail: '24% boven volmacht-mandaat' },
      { label: 'Object-gegevens kloppen niet',      status: 'fail', detail: 'Satelliet-afwijking' },
      { label: 'Locatie-risico verhoogd',           status: 'warn', detail: 'Risico-zone' },
      { label: 'KYC en sanctie-screening',          status: 'ok' },
      { label: 'Claim-historie boven norm',         status: 'warn', detail: '2 claims in 3 jaar' },
      { label: 'Premie binnen marge-richtlijn',     status: 'ok' }
    ],
    advies: {
      titel: 'Afwijzen',
      kop: 'Voorstel: afwijzen, tegenvoorstel mogelijk',
      onderbouwing: 'De verzekerde som ligt 24% boven het volmacht-mandaat. Het satellietbeeld toont een grotere bebouwing dan opgegeven en de eigendomsoverdracht is recent. De combinatie wijst op een ander risicoprofiel dan het standaardproduct dekt.',
      vervolg: {
        label: 'Mogelijk tegenvoorstel',
        body: 'Accepteren onder voorwaarde van aanvullende preventie en een hogere eigen-risico-staffel.'
      }
    }
  },
  {
    key: 'schoon',
    label: 'Schoon dossier',
    sub: 'Alles binnen de kaders',
    accent: 'ok',
    aanvraag: {
      ref: 'AANVR-0241',
      product: 'Woning',
      klant: 'J. Bakker',
      profiel: 'Binnen acceptatiekaders',
      som: '€ 85.000'
    },
    streams: [
      { label: 'Polis-historie',   status: 'ok', fact: '3 polissen · 0 claims',
        viz: { kind: 'spark', bars: [2,3,2,4,3,3], spikes: [] } },
      { label: 'Object & risico',  status: 'ok', fact: 'Binnen profiel',
        viz: { kind: 'gauge', pct: 34, limit: 90 } },
      { label: 'Relatie & klant',  status: 'ok', fact: 'KYC compleet',
        viz: { kind: 'id', initials: 'JK', checks: ['KYC', 'Sanctie', 'ID'] } },
      { label: 'Openbare bronnen', status: 'ok', fact: 'BAG bevestigt opgave',
        viz: { kind: 'map', pinX: 52, pinY: 48 } },
      { label: 'Satellietbeeld',   status: 'ok', fact: 'Beeld matcht opgave',
        viz: { kind: 'sat' } },
      { label: 'Aanvraag-bijlagen', status: 'ok', fact: '3 foto\'s · alle aanzichten',
        viz: { kind: 'photos', count: 3 } }
    ],
    rules: [
      { label: 'Object-waarde binnen limiet',       status: 'ok' },
      { label: 'Object-gegevens compleet',          status: 'ok' },
      { label: 'Locatie-risico acceptabel',         status: 'ok' },
      { label: 'KYC en sanctie-screening',          status: 'ok' },
      { label: 'Claim-historie binnen norm',        status: 'ok' },
      { label: 'Premie binnen marge-richtlijn',     status: 'ok' }
    ],
    advies: {
      titel: 'Accepteren',
      kop: 'Voorstel: accepteren',
      onderbouwing: 'Bestaande klant met schoon claim-verleden, object binnen het standaardprofiel en alle bronnen bevestigen de opgave. Premie volgt rechtstreeks uit het tarief-tabel.',
      vervolg: null
    }
  }
];

const ACCEPT_STEPS = [
  { key: 'kies',   label: 'Aanvraag' },
  { key: 'data',   label: 'Data' },
  { key: 'toets',  label: 'Toets' },
  { key: 'advies', label: 'Adviesrapport' }
];

const ACCEPT_AUTOPLAY_MS = 5500;

// ============================================================================
// VIZ COMPONENTS · één per stream-type
// ============================================================================

const VIZ_COLOR = { ok: '#8B8680', warn: '#FB993F', fail: '#F83C72' };

// VIZ helpers — neutrale stroke voor alle baseline-elementen, accent alleen voor warn/fail
const VIZ_INK = '#2A2A2A';
const VIZ_RULE = '#C8C0B5';
const VIZ_GRID = '#E5DFD3';

// 1. Polis-historie · timeline · ticks + claim-markers
const VizSpark = ({ status, viz }) => {
  const w = 200, h = 70;
  const axisY = h - 14;
  const padX = 14;
  const n = viz.bars.length;
  const stepX = (w - padX * 2) / (n - 1);
  const claims = viz.spikes || [];
  return (
    <svg className="acc-viz-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
      <line x1={padX} y1={axisY} x2={w - padX} y2={axisY} stroke={VIZ_RULE} strokeWidth="1" />
      {viz.bars.map((_, i) => {
        const x = padX + i * stepX;
        return <line key={i} x1={x} y1={axisY - 2.5} x2={x} y2={axisY + 2.5} stroke={VIZ_RULE} strokeWidth="1" />;
      })}
      {claims.map((i, k) => {
        const x = padX + i * stepX;
        return (
          <g key={`c-${k}`} style={{ animationDelay: `${k * 140 + 200}ms` }} className="acc-viz-claim">
            <line x1={x} y1={axisY - 1} x2={x} y2={axisY - 18} stroke={VIZ_COLOR.warn} strokeWidth="1.5" />
            <circle cx={x} cy={axisY - 20} r="2.2" fill={VIZ_COLOR.warn} />
          </g>
        );
      })}
    </svg>
  );
};

// 2. Object & risico · minimal threshold line · geen labels
const VizGauge = ({ status, viz }) => {
  const w = 200, h = 70;
  const trackY = h / 2;
  const padX = 14;
  const trackW = w - padX * 2;
  const fillPct = Math.min(viz.pct, 130) / 130;
  const limitPct = viz.limit / 130;
  const overLimit = viz.pct > viz.limit;
  return (
    <svg className="acc-viz-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
      <line x1={padX} y1={trackY} x2={w - padX} y2={trackY} stroke={VIZ_RULE} strokeWidth="2.5" strokeLinecap="round" />
      <line x1={padX} y1={trackY} x2={padX + trackW * fillPct} y2={trackY}
        stroke={overLimit ? VIZ_COLOR.fail : VIZ_INK}
        strokeWidth="2.5" strokeLinecap="round"
        className="acc-viz-gauge-fill" />
      <line
        x1={padX + trackW * limitPct} y1={trackY - 9}
        x2={padX + trackW * limitPct} y2={trackY + 9}
        stroke={VIZ_INK} strokeWidth="1" strokeOpacity="0.5"
      />
    </svg>
  );
};

// 3. Relatie & klant · code-stijl verificatie-rijen
const VizIdentity = ({ status, viz }) => (
  <div className="acc-viz-id">
    {viz.checks.map((c, i) => (
      <div key={i} className="acc-viz-id-row" style={{ animationDelay: `${i * 90}ms` }}>
        <span className="acc-viz-id-key">{c.toLowerCase()}</span>
        <span className="acc-viz-id-line" />
        <svg width="9" height="9" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 5L4 7L8 3" fill="none" stroke={VIZ_INK} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    ))}
  </div>
);

// 4. Openbare bronnen · crosshair op fijn coördinaten-raster
const VizMap = ({ status, viz }) => {
  const cx = viz.pinX * 2;
  const cy = viz.pinY * 0.9;
  return (
    <svg className="acc-viz-svg" viewBox="0 0 200 90" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <pattern id={`mapfine-${status}`} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
          <path d="M10 0H0V10" stroke={VIZ_GRID} strokeWidth="0.4" fill="none" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="200" height="90" fill={`url(#mapfine-${status})`} />
      {viz.zone && (
        <circle cx={cx} cy={cy} r="22" stroke={VIZ_COLOR.warn} strokeWidth="0.8" strokeOpacity="0.7" fill="none" strokeDasharray="2 3" />
      )}
      <g className="acc-viz-cross">
        <line x1={cx - 14} y1={cy} x2={cx - 4} y2={cy} stroke={VIZ_INK} strokeWidth="1" />
        <line x1={cx + 4} y1={cy} x2={cx + 14} y2={cy} stroke={VIZ_INK} strokeWidth="1" />
        <line x1={cx} y1={cy - 14} x2={cx} y2={cy - 4} stroke={VIZ_INK} strokeWidth="1" />
        <line x1={cx} y1={cy + 4} x2={cx} y2={cy + 14} stroke={VIZ_INK} strokeWidth="1" />
        <circle cx={cx} cy={cy} r="1.6" fill={VIZ_INK} />
      </g>
    </svg>
  );
};

// 5. Satellietbeeld · pixel-mosaiek · centrale bebouwing-cluster
const VizSat = ({ status, viz }) => {
  const cols = 14, rows = 6;
  const w = 200, h = 90;
  const tileW = w / cols, tileH = h / rows;
  // Bebouwing-cluster · scenario-onafhankelijk dezelfde compacte vorm
  const inBuilding = (r, c) => (r >= 2 && r <= 3 && c >= 6 && c <= 7) || (r === 2 && c === 5) || (r === 3 && c === 8);
  // Mismatch · uitbreiding rondom (toont dat satelliet meer ziet dan opgave)
  const inExtended = (r, c) => viz.mismatch && !inBuilding(r, c) && r >= 1 && r <= 4 && c >= 4 && c <= 9;
  const rects = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let fill = 'transparent', op = 1;
      if (inBuilding(r, c)) { fill = VIZ_INK; op = 0.92; }
      else if (inExtended(r, c)) { fill = VIZ_COLOR.fail; op = 0.30; }
      rects.push(
        <rect key={`${r}-${c}`}
          x={c * tileW + 0.4} y={r * tileH + 0.4}
          width={tileW - 0.8} height={tileH - 0.8}
          fill={fill} fillOpacity={op}
          stroke={VIZ_GRID} strokeWidth="0.4"
        />
      );
    }
  }
  return (
    <svg className="acc-viz-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
      {rects}
    </svg>
  );
};

// 6. Aanvraag-bijlagen · clean photo-tiles, geen marker
const VizPhotos = ({ status, viz }) => (
  <div className="acc-viz-photos">
    {Array.from({ length: viz.count }).map((_, i) => (
      <div
        key={i}
        className="acc-viz-photo"
        style={{ animationDelay: `${i * 100}ms` }}
      />
    ))}
  </div>
);

const VIZ_MAP = { spark: VizSpark, gauge: VizGauge, id: VizIdentity, map: VizMap, sat: VizSat, photos: VizPhotos };

// ============================================================================
// FASES
// ============================================================================

const StatusDot = ({ status }) => (
  <span className={`acc-dot acc-dot-${status}`} aria-hidden="true" />
);

const STREAM_LABELS = { ok: 'gevuld', warn: 'afwijking', fail: 'buiten kader' };

// --- Fase 0: KIES · aanvraag-picker -----------------------------------
const PhaseKies = ({ onPick }) => (
  <div className="acc-kies">
    <div className="acc-kies-head">
      <div className="acc-kies-tag">Inbox · acceptatie</div>
      <div className="acc-kies-titel">Kies een aanvraag uit de inbox</div>
      <div className="acc-kies-sub">Twee voorbereide voorbeelden — één schoon, één met risico-flags.</div>
    </div>
    <div className="acc-kies-grid">
      {ACCEPT_SCENARIOS.map((sc, i) => (
        <button
          key={sc.key}
          type="button"
          className={`acc-kies-card acc-kies-card-${sc.accent}`}
          onClick={() => onPick(sc.key)}
        >
          <div className="acc-kies-card-top">
            <span className="acc-kies-card-num">{String(i + 1).padStart(2, '0')}</span>
            <span className={`acc-kies-card-pill acc-kies-card-pill-${sc.accent}`}>{sc.label}</span>
          </div>
          <div className="acc-kies-card-product">{sc.aanvraag.product}</div>
          <div className="acc-kies-card-klant">{sc.aanvraag.klant} · <span className="mono">{sc.aanvraag.ref}</span></div>
          <div className="acc-kies-card-foot">
            <span>{sc.sub}</span>
            <span className="acc-kies-card-arrow">→</span>
          </div>
        </button>
      ))}
    </div>
  </div>
);

// --- Fase 1: DATA ---------------------------------------------------
const PhaseData = ({ scenario }) => {
  const total = scenario.streams.length;
  // Data-fase: alles is "gevuld" zolang het opgehaald is. Afwijkingen verschijnen pas bij toets.
  // We laten de viz-kleuren wel de onderliggende waardes tonen (visueel hint),
  // maar de status-pill en card-chrome blijven neutraal "gevuld".
  return (
    <div className="acc-phase acc-data-phase">

      {/* Banner */}
      <div className={`acc-data-banner acc-data-banner-${scenario.accent}`}>
        <div className="acc-data-banner-l">
          <div className="acc-data-banner-tag">Verzamelen databronnen</div>
          <div className="acc-data-banner-titel">
            Verzamelen van <strong>{total} databronnen</strong> voor {scenario.aanvraag.product.toLowerCase()}
          </div>
          <div className="acc-data-banner-meta">
            <span>{scenario.aanvraag.klant}</span>
            <span className="acc-data-banner-sep">·</span>
            <span className="mono">{scenario.aanvraag.som}</span>
            <span className="acc-data-banner-sep">·</span>
            <span className="mono">{scenario.aanvraag.ref}</span>
          </div>
        </div>
        <div className="acc-data-banner-r">
          <div className="acc-data-progress">
            {scenario.streams.map((s, i) => (
              <span
                key={i}
                className="acc-data-progress-bead acc-data-progress-ok"
                style={{ animationDelay: `${i * 100}ms` }}
              />
            ))}
          </div>
          <div className="acc-data-progress-label">
            <strong>{total}/{total}</strong> gevuld
          </div>
        </div>
      </div>

      {/* Stream-cards · elk met eigen viz · status altijd "gevuld" */}
      <div className="acc-stream-grid">
        {scenario.streams.map((s, i) => {
          const Viz = VIZ_MAP[s.viz.kind];
          return (
            <div
              key={i}
              className="acc-streamcard acc-streamcard-ok"
              style={{ animationDelay: `${i * 90 + 80}ms` }}
            >
              <div className="acc-streamcard-head">
                <div className="acc-streamcard-label">{s.label}</div>
                <StatusDot status="ok" />
              </div>
              <div className="acc-streamcard-viz">
                <Viz status={s.status} viz={s.viz} />
              </div>
              <div className="acc-streamcard-foot">
                <div className="acc-streamcard-fact">{s.fact}</div>
                <div className="acc-streamcard-status acc-streamcard-status-ok">
                  gevuld
                </div>
              </div>
            </div>
          );
        })}
      </div>

    </div>
  );
};

// --- Fase 2: TOETS · compactere regels (geen score-ring) ---
const PhaseToets = ({ scenario }) => {
  const total = scenario.rules.length;
  const okCount = scenario.rules.filter(r => r.status === 'ok').length;
  const warnCount = scenario.rules.filter(r => r.status === 'warn').length;
  const failCount = scenario.rules.filter(r => r.status === 'fail').length;

  return (
    <div className="acc-phase acc-toets-phase">

      <div className="acc-toets-head">
        <div>
          <div className="acc-toets-h">Toets per acceptatieregel</div>
          <p className="acc-toets-sub">Elke regel afzonderlijk getoetst tegen het verzamelde dossier.</p>
        </div>
        <div className="acc-toets-legend">
          <div className="acc-toets-legend-row"><span className="acc-pill acc-pill-ok">{okCount}</span> binnen kader</div>
          {warnCount > 0 && <div className="acc-toets-legend-row"><span className="acc-pill acc-pill-warn">{warnCount}</span> aandacht</div>}
          {failCount > 0 && <div className="acc-toets-legend-row"><span className="acc-pill acc-pill-fail">{failCount}</span> buiten kader</div>}
        </div>
      </div>

      {/* Rules · compact, 2-koloms grid */}
      <div className="acc-rules acc-rules-compact">
        {scenario.rules.map((r, i) => (
          <div
            key={i}
            className={`acc-rule acc-rule-${r.status}`}
            style={{ animationDelay: `${i * 70 + 100}ms` }}
          >
            <div className={`acc-rule-ico acc-rule-ico-${r.status}`}>
              {r.status === 'ok' ? '✓' : r.status === 'warn' ? '!' : '×'}
            </div>
            <div className="acc-rule-body">
              <div className="acc-rule-label">{r.label}</div>
              {r.detail && <div className="acc-rule-detail">{r.detail}</div>}
            </div>
          </div>
        ))}
      </div>

    </div>
  );
};

// --- Fase 3: ADVIESRAPPORT ------------------------------------------
const PhaseAdvies = ({ scenario }) => {
  const a = scenario.advies;
  return (
    <div className="acc-phase acc-rapport-phase">
      <div className={`acc-rapport acc-rapport-${scenario.accent}`}>

        <div className="acc-rapport-header">
          <div className="acc-rapport-meta">
            <div className="acc-rapport-meta-tag">Adviesrapport</div>
            <div className="acc-rapport-meta-ref">{scenario.aanvraag.ref}</div>
          </div>
          <div className={`acc-rapport-stamp acc-rapport-stamp-${scenario.accent}`}>{a.titel}</div>
        </div>

        <div className="acc-rapport-body">

          <div className="acc-rapport-side">
            <div className={`acc-foto acc-foto-${scenario.accent}`}>
              <svg className="acc-foto-svg" viewBox="0 0 200 140" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <pattern id={`acc-stripes-${scenario.accent}`} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
                    <rect width="14" height="14" fill="transparent" />
                    <line x1="0" y1="0" x2="0" y2="14" strokeWidth="3" />
                  </pattern>
                </defs>
                <rect width="200" height="140" fill={`url(#acc-stripes-${scenario.accent})`} />
              </svg>
              <div className="acc-foto-label">
                <div className="acc-foto-label-k">Foto · satellietbeeld</div>
                <div className="acc-foto-label-v">verzekerd object</div>
              </div>
            </div>

            <div className="acc-rapport-kv-list">
              <div>
                <div className="acc-kv-l">Product</div>
                <div className="acc-kv-v">{scenario.aanvraag.product}</div>
              </div>
              <div>
                <div className="acc-kv-l">Klant</div>
                <div className="acc-kv-v">{scenario.aanvraag.klant}</div>
              </div>
              <div>
                <div className="acc-kv-l">Verzekerde som</div>
                <div className="acc-kv-v acc-kv-mono">{scenario.aanvraag.som}</div>
              </div>
            </div>
          </div>

          <div className="acc-rapport-main">
            <div className="acc-rapport-tag">Advies van de agent</div>
            <div className="acc-rapport-kop">{a.kop}</div>
            <p className="acc-rapport-onderbouwing">{a.onderbouwing}</p>

            <div className="acc-rapport-section">
              <div className="acc-rapport-section-l">Onderbouwing per regel</div>
              <div className="acc-rapport-recap">
                {scenario.rules.map((r, i) => (
                  <div key={i} className={`acc-rapport-recap-row acc-rapport-recap-${r.status}`}>
                    <div className={`acc-rule-ico-sm acc-rule-ico-${r.status}`}>
                      {r.status === 'ok' ? '✓' : r.status === 'warn' ? '!' : '×'}
                    </div>
                    <div className="acc-rapport-recap-label">{r.label}</div>
                  </div>
                ))}
              </div>
            </div>

            {a.vervolg && (
              <div className="acc-rapport-section acc-rapport-section-vervolg">
                <div className="acc-rapport-section-l">{a.vervolg.label}</div>
                <p className="acc-rapport-vervolg-b">{a.vervolg.body}</p>
              </div>
            )}
          </div>
        </div>

        <div className="acc-decision">
          <div className="acc-decision-l">
            <div className="acc-decision-avatar">A</div>
            <div>
              <div className="acc-decision-h">Acceptant beslist</div>
            </div>
          </div>
          <div className="acc-decision-r">
            <button type="button" className="acc-decision-btn-ghost" disabled>Overrulen</button>
            <button type="button" className="acc-decision-btn-primary" disabled>{a.titel}</button>
          </div>
        </div>

      </div>
    </div>
  );
};

// ============================================================================
// MAIN
// ============================================================================
const AcceptatieSandbox = () => {
  const [scenarioKey, setScenarioKey] = useState(null);
  const [stepIdx, setStepIdx] = useState(0);
  const [autoplay, setAutoplay] = useState(false);

  const scenario = scenarioKey ? ACCEPT_SCENARIOS.find(s => s.key === scenarioKey) : null;
  const step = ACCEPT_STEPS[stepIdx];
  const atEnd = stepIdx === ACCEPT_STEPS.length - 1;

  // Autoplay-loop · alleen na keuze van scenario
  React.useEffect(() => {
    if (!autoplay || !scenario) return;
    if (atEnd) { setAutoplay(false); return; }
    const t = setTimeout(
      () => setStepIdx(i => Math.min(i + 1, ACCEPT_STEPS.length - 1)),
      ACCEPT_AUTOPLAY_MS
    );
    return () => clearTimeout(t);
  }, [autoplay, stepIdx, atEnd, scenario]);

  const pickScenario = (key) => {
    setScenarioKey(key);
    setStepIdx(1); // door naar Data
    setAutoplay(true);
  };

  const jumpToStep = (i) => {
    if (i === 0) { resetAll(); return; } // klik op 'Aanvraag' = andere aanvraag kiezen
    if (i > 0 && !scenario) return;
    setStepIdx(i);
    setAutoplay(false);
  };

  const togglePlay = () => {
    if (!scenario) return;
    if (atEnd) { setStepIdx(1); setAutoplay(true); return; }
    setAutoplay(p => !p);
  };

  const resetAll = () => {
    setScenarioKey(null);
    setStepIdx(0);
    setAutoplay(false);
  };

  return (
    <section className="accsb" id="sandbox">
      <div className="accsb-wrap">
        <div className="accsb-head">
          <div className="eyebrow-big"><span className="bar"></span> Probeer het zelf</div>
          <h2>Een aanvraag binnen. Zie wat de agent doet.</h2>
          <p className="accsb-lede">
            Twee voorbereide aanvragen. Kies er één en loop mee door de fases.
            Eén is schoon, één heeft risico-flags. Het oordeel blijft bij de acceptant.
          </p>
        </div>

        <div className="accsb-stepper">
          {ACCEPT_STEPS.map((s, i) => {
            const disabled = i > 0 && !scenario;
            const state = i === stepIdx ? 'active' : i < stepIdx ? 'done' : 'todo';
            return (
              <button
                key={s.key}
                type="button"
                className={`accsb-step accsb-step-${state}` + (disabled ? ' accsb-step-disabled' : '')}
                onClick={() => jumpToStep(i)}
                disabled={disabled}
                aria-current={state === 'active' ? 'step' : undefined}
              >
                <span className="accsb-step-num">{i < stepIdx && scenario ? '✓' : String(i + 1).padStart(2, '0')}</span>
                <span className="accsb-step-label">{s.label}</span>
                {i === stepIdx && autoplay && scenario && (
                  <span
                    className="accsb-step-prog"
                    key={`prog-${scenarioKey}-${stepIdx}`}
                    style={{ animationDuration: `${ACCEPT_AUTOPLAY_MS}ms` }}
                    aria-hidden="true"
                  />
                )}
              </button>
            );
          })}
        </div>

        <div className="accsb-frame" data-step={step.key}>
          <div className="accsb-frame-head">
            <div className="accsb-fh-left">
              <div className="accsb-fh-avatar">A</div>
              <div>
                <div className="accsb-fh-name">Acceptatie-agent</div>
                <div className="accsb-fh-sub">Werkomgeving van de acceptant</div>
              </div>
            </div>
          </div>

          <div className="accsb-canvas" key={`${scenarioKey || 'kies'}-${step.key}`}>
            {step.key === 'kies'   && <PhaseKies   onPick={pickScenario} />}
            {step.key === 'data'   && scenario && <PhaseData   scenario={scenario} />}
            {step.key === 'toets'  && scenario && <PhaseToets  scenario={scenario} />}
            {step.key === 'advies' && scenario && <PhaseAdvies scenario={scenario} />}
          </div>

          <div className="accsb-controls">
            <button
              type="button"
              className="accsb-btn-ghost"
              onClick={togglePlay}
              disabled={!scenario}
              aria-label={autoplay ? 'Pauze' : (atEnd ? 'Opnieuw afspelen' : 'Afspelen')}
            >
              {!scenario
                ? '▶ Kies eerst een aanvraag'
                : autoplay
                  ? '❚❚ Pauze'
                  : (atEnd ? '↻ Opnieuw afspelen' : '▶ Afspelen')}
            </button>
            <div className="accsb-controls-meta">
              {!scenario
                ? 'Kies een aanvraag om te starten'
                : atEnd
                  ? 'De acceptant neemt het besluit'
                  : autoplay
                    ? `Volgende: ${ACCEPT_STEPS[stepIdx + 1].label.toLowerCase()}`
                    : 'Klik op een fase om verder te gaan'}
            </div>
            {scenario
              ? <button type="button" className="accsb-btn-ghost accsb-btn-reset" onClick={resetAll}>Andere aanvraag</button>
              : <span className="accsb-btn-spacer" aria-hidden="true"></span>}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AcceptatieSandbox });