// Tool detail page — fully built out for SEO A/B Platform, with shells for others

const { useState: useStateTool } = React;

function ToolDetailPage({ toolId, onBack }) {
  const { TOOLS, SPECIALISMS, ToolIcons } = window.SER_DATA;
  const tool = TOOLS.find(t => t.id === toolId) || TOOLS[0];
  const spec = SPECIALISMS.find(s => s.id === tool.spec);

  // Render the SEO A/B platform with full detail
  if (tool.id === 'seo-ab') {
    return <SeoAbPlatform tool={tool} spec={spec} onBack={onBack} />;
  }
  // For other tools, show the generic shell with tool-appropriate inputs
  return <GenericToolShell tool={tool} spec={spec} onBack={onBack} />;
}

/* =====================================================
   SEO A/B Test Platform — full detail
   ===================================================== */

function SeoAbPlatform({ tool, spec, onBack }) {
  const { ToolIcons } = window.SER_DATA;
  const [step, setStep] = useStateTool(3); // landed on step 4 (index 3) showing results — most visual

  const steps = [
    { num: '01', title: 'Data ophalen',   sub: 'GSC of BigQuery' },
    { num: '02', title: 'Groepen maken',  sub: 'Statistisch matchen' },
    { num: '03', title: 'Voorbereiding',  sub: 'Control & variant' },
    { num: '04', title: 'Analyse',        sub: 'Causal Impact' },
  ];

  return (
    <div className="page page-narrow fade-up">
      <ToolHeader tool={tool} spec={spec} onBack={onBack} />

      {/* Stepper */}
      <div className="stepper" data-screen-label="Stepper">
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <button
              className={`step ${step === i ? 'active' : ''} ${step > i ? 'complete' : ''}`}
              onClick={() => setStep(i)}
            >
              <div className="step-num">
                {step > i ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M20 6L9 17l-5-5"/></svg>
                ) : s.num}
              </div>
              <div className="step-text">
                <span className="step-title">{s.title}</span>
                <span className="step-sub">{s.sub}</span>
              </div>
            </button>
            {i < steps.length - 1 && <span className="step-sep">→</span>}
          </React.Fragment>
        ))}
      </div>

      {step === 0 && <Step1Data />}
      {step === 1 && <Step2Groups />}
      {step === 2 && <Step3Prep />}
      {step === 3 && <Step4Analysis />}

      {/* Footer nav */}
      <div style={{display:'flex', justifyContent:'space-between', marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--ink-100)'}}>
        <button className="btn btn-ghost" disabled={step === 0} onClick={() => setStep(Math.max(0, step - 1))}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
          Vorige stap
        </button>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost">Opslaan als concept</button>
          <button className="btn btn-teal" disabled={step === 3} onClick={() => setStep(Math.min(3, step + 1))}>
            {step === 3 ? 'Rapport exporteren' : 'Volgende stap'}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>
  );
}

function ToolHeader({ tool, spec, onBack }) {
  const { ToolIcons } = window.SER_DATA;
  return (
    <div className="tool-header">
      <div className="tool-header-left">
        <div className="tool-icon-lg" style={{background: spec.color}}>{ToolIcons[tool.icon]}</div>
        <div>
          <h1>{tool.name}</h1>
          <div className="meta-row">
            <span className={`pill ${spec.pillClass}`}>
              <span className="pill-dot"></span>
              {spec.label}
            </span>
            <span style={{fontSize:12, color:'var(--ink-400)'}}>·</span>
            <span style={{fontSize:12, color:'var(--ink-500)'}}>{tool.runs} runs · laatst {tool.lastUsed}</span>
          </div>
          <p className="desc">{tool.desc}</p>
        </div>
      </div>
      <div className="tool-header-actions">
        <button className="btn btn-ghost" onClick={onBack}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
          Terug naar Hub
        </button>
        <button className="btn btn-ghost">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </button>
      </div>
    </div>
  );
}

