// Business Cases tab — AI-fillable, with stepwise actions + ROI calculation
const { useState: useStateBC, useEffect: useEffectBC } = React;

function ConfidenceBadge({ score, breakdown, size = 'md' }) {
  const [showTip, setShowTip] = React.useState(false);
  const color = score >= 80 ? '#008873' : score >= 60 ? '#b37800' : '#c62828';
  const bg = score >= 80 ? 'var(--ser-teal-50)' : score >= 60 ? 'var(--ser-gold-50)' : '#fdecea';
  const label = score >= 80 ? 'Hoog' : score >= 60 ? 'Middel' : 'Laag';

  return (
    <div style={{position:'relative', display:'inline-flex'}} onMouseEnter={() => setShowTip(true)} onMouseLeave={() => setShowTip(false)}>
      <span style={{
        display:'inline-flex', alignItems:'center', gap:5,
        padding: size === 'sm' ? '2px 8px' : '4px 10px',
        borderRadius:999, background:bg, color, cursor:'help',
        fontSize: size === 'sm' ? 10 : 12, fontWeight:700,
        border:`1px solid ${color}22`
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
          <path d="M12 22c5.5-1 9-5 9-9V7l-9-4-9 4v6c0 4 3.5 8 9 9z"/>
        </svg>
        {score}% {label}
      </span>
      {showTip && breakdown && (
        <div style={{
          position:'absolute', bottom:'calc(100% + 8px)', left:'50%', transform:'translateX(-50%)',
          background:'var(--ink-900)', color:'white', borderRadius:8, padding:'10px 14px',
          fontSize:11, whiteSpace:'nowrap', zIndex:10, minWidth:200, boxShadow:'var(--shadow-lg)'
        }}>
          <div style={{fontWeight:700, marginBottom:8}}>Confidence berekening</div>
          {[
            ['Databronnen', breakdown.sources, '35%'],
            ['Historisch patroon', breakdown.historical, '25%'],
            ['Statistische significantie', breakdown.significance, '25%'],
            ['Data-actualiteit', breakdown.freshness, '15%'],
          ].map(([label, val, weight]) => (
            <div key={label} style={{display:'flex', justifyContent:'space-between', gap:12, marginBottom:4}}>
              <span style={{color:'rgba(255,255,255,0.7)'}}>{label} ({weight})</span>
              <span style={{fontWeight:700, color: val >= 70 ? '#67e8d8' : val >= 40 ? '#fbbf24' : '#f87171'}}>{val}%</span>
            </div>
          ))}
          <div style={{height:1, background:'rgba(255,255,255,0.1)', margin:'8px 0'}}/>
          <div style={{fontSize:10, color:'rgba(255,255,255,0.5)'}}>Hover voor details per case</div>
        </div>
      )}
    </div>
  );
}

function RangeValue({ low, mid, high, prefix = '€', suffix = '' }) {
  if (!low && !mid && !high) return null;
  const fmt = v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : v?.toLocaleString('nl-NL');
  return (
    <div style={{display:'flex', flexDirection:'column', gap:2}}>
      <div style={{fontSize:16, fontWeight:700, color:'var(--ink-900)'}}>
        {prefix} {fmt(mid)}{suffix}
      </div>
      {(low || high) && (
        <div style={{fontSize:11, color:'var(--ink-400)'}}>
          {prefix} {fmt(low)} – {fmt(high)}{suffix}
        </div>
      )}
    </div>
  );
}

function BusinessCasesDashboard() {
  const D = window.ANALYTICS_DATA;
  const [cases, setCases] = useStateBC(D.BUSINESS_CASES);
  const [openId, setOpenId] = useStateBC(D.BUSINESS_CASES[0]?.id);
  const [showNew, setShowNew] = useStateBC(false);
  const [generating, setGenerating] = useStateBC(false);
  const [genError, setGenError] = useStateBC(null);

  const handleGenerateCase = async () => {
    const API = window.SER_ANALYTICS_API || '';
    const token = localStorage.getItem('ser-analytics-token') || '';
    setGenerating(true); setGenError(null);
    try {
      const res = await fetch(`${API}/api/insights/generate`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({
          type: 'case',
          client_id: 'bloemerij',  // TODO: dynamisch op basis van ingelogde klant
          context: {
            client_name: 'Klant',
            sector: 'E-commerce',
            description: 'Identificeer de meest impactvolle groeikans op basis van beschikbare data',
            priority: 'high',
          }
        }),
      });
      const d = await res.json();
      if (!res.ok) {
        setGenError(d.detail || 'AI generatie mislukt');
      } else {
        setCases(prev => [d.result, ...prev]);
      }
    } catch { setGenError('Verbindingsfout'); }
    finally { setGenerating(false); }
  };

  const isRange = v => v && typeof v === 'object' && 'mid' in v;
  const midVal = v => isRange(v) ? v.mid : (v || 0);

  const sortedCases = [...cases].sort((a, b) => {
    const scoreA = (a.aiConfidence || 50) * midVal(a.monthlyUplift);
    const scoreB = (b.aiConfidence || 50) * midVal(b.monthlyUplift);
    return scoreB - scoreA;
  });

  const totalUplift = cases.filter(c => c.status !== 'concept').reduce((a, c) => a + midVal(c.monthlyUplift), 0);
  const totalConcept = cases.filter(c => c.status === 'concept').reduce((a, c) => a + midVal(c.monthlyUplift), 0);
  const totalInvest = cases.reduce((a, c) => a + midVal(c.investment), 0);
  const total12m = cases.reduce((a, c) => a + midVal(c.horizon12mGain), 0);

  const open = cases.find(c => c.id === openId);

  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>

      {/* Header KPIs */}
      <div className="bc-headline">
        <div className="bc-stat">
          <div className="lbl">Actief</div>
          <div className="val ok">€ {(totalUplift/1000).toFixed(0)}k <span style={{fontSize:14, fontWeight:600, color:'var(--ink-500)'}}>/ mnd</span></div>
          <div className="sub">{cases.filter(c => c.status !== 'concept').length} business cases lopen of zijn afgerond</div>
        </div>
        <div className="bc-stat">
          <div className="lbl">In overweging</div>
          <div className="val">€ {(totalConcept/1000).toFixed(0)}k <span style={{fontSize:14, fontWeight:600, color:'var(--ink-500)'}}>/ mnd potentieel</span></div>
          <div className="sub">{cases.filter(c => c.status === 'concept').length} concepten — wachten op goedkeuring</div>
        </div>
        <div className="bc-stat">
          <div className="lbl">12-maand horizon</div>
          <div className="val violet">€ {(total12m/1000).toFixed(0)}k</div>
          <div className="sub">Investering: € {(totalInvest/1000).toFixed(1)}k · ROI: {(total12m/totalInvest).toFixed(1)}x</div>
        </div>
      </div>

      {/* SER-proprietary data strip */}
      <div className="bc-prop-strip">
        <div className="bc-prop-head">
          <div>
            <div className="eyebrow"><span className="dot-ser"></span>SER · proprietary signals</div>
            <h3>Data die alleen SER-klanten zien</h3>
            <p>Eigen scrapes, NLP-analyses en ML-voorspellingen — niet beschikbaar in standaard GA4/Ads. Deze signalen voeden de AI bij het opstellen van business cases.</p>
          </div>
          <a className="bc-prop-link">Naar databronnen →</a>
        </div>
        <div className="bc-prop-grid">
          {(window.ANALYTICS_DATA.PROPRIETARY_SIGNALS || []).slice(0, 6).map(s => (
            <div key={s.id} className="bc-prop-card">
              <div className="bc-prop-ico">{D.Icons[s.icon]}</div>
              <div className="bc-prop-ttl">{s.label}</div>
              <div className="bc-prop-sample">{s.sample}</div>
              <div className="bc-prop-method">{s.refresh}</div>
            </div>
          ))}
        </div>
      </div>

      {/* AI hero */}
      <div className="bc-ai-hero">
        <div className="left">
          <div className="eyebrow">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>
            AI Business-case generator
          </div>
          <h2>Laat AI een business case schrijven.</h2>
          <p>Op basis van de data die je hebt aangesloten — GA4, Ads, Search Console, Semrush + optionele bronnen — schrijft de AI een complete business case: hypothese, stappen-plan, doorrekening en risico's. Jij keurt goed en publiceert.</p>
          <div className="actions">
            <button onClick={handleGenerateCase} disabled={generating} className="btn-primary-bc">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>
              {generating ? 'Genereren…' : '✦ Genereer met AI'}
            </button>
            <button onClick={() => setShowNew(true)} className="btn-ghost-bc">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
              Handmatig toevoegen
            </button>
          </div>
          {genError && <div style={{fontSize:12, color:'var(--err)', marginTop:8}}>{genError}</div>}
        </div>
        <div className="right">
          <div className="ai-prompt-card">
            <div className="ai-tag">PROMPT</div>
            <div className="ai-prompt-text">
              <em>"Analyseer de daling in iOS-conversie sinds 18 maart en schrijf een business case voor herstel."</em>
            </div>
            <div className="ai-meta">
              <span>· GA4 events (90d)</span>
              <span>· Hotjar replays</span>
              <span>· Shopify orders</span>
              <span>· Semrush rank-data</span>
            </div>
            <div className="ai-result">
              <span className="ok-pip"></span> Business case gegenereerd · 92% confidence · 2 sec
            </div>
          </div>
        </div>
      </div>

      {/* Cases grid + drawer */}
      <div className="bc-layout">
        <aside className="bc-list">
          <div className="bc-list-head">
            <span>Cases · {cases.length}</span>
            <button onClick={() => setShowNew(true)} className="bc-add">{D.Icons.plus}</button>
          </div>

          {cases.length === 0 ? (
            <div style={{textAlign:'center', padding:'48px 24px', color:'var(--ink-400)'}}>
              <div style={{fontSize:40, marginBottom:16}}>📋</div>
              <div style={{fontSize:16, fontWeight:600, color:'var(--ink-700)', marginBottom:8}}>Nog geen business cases</div>
              <div style={{fontSize:13}}>Cases worden gegenereerd op basis van data. Koppel eerst de databronnen.</div>
            </div>
          ) : (
            sortedCases.map(c => (
              <button key={c.id} className={`bc-card ${openId === c.id ? 'active' : ''}`} onClick={() => setOpenId(c.id)}>
                <div style={{background:'white', border:'1px solid var(--ink-100)', borderRadius:14, padding:'20px 22px', display:'flex', flexDirection:'column', gap:14}}>
                  <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12}}>
                    <div style={{minWidth:0}}>
                      <div style={{fontSize:15, fontWeight:700, color:'var(--ink-900)', marginBottom:6}}>{c.title}</div>
                      <div style={{fontSize:13, color:'var(--ink-500)', lineHeight:1.5}}>{c.summary}</div>
                    </div>
                    <div style={{display:'flex', flexDirection:'column', gap:6, flexShrink:0}}>
                      <span style={{padding:'3px 10px', borderRadius:999, fontSize:11, fontWeight:700, background: c.severity==='high' ? '#fdecea' : c.severity==='med' ? '#fff5e0' : '#e6f7f5', color: c.severity==='high' ? '#c62828' : c.severity==='med' ? '#b37800' : '#008873'}}>
                        {c.severity === 'high' ? 'Hoog' : c.severity === 'med' ? 'Middel' : 'Laag'}
                      </span>
                      {c.aiConfidence && <ConfidenceBadge score={c.aiConfidence} breakdown={c.confidenceBreakdown} size="sm" />}
                      <span className={`bc-status ${c.status}`}>{statusLabel(c.status)}</span>
                    </div>
                  </div>
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12}}>
                    <div style={{background:'var(--ink-25)', borderRadius:8, padding:'10px 12px'}}>
                      <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-400)', fontWeight:600, marginBottom:4}}>Investering</div>
                      {isRange(c.investment) ? <RangeValue {...c.investment}/> : <div style={{fontSize:16, fontWeight:700, color:'var(--ink-900)'}}>€ {c.investment?.toLocaleString('nl-NL')}</div>}
                    </div>
                    <div style={{background:'var(--ser-teal-50)', borderRadius:8, padding:'10px 12px'}}>
                      <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ok)', fontWeight:600, marginBottom:4}}>Uplift / mnd</div>
                      {isRange(c.monthlyUplift) ? <RangeValue {...c.monthlyUplift}/> : <div style={{fontSize:16, fontWeight:700, color:'var(--ok)'}}>+ € {c.monthlyUplift?.toLocaleString('nl-NL')}</div>}
                    </div>
                    <div style={{background:'var(--ink-25)', borderRadius:8, padding:'10px 12px'}}>
                      <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-400)', fontWeight:600, marginBottom:4}}>Breakeven</div>
                      <div style={{fontSize:16, fontWeight:700, color:'var(--ink-900)'}}>{c.breakeven < 1 ? `${Math.round(c.breakeven * 30)} dagen` : `${c.breakeven.toFixed(1)} mnd`}</div>
                    </div>
                  </div>
                </div>
              </button>
            ))
          )}
        </aside>

        {open && <BusinessCaseDetail bc={open} onUpdate={(patch) => {
          setCases(cases.map(c => c.id === open.id ? {...c, ...patch} : c));
        }}/>}
      </div>

      {showNew && <NewCaseModal onClose={() => setShowNew(false)} onCreate={(c) => { setCases([c, ...cases]); setOpenId(c.id); setShowNew(false); }}/>}
    </div>
  );
}