/* ── Step 1: Data ── */
function Step1Data() {
  return (
    <div className="work-grid" data-screen-label="Step 1 Data">
      <div className="work-side">
        <div className="panel">
          <div className="panel-head"><h3>Project</h3></div>
          <div className="panel-body">
            <div className="field">
              <label className="field-label">Project naam</label>
              <input className="input" defaultValue="Klant X — Cat. paginatitels" />
            </div>
            <div className="field">
              <label className="field-label">Opslaglocatie</label>
              <input className="input mono" defaultValue="~/iCloud/SER/ABTests" style={{fontSize:12}} />
              <span className="field-hint">Multi-computer sync via iCloud / Drive.</span>
            </div>
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><h3>Hint</h3></div>
          <div className="panel-body">
            <p style={{fontSize:13}}>Voor betrouwbare resultaten heb je <strong>minimaal 8 weken</strong> data nodig (4 vóór, 4 na test-start).</p>
          </div>
        </div>
      </div>

      <div className="work-main">
        <div className="panel">
          <div className="panel-head">
            <h3>Databron</h3>
            <div className="segmented">
              <button className="active">Search Console</button>
              <button>BigQuery</button>
            </div>
          </div>
          <div className="panel-body">
            <div className="field">
              <label className="field-label">Property</label>
              <select className="select">
                <option>sc-domain:klantx.nl</option>
                <option>https://www.klantx.nl/</option>
                <option>sc-domain:anderklant.nl</option>
              </select>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
              <div className="field">
                <label className="field-label">Periode start</label>
                <input className="input" type="date" defaultValue="2026-02-01" />
              </div>
              <div className="field">
                <label className="field-label">Periode eind</label>
                <input className="input" type="date" defaultValue="2026-04-30" />
              </div>
            </div>

            <div className="field">
              <label className="field-label">URL filter (regex)</label>
              <input className="input mono" defaultValue="^/categorie/" style={{fontSize:12}} />
            </div>

            <div style={{display:'flex', gap:8, marginTop:8}}>
              <button className="btn btn-teal">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                Data ophalen
              </button>
              <button className="btn btn-ghost">Test verbinding</button>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head">
            <h3>Console output</h3>
            <span className="pill pill-success"><span className="pill-dot"></span>Live</span>
          </div>
          <div className="panel-body">
            <div className="output-block">
              <div><span className="dim">[10:42:18]</span> <span className="ok">✓</span> Authenticated via token.json</div>
              <div><span className="dim">[10:42:19]</span> Fetching daterange 2026-02-01 → 2026-04-30…</div>
              <div><span className="dim">[10:42:21]</span> <span className="ok">✓</span> Page-level rows: 4,287</div>
              <div><span className="dim">[10:42:23]</span> <span className="ok">✓</span> Query-level rows: 18,944</div>
              <div><span className="dim">[10:42:23]</span> <span className="warn">⚠</span> 12 URLs hadden &lt;25 impressies — uitgesloten</div>
              <div><span className="dim">[10:42:24]</span> <span className="ok">✓</span> Saved to <span className="mono">data/raw_2026-04-30.parquet</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 2: Groups ── */
function Step2Groups() {
  return (
    <div className="work-grid" data-screen-label="Step 2 Groups">
      <div className="work-side">
        <div className="panel">
          <div className="panel-head"><h3>Configuratie</h3></div>
          <div className="panel-body">
            <div className="field">
              <label className="field-label">Aantal groepen</label>
              <div className="segmented" style={{width:'100%', display:'flex'}}>
                <button>2</button>
                <button className="active" style={{flex:1}}>2 (A/B)</button>
                <button>3</button>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Match-metric</label>
              <select className="select">
                <option>Clicks (90 dagen)</option>
                <option>Impressies (90 dagen)</option>
                <option>Composite score</option>
              </select>
            </div>
            <div className="field">
              <label className="field-label">Random seed</label>
              <input className="input mono" defaultValue="42" />
            </div>
            <button className="btn btn-teal" style={{width:'100%'}}>Verdeel URL's</button>
          </div>
        </div>
      </div>

      <div className="work-main">
        <div className="kpi-grid">
          <div className="kpi"><div className="lbl">Totaal URLs</div><div className="val">4,275</div></div>
          <div className="kpi"><div className="lbl">Control (A)</div><div className="val">2,138</div></div>
          <div className="kpi"><div className="lbl">Variant (B)</div><div className="val">2,137</div></div>
          <div className="kpi"><div className="lbl">Match score</div><div className="val">0.94</div><div className="delta up">excellent</div></div>
        </div>

        <div className="panel">
          <div className="panel-head">
            <h3>Verdeling per groep</h3>
            <span className="pill pill-success"><span className="pill-dot"></span>Statistisch gelijk</span>
          </div>
          <div className="panel-body">
            <div className="chart"><MatchChart/></div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head">
            <h3>Sample URLs</h3>
            <button className="btn btn-sm btn-ghost">Download CSV</button>
          </div>
          <div className="panel-body" style={{padding:0}}>
            <div className="table-wrap">
              <table className="data">
                <thead><tr><th>URL</th><th>Groep</th><th className="num">Clicks</th><th className="num">Impr.</th><th className="num">CTR</th></tr></thead>
                <tbody>
                  {[
                    ['/categorie/tuingereedschap', 'A', 1284, 24850, '5.2%'],
                    ['/categorie/buitenverlichting', 'B', 1198, 23104, '5.2%'],
                    ['/categorie/sierkussens', 'A', 892, 18420, '4.8%'],
                    ['/categorie/loungesets', 'B', 884, 18602, '4.8%'],
                    ['/categorie/parasols', 'A', 756, 14930, '5.1%'],
                  ].map((r, i) => (
                    <tr key={i}>
                      <td className="mono" style={{fontSize:12}}>{r[0]}</td>
                      <td><span className={`pill ${r[1] === 'A' ? 'pill-data' : 'pill-content'}`}><span className="pill-dot"></span>Groep {r[1]}</span></td>
                      <td className="num">{r[2]}</td>
                      <td className="num">{r[3].toLocaleString()}</td>
                      <td className="num">{r[4]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 3: Prep ── */
function Step3Prep() {
  return (
    <div className="work-grid" data-screen-label="Step 3 Prep">
      <div className="work-side">
        <div className="panel">
          <div className="panel-head"><h3>Test-periode</h3></div>
          <div className="panel-body">
            <div className="field">
              <label className="field-label">Pre-periode (baseline)</label>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                <input className="input" type="date" defaultValue="2026-02-01"/>
                <input className="input" type="date" defaultValue="2026-03-15"/>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Post-periode (na change)</label>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                <input className="input" type="date" defaultValue="2026-03-16"/>
                <input className="input" type="date" defaultValue="2026-04-30"/>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Wat is er gewijzigd?</label>
              <textarea className="textarea" defaultValue="Title-tag herschrijving op variant URLs (B) — toevoeging van merknaam aan einde + jaartal."/>
            </div>
          </div>
        </div>
      </div>

      <div className="work-main">
        <div className="panel">
          <div className="panel-head"><h3>Klaar voor analyse</h3></div>
          <div className="panel-body">
            <div className="kpi-grid" style={{marginBottom:18}}>
              <div className="kpi"><div className="lbl">Pre-periode</div><div className="val">43</div><div className="delta">dagen</div></div>
              <div className="kpi"><div className="lbl">Post-periode</div><div className="val">46</div><div className="delta">dagen</div></div>
              <div className="kpi"><div className="lbl">Data points</div><div className="val">8,919</div></div>
              <div className="kpi"><div className="lbl">Coverage</div><div className="val">98.4%</div><div className="delta up">healthy</div></div>
            </div>

            <h4 style={{marginBottom:10}}>Data quality checks</h4>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {[
                ['Geen ontbrekende dagen in pre-periode',  'ok'],
                ['Geen ontbrekende dagen in post-periode', 'ok'],
                ['Geen outliers > 3σ gedetecteerd',        'ok'],
                ['Seizoenscorrectie aanbevolen (paaspiek)', 'warn'],
                ['Stationaire baseline (ADF p < 0.05)',    'ok'],
              ].map(([txt, st], i) => (
                <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--ink-25)', borderRadius:8}}>
                  {st === 'ok' ? (
                    <span style={{width:18, height:18, borderRadius:'50%', background:'var(--ser-teal-50)', color:'var(--ser-teal-600)', display:'grid', placeItems:'center'}}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>
                    </span>
                  ) : (
                    <span style={{width:18, height:18, borderRadius:'50%', background:'var(--ser-gold-50)', color:'#b37800', display:'grid', placeItems:'center', fontWeight:700, fontSize:11}}>!</span>
                  )}
                  <span style={{fontSize:13}}>{txt}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 4: Analysis (the showpiece) ── */
function Step4Analysis() {
  return (
    <div data-screen-label="Step 4 Analysis" style={{display:'flex', flexDirection:'column', gap:20}}>
      {/* Verdict hero */}
      <div className="verdict">
        <div>
          <div className="verdict-eyebrow">Causal Impact Verdict</div>
          <h2>De variant presteert significant beter.</h2>
          <p>Met 96.4% zekerheid is de uplift veroorzaakt door de title-tag wijziging — niet door externe factoren of toeval.</p>
          <div style={{marginTop:18, display:'flex', gap:10}}>
            <span className="pill pill-success" style={{padding:'5px 12px', fontSize:12}}>
              <span className="pill-dot"></span>
              Go — uitrollen naar control
            </span>
            <span className="pill" style={{background:'rgba(255,255,255,0.10)', color:'rgba(255,255,255,0.85)', border:'1px solid rgba(255,255,255,0.2)'}}>
              p = 0.036
            </span>
          </div>
        </div>
        <div>
          <div className="verdict-big">+12.8%</div>
          <div style={{fontSize:13, color:'rgba(255,255,255,0.6)', marginTop:4, marginBottom:18}}>geschatte clicks-uplift (95% CI: +6.4% — +18.9%)</div>
          <div className="verdict-stats">
            <div className="vs"><span className="l">Posterior prob.</span><span className="v">96.4%</span></div>
            <div className="vs"><span className="l">Cumulatief effect</span><span className="v">+8,420 clicks</span></div>
            <div className="vs"><span className="l">Periode</span><span className="v">46 dagen</span></div>
          </div>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="lbl">Clicks (geobserveerd)</div>
          <div className="val">74,128</div>
          <div className="delta up">↑ 12.8% vs voorspeld</div>
        </div>
        <div className="kpi">
          <div className="lbl">Clicks (verwacht)</div>
          <div className="val">65,708</div>
          <div className="delta">contrafactueel</div>
        </div>
        <div className="kpi">
          <div className="lbl">CTR delta</div>
          <div className="val">+0.42pp</div>
          <div className="delta up">van 4.81 → 5.23%</div>
        </div>
        <div className="kpi">
          <div className="lbl">Posities</div>
          <div className="val">+1.4</div>
          <div className="delta up">avg. positie verbeterd</div>
        </div>
      </div>

      {/* Main impact chart */}
      <div className="panel">
        <div className="panel-head">
          <h3>Causal Impact — Clicks per dag</h3>
          <div className="segmented">
            <button className="active">Clicks</button>
            <button>Impressies</button>
            <button>CTR</button>
          </div>
        </div>
        <div className="panel-body">
          <div className="chart" style={{height: 320}}><CausalChart/></div>
          <div style={{display:'flex', gap:18, marginTop:12, fontSize:12, color:'var(--ink-500)', flexWrap:'wrap'}}>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:12, height:2, background:'var(--ser-navy)'}}></span>Geobserveerd</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:12, height:2, background:'var(--ser-teal)', borderTop:'2px dashed var(--ser-teal)'}}></span>Voorspelling (counterfactual)</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:12, height:8, background:'rgba(0,180,160,0.18)'}}></span>95% CI</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:1, height:10, background:'var(--ser-gold)'}}></span>Test-start (16 mrt)</span>
          </div>
        </div>
      </div>

      {/* Recommendation + secondary */}
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:20}}>
        <div className="panel">
          <div className="panel-head"><h3>Aanbeveling</h3></div>
          <div className="panel-body">
            <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-700)'}}>
              Roll de variant <strong style={{color:'var(--ser-navy)'}}>uit naar de hele site</strong>. Het effect is statistisch significant, robuust over verschillende segmenten, en het 95% credible interval ligt volledig boven nul.
            </p>
            <h4 style={{margin:'18px 0 10px'}}>Vervolgstappen</h4>
            <ol style={{margin:0, paddingLeft: 20, fontSize:13, color:'var(--ink-700)', lineHeight:1.7}}>
              <li>Apply title-tag template ook op control-groep (2,138 URLs).</li>
              <li>Monitor de impact op brand-queries — daar zou een lichte daling kunnen optreden.</li>
              <li>Plan vervolgtest: hetzelfde patroon op product-detail-pagina's.</li>
            </ol>
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><h3>Robuustheid</h3></div>
          <div className="panel-body" style={{display:'flex', flexDirection:'column', gap:14}}>
            <RobustnessRow label="Spillover check"          score={0.92} status="ok" />
            <RobustnessRow label="Placebo-test (pre-only)" score={0.04} status="ok" tip="laag is goed" />
            <RobustnessRow label="Brand vs non-brand split"score={0.81} status="ok" />
            <RobustnessRow label="Seizoenscorrectie"        score={0.67} status="warn" />
          </div>
        </div>
      </div>
    </div>
  );
}

function RobustnessRow({ label, score, status, tip }) {
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
        <span style={{fontSize:13, color:'var(--ink-700)'}}>{label}</span>
        <span style={{fontSize:13, fontWeight:700, color: status === 'ok' ? 'var(--ok)' : 'var(--warn)'}}>{score.toFixed(2)}</span>
      </div>
      <div className="bar"><div style={{width: `${score*100}%`, background: status === 'ok' ? 'var(--ser-teal)' : 'var(--ser-gold)'}}/></div>
      {tip && <div style={{fontSize:11, color:'var(--ink-400)', marginTop:4}}>{tip}</div>}
    </div>
  );
}