function statusLabel(s) {
  return { concept: 'Concept', approved: 'Goedgekeurd', running: 'Loopt', done: 'Afgerond' }[s] || s;
}

function BusinessCaseDetail({ bc, onUpdate }) {
  const D = window.ANALYTICS_DATA;
  const [editingHyp, setEditingHyp] = useStateBC(false);
  const [hypText, setHypText] = useStateBC(bc.hypothesis);
  useEffectBC(() => { setHypText(bc.hypothesis); setEditingHyp(false); }, [bc.id]);

  const isRange = v => v && typeof v === 'object' && 'mid' in v;
  const midVal = v => isRange(v) ? v.mid : (v || 0);

  const stepDays = bc.steps.reduce((a, s) => a + (typeof s.days === 'number' ? s.days : 0), 0);
  const investmentPerDay = midVal(bc.investment) / Math.max(stepDays, 1);

  return (
    <main className="bc-detail">
      {/* Header */}
      <div className="bc-detail-head">
        <div>
          <div className="bc-detail-eyebrow">
            <span className={`bc-status ${bc.status}`}>{statusLabel(bc.status)}</span>
            {bc.aiGenerated && <span className="bc-ai-mark large">AI · {bc.aiConfidence}% confidence</span>}
            {bc.aiConfidence && <ConfidenceBadge score={bc.aiConfidence} breakdown={bc.confidenceBreakdown} size="md" />}
            <span style={{fontSize:11, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:700}}>· Oorzaak: {bc.cause}</span>
          </div>
          <h2>{bc.title}</h2>
          <p className="bc-summary">{bc.summary}</p>
        </div>
        <div className="bc-detail-actions">
          {bc.status === 'concept' && (
            <button className="btn-primary-bc" onClick={() => onUpdate({status: 'approved'})}>
              {D.Icons.check} Goedkeuren
            </button>
          )}
          {bc.status === 'approved' && (
            <button className="btn-primary-bc" onClick={() => onUpdate({status: 'running'})}>
              ▶ Start uitvoering
            </button>
          )}
          <button className="btn-ghost-bc">{D.Icons.edit} Bewerk</button>
          <button className="btn-ghost-bc">Exporteer PDF</button>
        </div>
      </div>

      {/* Hypothesis */}
      <div className="bc-section">
        <div className="bc-section-head">
          <h3>Hypothese</h3>
          {bc.aiGenerated && <span className="ai-pill-mini">door AI geschreven</span>}
          <button className="bc-edit-btn" onClick={() => setEditingHyp(!editingHyp)}>{editingHyp ? 'Annuleer' : 'Bewerk'}</button>
        </div>
        {editingHyp ? (
          <div>
            <textarea className="bc-textarea" value={hypText} onChange={e => setHypText(e.target.value)} rows={4}/>
            <button className="btn-primary-bc" style={{marginTop:8}} onClick={() => { onUpdate({hypothesis: hypText}); setEditingHyp(false); }}>Opslaan</button>
          </div>
        ) : (
          <p className="bc-hyp-text">{bc.hypothesis}</p>
        )}
      </div>

      {/* Doorrekening */}
      <div className="bc-section">
        <div className="bc-section-head">
          <h3>Doorrekening</h3>
          <span className="ai-pill-mini">automatisch berekend</span>
        </div>
        <div className="bc-roi-grid">
          <div className="bc-roi-cell">
            <div className="lbl">Investering</div>
            {isRange(bc.investment)
              ? <RangeValue {...bc.investment}/>
              : <div className="val">€ {bc.investment?.toLocaleString('nl-NL')}</div>}
            <div className="sub">{stepDays} mandagen · ~€ {Math.round(investmentPerDay).toLocaleString('nl-NL')}/dag</div>
          </div>
          <div className="bc-roi-cell">
            <div className="lbl">Maandelijkse opbrengst</div>
            {isRange(bc.monthlyUplift)
              ? <RangeValue {...bc.monthlyUplift}/>
              : <div className="val ok">+€ {bc.monthlyUplift?.toLocaleString('nl-NL')}</div>}
            <div className="sub">vanaf go-live · runtime {bc.runtimeMonths} mnd</div>
          </div>
          <div className="bc-roi-cell">
            <div className="lbl">Break-even</div>
            <div className="val">{bc.breakeven < 1 ? `${Math.round(bc.breakeven*30)} dagen` : `${bc.breakeven.toFixed(1)} maanden`}</div>
            <div className="sub">terugverdientijd</div>
          </div>
          <div className="bc-roi-cell highlight">
            <div className="lbl">12-maand opbrengst</div>
            {isRange(bc.horizon12mGain)
              ? <RangeValue {...bc.horizon12mGain}/>
              : <div className="val violet">€ {bc.horizon12mGain?.toLocaleString('nl-NL')}</div>}
            <div className="sub">netto: € {(midVal(bc.horizon12mGain) - midVal(bc.investment)).toLocaleString('nl-NL')} · ROI {(midVal(bc.horizon12mGain)/Math.max(midVal(bc.investment),1)).toFixed(1)}x</div>
          </div>
        </div>

        {/* Mini progress over 12mo */}
        <div className="bc-runtime">
          <div className="bc-runtime-bar">
            <div className="invest" style={{width: `${Math.min(8, (midVal(bc.investment) / Math.max(midVal(bc.horizon12mGain),1)) * 100)}%`}}></div>
            <div className="gain" style={{width: `${100 - Math.min(8, (midVal(bc.investment) / Math.max(midVal(bc.horizon12mGain),1)) * 100)}%`}}></div>
          </div>
          <div className="bc-runtime-labels">
            <span>Maand 0 — investering € {(midVal(bc.investment)/1000).toFixed(1)}k</span>
            <span>Maand 12 — netto resultaat € {((midVal(bc.horizon12mGain) - midVal(bc.investment))/1000).toFixed(0)}k</span>
          </div>
        </div>
      </div>

      {/* Stappenplan */}
      <div className="bc-section">
        <div className="bc-section-head">
          <h3>Stappenplan · {bc.steps.length} stappen</h3>
          {bc.aiGenerated && <span className="ai-pill-mini">door AI gegenereerd</span>}
        </div>
        <div className="bc-steps">
          {bc.steps.map((s, i) => (
            <div key={i} className={`bc-step ${s.done ? 'done' : ''}`}>
              <div className="num">{s.done ? D.Icons.check : i+1}</div>
              <div className="body">
                <div className="ttl">{s.t}</div>
                <div className="meta">
                  <span className="who">{s.who}</span>
                  <span>·</span>
                  <span>{typeof s.days === 'number' ? `${s.days} ${s.days === 1 ? 'dag' : 'dagen'}` : s.days}</span>
                </div>
              </div>
              <button className="bc-step-toggle">{s.done ? 'Ongedaan' : 'Markeer klaar'}</button>
            </div>
          ))}
        </div>
      </div>

      {/* Risks + KPIs */}
      <div className="bc-twocol">
        <div className="bc-section bc-half">
          <div className="bc-section-head"><h3>Risico's</h3></div>
          <ul className="bc-risk-list">
            {bc.risks.map((r, i) => (
              <li key={i}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
                <span>{r}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="bc-section bc-half">
          <div className="bc-section-head"><h3>KPI's om te volgen</h3></div>
          <div className="bc-kpi-list">
            {bc.kpis.map((k, i) => <span key={i} className="bc-kpi-tag">{k}</span>)}
          </div>
        </div>
      </div>

      {bc.aiNotes && (
        <div className="bc-ai-notes">
          <div className="ai-icon">AI</div>
          <div>
            <div className="lbl">Hoe is dit afgeleid?</div>
            <p>{bc.aiNotes}</p>
          </div>
        </div>
      )}
    </main>
  );
}

function NewCaseModal({ onClose, onCreate }) {
  const [prompt, setPrompt] = useStateBC('');
  const [phase, setPhase] = useStateBC('input'); // input | thinking | done
  const exemplars = [
    'Schrijf een business case om de churn-rate met 20% te verlagen.',
    'Hoe kunnen we de marge op plant-categorie herstellen?',
    'Stel een case op voor het lanceren van een loyaltyprogramma.',
    'Analyseer waarom de mobiele conversie daalt en stel een plan voor.',
  ];

  const generate = () => {
    setPhase('thinking');
    setTimeout(() => {
      const newCase = {
        id: 'bc-' + Date.now(),
        title: prompt.length > 60 ? prompt.slice(0, 58) + '…' : prompt,
        cause: 'campaigns',
        severity: 'med',
        status: 'concept',
        aiGenerated: true,
        aiConfidence: 76,
        summary: 'AI heeft een case opgesteld op basis van GA4, Ads en Semrush data. Lees zorgvuldig en pas aan waar nodig.',
        hypothesis: 'AI-gegenereerde hypothese — pas aan op basis van je domeinkennis voordat je goedkeurt.',
        steps: [
          { t: 'Discovery & data-validatie', who: 'Data', days: 1 },
          { t: 'Concept en design', who: 'Marketing', days: 2 },
          { t: 'Implementatie', who: 'Dev', days: 3 },
          { t: 'Monitoring 14 dagen', who: 'Data', days: 14 },
        ],
        investment: 5000,
        monthlyUplift: 12000,
        runtimeMonths: 6,
        breakeven: 0.42,
        horizon12mGain: 72000,
        risks: ['Onzekerheid in baseline-data', 'Externe afhankelijkheden'],
        kpis: ['Conversion-rate', 'Revenue per session'],
        aiNotes: 'Eerste opzet — AI markeert dit als 76% confidence omdat baseline-data nog gevalideerd moet worden.',
      };
      onCreate(newCase);
    }, 1800);
  };

  return (
    <div className="bc-modal-backdrop" onClick={onClose}>
      <div className="bc-modal" onClick={e => e.stopPropagation()}>
        <button className="bc-modal-close" onClick={onClose}>×</button>

        {phase === 'input' && (
          <>
            <div className="bc-modal-eyebrow">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>
              AI Business-case generator
            </div>
            <h3>Wat moet de case oplossen?</h3>
            <p style={{color:'var(--ink-500)', fontSize:13, marginTop:0}}>Beschrijf het probleem of de kans in je eigen woorden. AI gebruikt alle aangesloten databronnen.</p>
            <textarea className="bc-modal-textarea" value={prompt} onChange={e => setPrompt(e.target.value)} placeholder="bv: Schrijf een case voor het herstellen van mobiele conversie." autoFocus rows={4}/>

            <div style={{fontSize:12, color:'var(--ink-500)', margin:'14px 0 8px', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.08em'}}>Voorbeelden</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
              {exemplars.map((ex, i) => (
                <button key={i} onClick={() => setPrompt(ex)} className="bc-modal-exemplar">{ex}</button>
              ))}
            </div>

            <div style={{display:'flex', gap:8, justifyContent:'flex-end', marginTop:24}}>
              <button onClick={onClose} className="btn-ghost-bc">Annuleer</button>
              <button onClick={generate} disabled={!prompt} className="btn-primary-bc">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>
                Genereer
              </button>
            </div>
          </>
        )}

        {phase === 'thinking' && (
          <div style={{textAlign:'center', padding:'40px 20px'}}>
            <div className="bc-thinking-orb"></div>
            <h3 style={{margin:'24px 0 8px'}}>AI bouwt de case op…</h3>
            <div style={{fontSize:13, color:'var(--ink-500)', display:'flex', flexDirection:'column', gap:6, alignItems:'center', maxWidth:380, margin:'0 auto'}}>
              <span>✓ GA4-events doorgenomen (1.2M rows)</span>
              <span>✓ Ads-spend en ROAS gevalideerd</span>
              <span>✓ Semrush keyword-trends gematcht</span>
              <span style={{color:'#7c5cff'}}>→ Hypothese formuleren…</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.BusinessCasesDashboard = BusinessCasesDashboard;