/* ── Charts (SVG) ── */

function CausalChart() {
  // Generate plausible data
  const days = 90;
  const testStart = 43;
  const W = 800, H = 320, PAD = 36;
  const innerW = W - PAD*2, innerH = H - PAD*2;

  const obs = [];
  const pred = [];
  const ciHigh = [];
  const ciLow = [];
  let baseline = 700;
  for (let i = 0; i < days; i++) {
    const seasonal = Math.sin(i / 7 * Math.PI) * 60;
    const noise = (Math.sin(i * 1.7) + Math.cos(i * 0.9)) * 30;
    const trend = i * 1.2;
    const counterfactual = baseline + seasonal + noise + trend;
    pred.push(counterfactual);
    ciHigh.push(counterfactual + 80);
    ciLow.push(counterfactual - 80);
    if (i < testStart) {
      obs.push(counterfactual + (Math.sin(i*0.4) * 20));
    } else {
      const lift = 1 + 0.13 + Math.sin(i * 0.3) * 0.04;
      obs.push(counterfactual * lift);
    }
  }

  const allVals = [...obs, ...ciHigh, ...ciLow];
  const minY = Math.min(...allVals) - 30;
  const maxY = Math.max(...allVals) + 30;

  const x = (i) => PAD + (i / (days-1)) * innerW;
  const y = (v) => PAD + innerH - ((v - minY) / (maxY - minY)) * innerH;

  const linePath = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(v)}`).join(' ');
  const bandPath =
    ciHigh.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(v)}`).join(' ') +
    ' ' +
    ciLow.slice().reverse().map((v, i) => `L${x(days-1-i)},${y(v)}`).join(' ') +
    ' Z';

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      {/* grid */}
      {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
        <line key={i} x1={PAD} x2={W - PAD} y1={PAD + innerH * t} y2={PAD + innerH * t} stroke="#ebedf3" strokeWidth="1"/>
      ))}
      {/* CI band */}
      <path d={bandPath} fill="rgba(0,180,160,0.16)" />
      {/* Counterfactual */}
      <path d={linePath(pred)} fill="none" stroke="#00b4a0" strokeWidth="2" strokeDasharray="5 4" />
      {/* Observed */}
      <path d={linePath(obs)} fill="none" stroke="#1e1e5a" strokeWidth="2.4" />
      {/* Test start line */}
      <line x1={x(testStart)} x2={x(testStart)} y1={PAD} y2={H - PAD} stroke="#f5a523" strokeWidth="1.5" strokeDasharray="3 3"/>
      <text x={x(testStart) + 6} y={PAD + 14} fontSize="11" fill="#b37800" fontWeight="600">Test-start</text>
      {/* Y axis labels */}
      {[0, 0.5, 1].map((t, i) => {
        const v = maxY - (maxY - minY) * t;
        return <text key={i} x={PAD - 6} y={PAD + innerH * t + 4} fontSize="10" fill="#7e8298" textAnchor="end">{Math.round(v)}</text>;
      })}
    </svg>
  );
}

function MatchChart() {
  const W = 800, H = 240, PAD = 30;
  const bins = 12;
  const innerW = W - PAD * 2, innerH = H - PAD * 2;
  const binW = innerW / bins;
  const aData = [4, 8, 14, 22, 28, 34, 30, 22, 14, 8, 5, 2];
  const bData = [3, 9, 13, 23, 27, 33, 31, 23, 13, 9, 4, 3];
  const max = 38;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
        <line key={i} x1={PAD} x2={W - PAD} y1={PAD + innerH * t} y2={PAD + innerH * t} stroke="#ebedf3"/>
      ))}
      {aData.map((v, i) => (
        <rect key={'a'+i} x={PAD + i*binW + 4} y={PAD + innerH - (v/max)*innerH} width={binW/2 - 4} height={(v/max)*innerH} fill="#2563eb" opacity="0.85" rx="2"/>
      ))}
      {bData.map((v, i) => (
        <rect key={'b'+i} x={PAD + i*binW + binW/2} y={PAD + innerH - (v/max)*innerH} width={binW/2 - 4} height={(v/max)*innerH} fill="#7c5cff" opacity="0.85" rx="2"/>
      ))}
      <text x={PAD} y={H - 8} fontSize="10" fill="#7e8298">low traffic</text>
      <text x={W - PAD} y={H - 8} fontSize="10" fill="#7e8298" textAnchor="end">high traffic</text>
      <g transform={`translate(${W - 180}, ${PAD + 8})`}>
        <rect width="170" height="44" fill="white" stroke="#ebedf3" rx="6"/>
        <rect x="10" y="10" width="10" height="10" fill="#2563eb" rx="2"/>
        <text x="26" y="19" fontSize="11" fill="#2a2a4a">Groep A · 2,138</text>
        <rect x="10" y="24" width="10" height="10" fill="#7c5cff" rx="2"/>
        <text x="26" y="33" fontSize="11" fill="#2a2a4a">Groep B · 2,137</text>
      </g>
    </svg>
  );
}

/* =====================================================
   Generic shell — used for the other 8 tools
   ===================================================== */

function GenericToolShell({ tool, spec, onBack }) {
  const config = TOOL_CONFIGS[tool.id] || TOOL_CONFIGS.default;
  const [tab, setTab] = useStateTool('input');

  return (
    <div className="page page-narrow fade-up">
      <ToolHeader tool={tool} spec={spec} onBack={onBack} />

      <div className="stepper" style={{padding: 4}}>
        {[
          ['input',   'Input',     '01'],
          ['running', 'Verwerking', '02'],
          ['output',  'Resultaat', '03'],
        ].map(([id, label, num]) => (
          <button key={id} className={`step ${tab === id ? 'active' : ''} ${(['input','running','output'].indexOf(tab) > ['input','running','output'].indexOf(id)) ? 'complete' : ''}`} onClick={() => setTab(id)}>
            <div className="step-num">{num}</div>
            <div className="step-text"><span className="step-title">{label}</span></div>
          </button>
        ))}
      </div>

      {tab === 'input'   && <GenericInput tool={tool} config={config} onRun={() => setTab('running')} />}
      {tab === 'running' && <GenericRunning tool={tool} config={config} onDone={() => setTab('output')} />}
      {tab === 'output'  && <GenericOutput tool={tool} config={config} />}
    </div>
  );
}

function GenericInput({ tool, config, onRun }) {
  return (
    <div className="work-grid">
      <div className="work-side">
        <div className="panel">
          <div className="panel-head"><h3>API & credentials</h3></div>
          <div className="panel-body">
            {config.credentials.map((c, i) => (
              <div className="field" key={i}>
                <label className="field-label">{c}</label>
                <input className="input mono" type="password" defaultValue="••••••••••••••••" style={{fontSize:12}}/>
                <span className="field-hint">opgeslagen in vault</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="work-main">
        <div className="panel">
          <div className="panel-head"><h3>Input</h3></div>
          <div className="panel-body">
            <div className="upload-zone">
              <div className="icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
              </div>
              <div className="ttl">Sleep een bestand of klik om te uploaden</div>
              <div className="sub">{config.fileHint}</div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginTop:18}}>
              {config.fields.map((f, i) => (
                <div className="field" key={i}>
                  <label className="field-label">{f.label}</label>
                  {f.type === 'select' ? (
                    <select className="select">{f.options.map(o => <option key={o}>{o}</option>)}</select>
                  ) : (
                    <input className="input" defaultValue={f.value} />
                  )}
                </div>
              ))}
            </div>

            <div style={{display:'flex', gap:8, marginTop:18}}>
              <button className="btn btn-teal" onClick={onRun}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>
                Start {tool.name}
              </button>
              <button className="btn btn-ghost">Voorbeeld op 5 rijen</button>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>Wat doet deze tool?</h3></div>
          <div className="panel-body">
            <p style={{fontSize:14, color:'var(--ink-700)'}}>{tool.desc}</p>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14}}>
              <div>
                <h4>Inputs</h4>
                <ul style={{margin:'8px 0 0', paddingLeft:18, fontSize:13, color:'var(--ink-700)', lineHeight:1.7}}>
                  {tool.inputs.map(i => <li key={i}>{i}</li>)}
                </ul>
              </div>
              <div>
                <h4>Outputs</h4>
                <ul style={{margin:'8px 0 0', paddingLeft:18, fontSize:13, color:'var(--ink-700)', lineHeight:1.7}}>
                  {tool.outputs.map(o => <li key={o}>{o}</li>)}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function GenericRunning({ tool, config, onDone }) {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setProgress(p => Math.min(100, p + 4)), 80);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => { if (progress >= 100) setTimeout(onDone, 400); }, [progress]);

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>Verwerking — {tool.name}</h3>
        <span className="pill pill-success"><span className="pill-dot"></span>Running</span>
      </div>
      <div className="panel-body">
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:8, fontSize:13}}>
          <span style={{fontWeight:600}}>{progress < 100 ? 'Bezig met verwerken…' : 'Klaar! Resultaat openen…'}</span>
          <span className="mono">{progress}%</span>
        </div>
        <div className="bar"><div style={{width: `${progress}%`}}/></div>
        <div className="output-block" style={{marginTop:18, height: 200}}>
          {config.logLines.slice(0, Math.floor(progress / 8)).map((l, i) => (
            <div key={i}><span className="dim">[{String(i).padStart(2,'0')}:{String(i*7%60).padStart(2,'0')}]</span> {l}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function GenericOutput({ tool, config }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div className="kpi-grid">
        {config.outputKpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="lbl">{k.label}</div>
            <div className="val">{k.value}</div>
            {k.delta && <div className={`delta ${k.deltaDir || 'up'}`}>{k.delta}</div>}
          </div>
        ))}
      </div>

      <div className="panel">
        <div className="panel-head">
          <h3>Resultaat</h3>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-sm btn-ghost">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
              CSV
            </button>
            <button className="btn btn-sm btn-ghost">XLSX</button>
            <button className="btn btn-sm btn-teal">Naar Drive</button>
          </div>
        </div>
        <div className="panel-body" style={{padding:0}}>
          <div className="table-wrap">
            <table className="data">
              <thead><tr>{config.outputCols.map(c => <th key={c}>{c}</th>)}</tr></thead>
              <tbody>
                {config.outputRows.map((r, i) => (
                  <tr key={i}>{r.map((cell, j) => <td key={j} className={typeof cell === 'number' ? 'num' : ''}>{cell}</td>)}</tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

/* === Tool-specific configurations === */
const TOOL_CONFIGS = {
  default: {
    credentials: ['API key'],
    fileHint: 'CSV of XLSX',
    fields: [
      { label: 'Model', type: 'select', options: ['Default', 'Premium'] },
      { label: 'Batch size', value: '50' },
    ],
    logLines: ['Loading input…', '✓ 1,248 rows parsed', 'Connecting to API…', '✓ Rate limit ok', 'Processing batch 1/25…', 'Processing batch 5/25…', 'Processing batch 12/25…', 'Processing batch 20/25…', '✓ All batches complete', '✓ Saved to disk', 'Done.', 'Output ready.', 'Closing…'],
    outputKpis: [
      { label: 'Verwerkt', value: '1,248' },
      { label: 'Succesvol', value: '1,242', delta: '99.5%', deltaDir: 'up' },
      { label: 'Failed', value: '6', delta: '0.5%', deltaDir: 'down' },
      { label: 'Tijd', value: '4m 18s' },
    ],
    outputCols: ['Input', 'Resultaat', 'Status', 'Tijd'],
    outputRows: [
      ['row_1', 'OK — generated', 'Success', '0.4s'],
      ['row_2', 'OK — generated', 'Success', '0.5s'],
      ['row_3', 'Skipped (cached)', 'Cached', '0.1s'],
      ['row_4', 'OK — generated', 'Success', '0.6s'],
    ],
  },
  'sc-scraper': {
    credentials: ['Service-account JSON'],
    fileHint: 'GSC property + datumrange',
    fields: [
      { label: 'Property', type: 'select', options: ['sc-domain:klantx.nl','sc-domain:anderklant.nl'] },
      { label: 'Periode', value: 'Laatste 90 dagen' },
      { label: 'Dimensions', type: 'select', options: ['query, page','query','page','date'] },
      { label: 'Row limit', value: '25,000' },
    ],
    logLines: ['Authenticating GSC…', '✓ Token refreshed', 'Fetching dimension query+page…', '✓ Batch 1: 5,000 rows', '✓ Batch 2: 5,000 rows', '✓ Batch 3: 5,000 rows', '✓ Batch 4: 4,287 rows', 'Deduplicating…', '✓ 18,944 unique rows', 'Saving to xlsx…', '✓ Done', 'Closing…', '✓'],
    outputKpis: [
      { label: 'Queries', value: '18,944' },
      { label: 'Pages', value: '4,287' },
      { label: 'Total clicks', value: '142.8k' },
      { label: 'Total impr.', value: '2.4M' },
    ],
    outputCols: ['Query', 'Page', 'Clicks', 'Impr.', 'CTR', 'Position'],
    outputRows: [
      ['tuingereedschap', '/categorie/tuin', 1284, 24850, '5.2%', 4.3],
      ['loungeset hout', '/p/loungeset-eiken', 892, 18420, '4.8%', 6.1],
      ['parasol 3 meter', '/p/parasol-3m', 756, 14930, '5.1%', 5.8],
      ['kerstboom kunst', '/categorie/kerst', 612, 24100, '2.5%', 8.2],
    ],
  },
  'autoriteit': {
    credentials: ['Ahrefs API key', 'Moz API token'],
    fileHint: 'CSV met domeinlijst',
    fields: [
      { label: 'Threads', value: '20' },
      { label: 'Retry policy', type: 'select', options: ['Exponential backoff (5x)','Linear (3x)','Geen'] },
    ],
    logLines: ['Loading 248 domains…', 'Pool initialized (20 threads)…', 'Fetching klantx.nl… ✓', 'Fetching concurrent-1.nl… ✓', 'Fetching concurrent-2.nl… ⚠ retry 1/5', 'Fetching concurrent-3.nl… ✓', '✓ Batch 1/12 done', '✓ Batch 6/12 done', '✓ Batch 12/12 done', 'Aggregating…', 'Saving xlsx…', '✓ Done', 'Closing…'],
    outputKpis: [
      { label: 'Domeinen', value: '248' },
      { label: 'Avg DR', value: '47.2', delta: '+3.1 vs Q1', deltaDir: 'up' },
      { label: 'Avg DA', value: '42.8' },
      { label: 'Tijd', value: '2m 45s' },
    ],
    outputCols: ['Domain', 'DR (Ahrefs)', 'DA (Moz)', 'Backlinks', 'Ref. Domains'],
    outputRows: [
      ['klantx.nl',          62, 58, '142,830', '8,420'],
      ['concurrent-1.nl',    71, 67, '298,114', '12,440'],
      ['concurrent-2.nl',    54, 51, '88,920', '5,200'],
      ['concurrent-3.nl',    48, 44, '52,310', '3,850'],
      ['concurrent-4.nl',    66, 62, '184,720', '9,120'],
    ],
  },
  'harvester': {
    credentials: ['Ahrefs key 1', 'Ahrefs key 2', 'Semrush key', 'Majestic key'],
    fileHint: 'URL- of domeinlijst (txt/csv)',
    fields: [
      { label: 'Bronnen', type: 'select', options: ['Alle (Ahrefs+Semrush+Majestic)','Alleen Ahrefs','Alleen Semrush','Alleen Majestic'] },
      { label: 'Workers', value: '32' },
      { label: 'Timeout (sec)', value: '60' },
      { label: 'Output formaat', type: 'select', options: ['XLSX (unified)','CSV per bron','JSON'] },
    ],
    logLines: ['Loading 1,200 URLs…', 'Initializing 32 workers (M-chip optimized)…', 'Ahrefs key #1 → 18,000/min', 'Semrush key → 3,000/min', 'Majestic key → 5,000/min', 'Failover ready ✓', 'Worker 1 batch ✓', 'Worker 12 batch ✓', 'Worker 24 batch ✓', '✓ All workers complete', 'Merging datasets…', '✓ Done in 1m 52s', 'Closing…'],
    outputKpis: [
      { label: 'URLs verwerkt', value: '1,200' },
      { label: 'Ahrefs success', value: '99.8%', delta: 'gezond', deltaDir: 'up' },
      { label: 'Semrush success', value: '98.2%' },
      { label: 'API cost (€)', value: '€ 4,82' },
    ],
    outputCols: ['URL', 'DR', 'AS (Semrush)', 'TF', 'CF', 'Backlinks'],
    outputRows: [
      ['klantx.nl/cat/a', 62, 54, 38, 41, '12,450'],
      ['klantx.nl/cat/b', 62, 54, 35, 39, '8,120'],
      ['klantx.nl/p/x',   58, 49, 22, 27, '420'],
      ['klantx.nl/p/y',   58, 49, 18, 22, '280'],
    ],
  },
  'ai-overview': {
    credentials: ['SerpAPI key', 'OpenAI API key', 'Claude API key'],
    fileHint: 'Keywords (CSV, één per regel)',
    fields: [
      { label: 'Locatie', type: 'select', options: ['Netherlands','Belgium','Germany','UK'] },
      { label: 'Taal', type: 'select', options: ['nl','en','de'] },
      { label: 'Embedding model', type: 'select', options: ['text-embedding-3-large','text-embedding-3-small'] },
      { label: 'Threshold (cosine)', value: '0.78' },
    ],
    logLines: ['Loading 480 keywords…', 'Querying SerpAPI…', '✓ Batch 1: 50 SERPs', '✓ Batch 5: 50 SERPs', '⚠ rate limit, backoff 2.0s', '✓ Batch 9: 50 SERPs', 'Detecting AIO presence…', '✓ 218/480 trigger AIO', 'Computing embeddings…', '✓ Cosine similarity matrix', 'Ranking sources…', '✓ Done', '✓'],
    outputKpis: [
      { label: 'Keywords', value: '480' },
      { label: 'Triggert AIO', value: '218', delta: '45.4%', deltaDir: 'up' },
      { label: 'Eigen site genoemd', value: '34', delta: '15.6% van AIO', deltaDir: 'up' },
      { label: 'Concurrenten top-3', value: '162' },
    ],
    outputCols: ['Keyword', 'AIO?', 'Sources', 'Eigen site genoemd', 'Avg pos. AIO'],
    outputRows: [
      ['hoe lang gras maaien', 'Ja', 6, 'Ja (#2)', 2.0],
      ['beste loungeset 2026', 'Ja', 8, 'Nee', '—'],
      ['parasol verankeren', 'Nee', '—', '—', '—'],
      ['tuintafel onderhouden', 'Ja', 5, 'Ja (#4)', 4.0],
    ],
  },
  'aio-fast': {
    credentials: ['SerpAPI key'],
    fileHint: 'Keywords CSV — geoptimaliseerd voor 5k+ rijen',
    fields: [
      { label: 'Process workers', value: '16' },
      { label: 'Batch size', value: '100' },
      { label: 'Locatie', type: 'select', options: ['Netherlands','Belgium','UK'] },
    ],
    logLines: ['Loading 5,000 keywords…', 'Spawning 16 process workers…', '✓ Pool ready', 'Worker 1 → batch 1 ✓', 'Worker 8 → batch 8 ✓', 'Worker 16 → batch 16 ✓', '✓ Wave 1 complete (1,600/5,000)', '✓ Wave 2 complete (3,200/5,000)', '✓ Wave 3 complete (5,000/5,000)', 'Merging…', '✓ Done in 3m 12s', '✓'],
    outputKpis: [
      { label: 'Keywords', value: '5,000' },
      { label: 'Triggert AIO', value: '2,118', delta: '42.4%', deltaDir: 'up' },
      { label: 'Throughput', value: '26/sec' },
      { label: 'Tijd', value: '3m 12s' },
    ],
    outputCols: ['Keyword', 'AIO?', 'Sources', 'Top concurrent'],
    outputRows: [
      ['vraag 1', 'Ja', 7, 'concurrent-a.nl'],
      ['vraag 2', 'Nee', '—', '—'],
      ['vraag 3', 'Ja', 5, 'concurrent-b.nl'],
      ['vraag 4', 'Ja', 6, 'klantx.nl'],
    ],
  },
  'alt-tekst': {
    credentials: ['Anthropic API key'],
    fileHint: 'CSV met image URL kolom',
    fields: [
      { label: 'Toon van voice', type: 'select', options: ['Beschrijvend & feitelijk','Marketing-vriendelijk','Beknopt (max 80 chars)'] },
      { label: 'Taal', type: 'select', options: ['Nederlands','English','Deutsch'] },
      { label: 'Bevat alt-attr al?', type: 'select', options: ['Skip — alleen lege','Overschrijf alles'] },
      { label: 'Max chars', value: '125' },
    ],
    logLines: ['Loading 320 image URLs…', '✓ All URLs reachable', 'Connecting to Claude Vision…', 'Processing image 1/320…', 'Processing image 50/320…', 'Processing image 150/320…', 'Processing image 250/320…', 'Processing image 320/320…', '✓ All complete', 'Saving CSV…', '✓ Done', '✓'],
    outputKpis: [
      { label: 'Afbeeldingen', value: '320' },
      { label: 'Succesvol', value: '317', delta: '99.1%', deltaDir: 'up' },
      { label: 'Avg lengte', value: '94 chars' },
      { label: 'Tijd', value: '5m 42s' },
    ],
    outputCols: ['Image', 'Gegenereerde alt-tekst', 'Lengte', 'Status'],
    outputRows: [
      ['/img/loungeset-1.jpg',  'Loungeset van eikenhout met lichtgrijze kussens op een houten terras', 70, 'OK'],
      ['/img/parasol-3m.jpg',   'Crèmewitte parasol van 3 meter geopend boven een rieten tuintafel', 68, 'OK'],
      ['/img/tuintafel.jpg',    'Rechthoekige tuintafel van teakhout met ingelegd glasblad voor zes personen', 78, 'OK'],
      ['/img/sierkussens.jpg',  'Stapel sierkussens in oker, bordeauxrood en olijfgroen op een witte bank', 75, 'OK'],
    ],
  },
  'teksten-gemini': {
    credentials: ['Gemini key', 'OpenAI key', 'Anthropic key'],
    fileHint: 'Briefing (DOCX) of URL-CSV',
    fields: [
      { label: 'Provider', type: 'select', options: ['Gemini Batch (cheap)','OpenAI Batch','Claude Batch','Mix (failover)'] },
      { label: 'Model', type: 'select', options: ['gemini-2.5-pro','gemini-2.5-flash','gpt-5.2','claude-sonnet-4'] },
      { label: 'Lengte (woorden)', value: '450' },
      { label: 'Tone of voice', type: 'select', options: ['Professioneel','Conversational','Activerend','Klant-tone'] },
    ],
    logLines: ['Parsing briefing.docx…', '✓ 87 product descriptions queued', 'Submitting batch to Gemini…', '✓ Batch ID gem-batch-9f2c4a', 'Polling status… in_progress', 'Polling status… in_progress (32%)', 'Polling status… in_progress (78%)', 'Polling status… completed', 'Downloading results…', '✓ 87 texts retrieved', 'Mapping to URLs…', '✓ Saved to docx', '✓'],
    outputKpis: [
      { label: 'Teksten', value: '87' },
      { label: 'Succesvol', value: '86', delta: '98.9%', deltaDir: 'up' },
      { label: 'Gem. lengte', value: '462 woorden' },
      { label: 'Cost (Gemini)', value: '€ 0,84' },
    ],
    outputCols: ['URL / topic', 'Output', 'Woorden', 'Status'],
    outputRows: [
      ['/p/loungeset-eiken', 'Loungeset Eiken — robuuste comfort voor jouw tuin…', 458, 'OK'],
      ['/p/parasol-3m',      'Parasol 3 meter — schaduw waar jij die wilt…',         441, 'OK'],
      ['/p/sierkussens',     'Sierkussens — kleur en karakter voor elke bank…',      472, 'OK'],
      ['/p/kerstboom-2.4m',  'Kunstkerstboom 2,4m — sfeer zonder dennennaalden…',    449, 'OK'],
    ],
  },
  'teksten-intratuin': {
    credentials: ['OpenAI key', 'Anthropic key'],
    fileHint: 'Productfeed (XML/CSV) — Intratuin formaat',
    fields: [
      { label: 'Brand voice', type: 'select', options: ['Intratuin — warm & deskundig','Intratuin — campagne'] },
      { label: 'SKU range', value: 'EAN 87114–87998' },
      { label: 'USPs verplicht', type: 'select', options: ['Ja, top 3 USPs uit feed','Optioneel'] },
      { label: 'CTA stijl', type: 'select', options: ['Geen CTA','Subtiel','Activerend'] },
    ],
    logLines: ['Loading productfeed.xml…', '✓ 1,248 SKUs parsed', 'Filtering to range… 244 SKUs', 'Loading brand-prompt…', 'Submitting to OpenAI Batch…', '✓ Batch ID openai-batch-7a3', 'Polling… 24%', 'Polling… 67%', 'Polling… 100%', '✓ 244 texts retrieved', 'QA — brand voice score 8.7/10 ✓', '✓ Saved to docx', '✓'],
    outputKpis: [
      { label: "SKU's", value: '244' },
      { label: 'Succesvol', value: '244', delta: '100%', deltaDir: 'up' },
      { label: 'Brand-voice score', value: '8.7/10', delta: 'goed', deltaDir: 'up' },
      { label: 'Cost', value: '€ 1,68' },
    ],
    outputCols: ['SKU', 'Productnaam', 'Output (eerste regel)', 'Score'],
    outputRows: [
      ['IT-87114', 'Tuinstoel Lara antraciet', 'De Lara is gemaakt voor lange middagen in jouw tuin…', '9.1/10'],
      ['IT-87231', 'Loungebed Salou eiken',    'Het Salou loungebed combineert massief eiken met…',     '8.8/10'],
      ['IT-87440', 'Schommelstoel Bali rotan', 'Heen en weer wiegen onder een boom — daar is…',          '8.9/10'],
      ['IT-87618', 'Vuurschaal Borgo zwart',   'Een vuurschaal zoals de Borgo brengt het kampvuur…',     '8.5/10'],
    ],
  },
};

window.ToolDetailPage = ToolDetailPage;