// Strategy & Brand dashboard — BETA
// Propositie-check, BCG-matrix, brand-perceptie, SWOT, alignment, strategische moves

const S = window.ANALYTICS_STRATEGY;
const SD = window.ANALYTICS_DATA;

function NoDataStateStrat({ message = 'Geen data beschikbaar', sub = 'Koppel een databron om inzichten te zien.' }) {
  return (
    <div style={{textAlign:'center', padding:'48px 24px', color:'var(--ink-400)'}}>
      <div style={{fontSize:36, marginBottom:16}}>📊</div>
      <div style={{fontSize:15, fontWeight:600, color:'var(--ink-700)', marginBottom:6}}>{message}</div>
      <div style={{fontSize:13, lineHeight:1.6}}>{sub}</div>
    </div>
  );
}

function StrategyDashboard({ period, compare }) {
  const hasData = false; // wordt true zodra echte data beschikbaar is
  if (!hasData) return (
    <NoDataStateStrat
      message="Strategie &amp; Merk — geen data"
      sub="Koppel databronnen voor de strategie-analyse. Minimaal GA4 + Search Console vereist."
    />
  );
  return (
    <div style={{display:'flex', flexDirection:'column', gap:24}}>
      <BetaBanner/>
      <PropAlignment/>
      <BcgMatrix/>
      <BrandPerception/>
      <SwotGrid/>
      <PillarAlignment/>
      <StrategicMoves/>
      <BetaFooter/>
    </div>
  );
}

// ---------- Beta banner ----------
function BetaBanner() {
  return (
    <div className="panel" style={{background:'linear-gradient(135deg, rgba(124,92,255,0.06), rgba(0,180,160,0.04))', borderLeft:'4px solid #7c5cff'}}>
      <div className="panel-body" style={{display:'flex', gap:14, alignItems:'flex-start'}}>
        <div style={{width:36, height:36, borderRadius:10, background:'linear-gradient(135deg, #7c5cff, #00b4a0)', color:'white', display:'grid', placeItems:'center', fontFamily:'var(--font-mono)', fontWeight:800, fontSize:11, flexShrink:0}}>β</div>
        <div style={{flex:1}}>
          <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:4}}>
            <h3 style={{margin:0, fontSize:15, fontWeight:700}}>Strategie & Merk — BETA</h3>
            <span style={{padding:'2px 8px', borderRadius:4, background:'rgba(124,92,255,0.12)', color:'#5a3fd6', fontSize:10, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase'}}>experimenteel</span>
          </div>
          <p style={{margin:0, fontSize:13, lineHeight:1.55, color:'var(--ink-700)', maxWidth:720}}>
            Dit dashboard combineert kwantitatieve data (Shopify, GA4, Ads) met <strong>kwalitatieve scans</strong>: site-scrape, brand-perceptie heuristieken, AI-interpretatie. Goed voor strategische gesprekken, <em>niet</em> voor harde KPI-rapportage. Confidence per inzicht onder elk blok.
          </p>
        </div>
        <button style={{padding:'7px 12px', borderRadius:7, background:'white', border:'1px solid var(--ink-200)', fontSize:12, fontWeight:600, color:'var(--ink-700)', cursor:'pointer', whiteSpace:'nowrap'}}>Methodologie</button>
      </div>
    </div>
  );
}

// ---------- 1. Propositie-check ----------
function PropAlignment() {
  const claims = S.PROP_CLAIMS;
  const actions = S.PROP_ACTIONS;
  const merged = claims.map(c => ({...c, action: actions.find(a => a.id === c.id)}));

  return (
    <section>
      <SectionHead
        title="Propositie-check — Roepen we het, doen we het ook?"
        sub="Vergelijkt claims op de site (hero, footer, about) met wat er daadwerkelijk gebeurt in advertising, content, prijs en assortiment."
        confidence={0.74}
      />
      <div className="panel">
        <div className="panel-body" style={{padding:0}}>
          <table className="data strategy-prop-table" style={{width:'100%'}}>
            <thead>
              <tr>
                <th style={{width:'28%'}}>Wat we roepen</th>
                <th style={{width:14}}>Op</th>
                <th>Wat we doen</th>
                <th style={{width:120, textAlign:'right'}}>Match</th>
              </tr>
            </thead>
            <tbody>
              {merged.map(m => {
                const a = m.action;
                const tone = a.alignment === 'aligned' ? '#0a8a73' : a.alignment === 'weak' ? '#a87000' : '#c0392b';
                const bg = a.alignment === 'aligned' ? 'rgba(0,180,160,0.10)' : a.alignment === 'weak' ? 'rgba(245,165,35,0.12)' : 'rgba(220,80,60,0.10)';
                return (
                  <tr key={m.id}>
                    <td>
                      <div style={{fontWeight:600, color:'var(--ink-900)'}}>"{m.claim}"</div>
                      <div style={{fontSize:11, color:'var(--ink-500)', marginTop:3, fontFamily:'var(--font-mono)'}}>
                        {m.surfaces.join(' · ')}
                      </div>
                    </td>
                    <td style={{verticalAlign:'middle', textAlign:'center', color:'var(--ink-300)'}} className="arrow">→</td>
                    <td style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.5}}>{a.evidence}</td>
                    <td style={{textAlign:'right'}}>
                      <span style={{display:'inline-flex', alignItems:'center', gap:6, padding:'4px 10px', borderRadius:6, background:bg, color:tone, fontSize:11, fontWeight:700, letterSpacing:'0.04em', textTransform:'uppercase'}}>
                        {a.alignment === 'aligned' ? '✓ Aligned' : a.alignment === 'weak' ? '~ Zwak' : '✗ Mismatch'}
                      </span>
                      <div style={{fontSize:11, color:tone, marginTop:4, fontFamily:'var(--font-mono)', fontWeight:600}}>
                        {a.delta > 0 ? '+' : ''}{a.delta}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
      <Caveat>
        Bron: site-scrape (4 mei 2026), Google Ads keyword-mining, Shopify SKU-analyse. Match-score is heuristisch (regex-claims × ad-spend × content-volume), geen menselijke audit.
      </Caveat>
    </section>
  );
}

// ---------- 2. BCG-matrix ----------
function BcgMatrix() {
  const items = S.BCG_ITEMS;
  const W = 560, H = 420, P = 56;
  const xScale = (s) => P + (s) * (W - P*2);
  const yScale = (g) => H - P - ((g + 0.10) / 0.55) * (H - P*2);

  const xMid = xScale(0.35);
  const yMid = yScale(0.10);
  const totalRev = items.reduce((s,i)=>s+i.revenue,0);
  const rScale = (rev) => 12 + Math.sqrt(rev/totalRev) * 38;

  return (
    <section>
      <SectionHead
        title="BCG-matrix — productcategorieën"
        sub="Marktaandeel × marktgroei. Bubblegrootte = omzet. Gebaseerd op interne data + sectorbenchmarks."
        confidence={0.61}
      />
      <div className="panel">
        <div className="panel-body strategy-bcg" style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24, alignItems:'start'}}>
          <div style={{position:'relative'}}>
            <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:'auto', display:'block'}}>
              {/* Quadrant backgrounds */}
              <rect x={P} y={P} width={xMid-P} height={yMid-P} fill="rgba(124,92,255,0.05)"/>
              <rect x={xMid} y={P} width={W-P-xMid} height={yMid-P} fill="rgba(0,180,160,0.06)"/>
              <rect x={P} y={yMid} width={xMid-P} height={H-P-yMid} fill="rgba(245,165,35,0.05)"/>
              <rect x={xMid} y={yMid} width={W-P-xMid} height={H-P-yMid} fill="rgba(180,180,200,0.06)"/>

              {/* Quadrant labels */}
              <text x={P+12} y={P+22} fontSize="11" fontWeight="700" fill="#7c5cff" letterSpacing="0.08em">QUESTION MARKS</text>
              <text x={P+12} y={P+38} fontSize="10" fill="#7c5cff" opacity="0.7">hoge groei · lage share</text>
              <text x={W-P-12} y={P+22} fontSize="11" fontWeight="700" fill="#0a8a73" textAnchor="end" letterSpacing="0.08em">STARS</text>
              <text x={W-P-12} y={P+38} fontSize="10" fill="#0a8a73" opacity="0.7" textAnchor="end">hoge groei · hoge share</text>
              <text x={P+12} y={H-P-12} fontSize="11" fontWeight="700" fill="#a87000" letterSpacing="0.08em">DOGS</text>
              <text x={P+12} y={H-P-26} fontSize="10" fill="#a87000" opacity="0.7">lage groei · lage share</text>
              <text x={W-P-12} y={H-P-12} fontSize="11" fontWeight="700" fill="#666" textAnchor="end" letterSpacing="0.08em">CASH COWS</text>
              <text x={W-P-12} y={H-P-26} fontSize="10" fill="#666" opacity="0.7" textAnchor="end">lage groei · hoge share</text>

              {/* Quadrant divider lines */}
              <line x1={xMid} y1={P} x2={xMid} y2={H-P} stroke="#d8d8e8" strokeDasharray="4 4"/>
              <line x1={P} y1={yMid} x2={W-P} y2={yMid} stroke="#d8d8e8" strokeDasharray="4 4"/>

              {/* Axes */}
              <line x1={P} y1={H-P} x2={W-P} y2={H-P} stroke="#0a0a2e" strokeWidth="1.5"/>
              <line x1={P} y1={P} x2={P} y2={H-P} stroke="#0a0a2e" strokeWidth="1.5"/>

              {/* Axis labels */}
              <text x={W/2} y={H-12} fontSize="11" fontWeight="600" fill="#0a0a2e" textAnchor="middle">→ Relatief marktaandeel</text>
              <text x={16} y={H/2} fontSize="11" fontWeight="600" fill="#0a0a2e" textAnchor="middle" transform={`rotate(-90 16 ${H/2})`}>→ Marktgroei YoY</text>

              {/* 0% growth marker on Y */}
              <line x1={P-4} y1={yScale(0)} x2={P} y2={yScale(0)} stroke="#0a0a2e"/>
              <text x={P-8} y={yScale(0)+3} fontSize="9" fill="var(--ink-500)" textAnchor="end">0%</text>
              <text x={P-8} y={yScale(0.20)+3} fontSize="9" fill="var(--ink-500)" textAnchor="end">+20%</text>
              <text x={P-8} y={yScale(0.40)+3} fontSize="9" fill="var(--ink-500)" textAnchor="end">+40%</text>

              {/* Bubbles */}
              {items.map(i => {
                const cx = xScale(i.share), cy = yScale(i.growth), r = rScale(i.revenue);
                const fill = i.quad === 'star' ? '#0a8a73' : i.quad === 'cash' ? '#5a5a7a' : i.quad === 'question' ? '#7c5cff' : '#a87000';
                return (
                  <g key={i.id}>
                    <circle cx={cx} cy={cy} r={r} fill={fill} fillOpacity="0.18" stroke={fill} strokeWidth="1.5"/>
                    <text x={cx} y={cy-r-6} fontSize="10" fontWeight="700" fill={fill} textAnchor="middle">{i.label}</text>
                    <text x={cx} y={cy+3} fontSize="10" fontFamily="var(--font-mono)" fontWeight="700" fill={fill} textAnchor="middle">€{Math.round(i.revenue/1000)}k</text>
                  </g>
                );
              })}
            </svg>
          </div>

          <div>
            <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', color:'var(--ink-500)', fontWeight:700, marginBottom:10}}>Wat de matrix zegt</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12}}>
              <li style={{paddingLeft:14, borderLeft:'3px solid #0a8a73'}}>
                <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>Bruidsboeketten = je enige Star</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:2}}>+18% groei, 51% marge. Bescherm en investeer.</div>
              </li>
              <li style={{paddingLeft:14, borderLeft:'3px solid #5a5a7a'}}>
                <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>Rouw + Cadeau zijn de cash cows</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:2}}>€340k samen. Melken, niet over-investeren.</div>
              </li>
              <li style={{paddingLeft:14, borderLeft:'3px solid #7c5cff'}}>
                <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>3 Question marks — kies er 1</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:2}}>Abo (42% groei) is de duidelijkste winnaar. Droogbloemen kan, planten niet.</div>
              </li>
              <li style={{paddingLeft:14, borderLeft:'3px solid #a87000'}}>
                <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>Dogs: snij + Kerst</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:2}}>Niet schrappen, wel beperken. Capaciteit naar Bruids/Abo.</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <Caveat>
        Marktaandeel = onze omzet ÷ geschatte segment-omzet NL (CBS + sector-rapport bloemenveiling 2025). Groei = YoY interne omzet (proxy voor segmentgroei). Echte BCG vereist betere markt-data — dit is een richtinggevende benadering.
      </Caveat>
    </section>
  );
}

// ---------- 3. Brand-perceptie ----------
function BrandPerception() {
  const bp = S.BRAND_PERCEPTION;
  return (
    <section>
      <SectionHead
        title="Hoe komt je merk over?"
        sub="AI-scan van site, reviews, social en e-mail. Vergeleken met sector-benchmark (NL bloemen e-commerce, n=18)."
        confidence={0.52}
      />

      <div className="panel">
        <div className="panel-body">
          <div className="strategy-grid-2" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
            {/* Score bars */}
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', color:'var(--ink-500)', fontWeight:700, marginBottom:14}}>Perceptie-scores</div>
              <div style={{display:'flex', flexDirection:'column', gap:14}}>
                {bp.scores.map(s => {
                  const diff = s.value - s.benchmark;
                  const tone = diff >= 5 ? '#0a8a73' : diff >= -5 ? '#666' : '#c0392b';
                  return (
                    <div key={s.id}>
                      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:4}}>
                        <span style={{fontSize:13, fontWeight:600, color:'var(--ink-900)'}}>{s.label}</span>
                        <span style={{fontSize:12, fontFamily:'var(--font-mono)', color:'var(--ink-700)'}}>
                          <strong style={{color:tone}}>{s.value}</strong>
                          <span style={{color:'var(--ink-300)'}}> / bench {s.benchmark}</span>
                          <span style={{color:tone, fontWeight:700, marginLeft:6}}>
                            {diff > 0 ? '+' : ''}{diff}
                          </span>
                        </span>
                      </div>
                      <div style={{position:'relative', height:8, background:'#f0f0f6', borderRadius:4, overflow:'hidden'}}>
                        <div style={{position:'absolute', left:0, top:0, height:'100%', width:`${s.value}%`, background:`linear-gradient(90deg, ${tone}, ${tone}dd)`, borderRadius:4}}></div>
                        <div style={{position:'absolute', left:`${s.benchmark}%`, top:-2, height:12, width:2, background:'var(--ink-700)', opacity:0.5}}></div>
                      </div>
                      <div style={{fontSize:11, color:'var(--ink-500)', marginTop:5, lineHeight:1.4}}>{s.note}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Tone of voice */}
            <div>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', color:'var(--ink-500)', fontWeight:700, marginBottom:14}}>Tone-of-voice per kanaal</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {Object.entries(bp.voiceTone).map(([ch, words]) => (
                  <div key={ch} style={{padding:'10px 12px', borderRadius:8, background:'#fafafd', border:'1px solid var(--ink-100)'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-500)', fontWeight:700, marginBottom:6}}>{ch}</div>
                    <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                      {words.map(w => (
                        <span key={w} style={{padding:'3px 9px', borderRadius:12, background:'white', border:'1px solid var(--ink-200)', fontSize:12, color:'var(--ink-900)', fontWeight:500}}>{w}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{marginTop:14, padding:'10px 12px', borderRadius:8, background:'rgba(220,80,60,0.06)', borderLeft:'3px solid #c0392b'}}>
                <div style={{fontSize:12, fontWeight:700, color:'#c0392b', marginBottom:3}}>⚠ Kanaal-inconsistentie</div>
                <div style={{fontSize:12, color:'var(--ink-700)', lineHeight:1.5}}>
                  Site is "professioneel/formeel", Insta is "speels/eigenwijs". Klanten ervaren dit als twee bedrijven. Consistency-score: 53/100.
                </div>
              </div>
            </div>
          </div>

          {/* Audience match */}
          <div style={{marginTop:24, padding:16, borderRadius:10, background:'linear-gradient(135deg, #f5f5fc, #fff)', border:'1px solid var(--ink-100)'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div>
                <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>Doelgroep-match</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:3, maxWidth:520}}>
                  Hoe goed komt het bezoekers-profiel (leeftijd, device, koopkracht-proxy) overeen met de doelgroep die de homepage suggereert?
                </div>
              </div>
              <div style={{display:'flex', alignItems:'baseline', gap:6}}>
                <div style={{fontSize:36, fontWeight:800, fontFamily:'var(--font-mono)', color:'#7c5cff'}}>{bp.audienceMatch}</div>
                <div style={{fontSize:13, color:'var(--ink-500)'}}>/100</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Caveat>
        Perceptie-scores komen uit AI-analyse van: site-copy (LLM-rubric), 247 reviews (sentiment + theme), 12 Insta-captions, 8 nieuwsbrieven. Benchmark = sample van 18 NL bloemen-shops. Geen kwantitatief consumenten-onderzoek — voor harde merk-tracking adviseren we kwartaal-survey (n=400).
      </Caveat>
    </section>
  );
}

// ---------- 4. SWOT ----------
function SwotGrid() {
  const sw = S.SWOT;
  const blocks = [
    { key: 'strengths',     label: 'Strengths',     color: '#0a8a73', bg: 'rgba(0,180,160,0.06)' },
    { key: 'weaknesses',    label: 'Weaknesses',    color: '#c0392b', bg: 'rgba(220,80,60,0.06)' },
    { key: 'opportunities', label: 'Opportunities', color: '#7c5cff', bg: 'rgba(124,92,255,0.06)' },
    { key: 'threats',       label: 'Threats',       color: '#a87000', bg: 'rgba(245,165,35,0.08)' },
  ];
  return (
    <section>
      <SectionHead
        title="SWOT — automatisch gegenereerd"
        sub="Synthese van alle data-bronnen door AI. Elk punt is gelinkt aan zijn bron."
        confidence={0.68}
      />
      <div className="strategy-grid-2" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
        {blocks.map(b => (
          <div key={b.key} className="panel" style={{borderTop:`3px solid ${b.color}`}}>
            <div className="panel-body">
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.12em', color:b.color, fontWeight:800}}>{b.label}</div>
                <div style={{fontSize:11, color:'var(--ink-500)', fontFamily:'var(--font-mono)'}}>{sw[b.key].length} items</div>
              </div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
                {sw[b.key].map((item, i) => (
                  <li key={i} style={{padding:'10px 12px', borderRadius:8, background:b.bg}}>
                    <div style={{fontSize:13, color:'var(--ink-900)', lineHeight:1.45}}>{item.t}</div>
                    <div style={{fontSize:10, color:'var(--ink-500)', marginTop:5, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.06em'}}>↳ {item.src}</div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
      <Caveat>
        Generated by AI (Claude) op basis van 14 dashboards, 90 dagen data. Niet gecureerd. Strategy-leads zouden dit moeten reviewen voordat het in een board-doc komt.
      </Caveat>
    </section>
  );
}

// ---------- 5. Pillar alignment ----------
function PillarAlignment() {
  const p = S.STRAT_PILLARS;
  return (
    <section>
      <SectionHead
        title="Strategie ↔ uitvoering — passen budgetten bij wat je roept?"
        sub="Voor elke strategische pijler: wat is het beoogde aandeel van budget/aandacht, wat is het werkelijke aandeel?"
        confidence={0.71}
      />
      <div className="panel">
        <div className="panel-body" style={{display:'flex', flexDirection:'column', gap:14}}>
          {p.map(pl => {
            const pct = (n) => Math.round(n*100);
            const tone = pl.signal === 'ok' ? '#0a8a73' : pl.signal === 'over' ? '#7c5cff' : '#c0392b';
            const label = pl.signal === 'ok' ? '✓ In balans' : pl.signal === 'over' ? '↑ Over-invested' : '↓ Onder-invested';
            return (
              <div key={pl.id} className="strategy-pillar-row" style={{display:'grid', gridTemplateColumns:'200px 1fr 160px', gap:18, alignItems:'center'}}>
                <div>
                  <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)'}}>{pl.label}</div>
                  <div style={{fontSize:11, color:'var(--ink-500)', marginTop:2, lineHeight:1.4}}>{pl.note}</div>
                </div>
                <div style={{position:'relative', height:38, background:'#fafafd', borderRadius:6, border:'1px solid var(--ink-100)'}}>
                  {/* Target marker */}
                  <div style={{position:'absolute', left:`${pct(pl.target)}%`, top:-4, height:46, width:2, background:'#0a0a2e', zIndex:2}}>
                    <div style={{position:'absolute', top:-14, left:-14, fontSize:9, color:'#0a0a2e', fontWeight:700, width:28, textAlign:'center', fontFamily:'var(--font-mono)'}}>{pct(pl.target)}%</div>
                  </div>
                  {/* Actual bar */}
                  <div style={{position:'absolute', left:0, top:0, height:'100%', width:`${pct(pl.actual)}%`, background:`linear-gradient(90deg, ${tone}, ${tone}dd)`, borderRadius:'6px 0 0 6px', display:'flex', alignItems:'center', paddingLeft:10}}>
                    <span style={{fontSize:11, fontWeight:700, color:'white', fontFamily:'var(--font-mono)'}}>{pct(pl.actual)}%</span>
                  </div>
                  <div style={{position:'absolute', right:8, top:'50%', transform:'translateY(-50%)', fontSize:10, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:700}}>actueel · doel ▏</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <span style={{padding:'4px 10px', borderRadius:6, background:`${tone}15`, color:tone, fontSize:11, fontWeight:700, letterSpacing:'0.04em', textTransform:'uppercase'}}>{label}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <Caveat>
        Doel-aandelen geschat door AI op basis van wat de site-copy claimt te prioriteren. Werkelijk = % van paid-spend + % van content-output + % van homepage-real-estate (gewogen). Discussie aanbevolen — dit is geen feit, het is een spiegel.
      </Caveat>
    </section>
  );
}

// ---------- 6. Strategic moves ----------
function StrategicMoves() {
  const moves = S.STRAT_MOVES;
  return (
    <section>
      <SectionHead
        title="Strategische bewegingen — wat we zouden adviseren"
        sub="6 moves geprioriteerd op confidence × impact. Bedoeld voor kwartaalplanning, niet voor sprint-tickets."
        confidence={0.59}
      />
      <div className="strategy-moves-grid" style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12}}>
        {moves.map((m, idx) => {
          const conf = Math.round(m.confidence*100);
          const cTone = conf >= 70 ? '#0a8a73' : conf >= 55 ? '#a87000' : '#c0392b';
          return (
            <div key={m.id} className="panel" style={{position:'relative'}}>
              <div className="panel-body">
                <div style={{display:'flex', alignItems:'flex-start', gap:12}}>
                  <div style={{width:28, height:28, borderRadius:8, background:'var(--ser-navy)', color:'white', display:'grid', placeItems:'center', fontSize:12, fontWeight:800, fontFamily:'var(--font-mono)', flexShrink:0}}>{idx+1}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <h4 style={{margin:0, fontSize:14, fontWeight:700, color:'var(--ink-900)', lineHeight:1.35}}>{m.title}</h4>
                    <p style={{margin:'6px 0 12px', fontSize:12, color:'var(--ink-700)', lineHeight:1.5}}>{m.rationale}</p>

                    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6, padding:'8px 0', borderTop:'1px dashed var(--ink-100)', borderBottom:'1px dashed var(--ink-100)'}}>
                      <div>
                        <div style={{fontSize:9, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-500)', fontWeight:700}}>Verwacht</div>
                        <div style={{fontSize:11, fontWeight:700, color:'var(--ink-900)', marginTop:2}}>{m.expected}</div>
                      </div>
                      <div>
                        <div style={{fontSize:9, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-500)', fontWeight:700}}>Effort</div>
                        <div style={{fontSize:11, fontWeight:700, color:'var(--ink-900)', marginTop:2}}>{m.effort}</div>
                      </div>
                      <div>
                        <div style={{fontSize:9, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-500)', fontWeight:700}}>Horizon</div>
                        <div style={{fontSize:11, fontWeight:700, color:'var(--ink-900)', marginTop:2}}>{m.horizon}</div>
                      </div>
                    </div>

                    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:10}}>
                      <div style={{display:'flex', alignItems:'center', gap:8}}>
                        <div style={{width:60, height:5, borderRadius:3, background:'#f0f0f6', overflow:'hidden'}}>
                          <div style={{width:`${conf}%`, height:'100%', background:cTone}}></div>
                        </div>
                        <span style={{fontSize:11, color:cTone, fontWeight:700, fontFamily:'var(--font-mono)'}}>{conf}% conf.</span>
                      </div>
                      <button style={{padding:'5px 10px', borderRadius:6, background:'transparent', border:'1px solid var(--ink-200)', fontSize:11, fontWeight:600, color:'var(--ink-700)', cursor:'pointer'}}>→ Maak business case</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------- footer ----------
function BetaFooter() {
  return (
    <div style={{padding:'18px 22px', borderRadius:10, background:'#fafafd', border:'1px dashed var(--ink-200)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:18}}>
      <div>
        <div style={{fontSize:12, fontWeight:700, color:'var(--ink-900)', marginBottom:3}}>Dit dashboard is BETA — feedback gewenst</div>
        <div style={{fontSize:12, color:'var(--ink-700)', lineHeight:1.5, maxWidth:680}}>
          Strategische analyse leunt zwaar op interpretatie. We willen weten: welke onderdelen geven inzicht, welke ruis, en welke frameworks (Porter, Jobs-to-be-Done, Blue Ocean) zou je hier graag zien?
        </div>
      </div>
      <button style={{padding:'9px 14px', borderRadius:8, background:'var(--ser-navy)', color:'white', border:'none', fontSize:12, fontWeight:600, cursor:'pointer', whiteSpace:'nowrap'}}>Geef feedback</button>
    </div>
  );
}

// ---------- shared bits ----------
function SectionHead({ title, sub, confidence }) {
  const conf = confidence != null ? Math.round(confidence*100) : null;
  const cTone = conf >= 70 ? '#0a8a73' : conf >= 55 ? '#a87000' : '#c0392b';
  return (
    <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:18, marginBottom:10, paddingBottom:8, borderBottom:'1px solid var(--ink-100)'}}>
      <div>
        <h2 style={{margin:0, fontSize:18, fontWeight:700, color:'var(--ink-900)', letterSpacing:'-0.01em'}}>{title}</h2>
        {sub && <div style={{fontSize:13, color:'var(--ink-700)', marginTop:4, maxWidth:760, lineHeight:1.5}}>{sub}</div>}
      </div>
      {conf != null && (
        <div style={{textAlign:'right', flexShrink:0}}>
          <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.10em', color:'var(--ink-500)', fontWeight:700}}>Confidence</div>
          <div style={{fontSize:18, fontFamily:'var(--font-mono)', fontWeight:700, color:cTone}}>{conf}%</div>
        </div>
      )}
    </div>
  );
}

function Caveat({ children }) {
  return (
    <div style={{marginTop:8, padding:'10px 14px', borderRadius:6, background:'rgba(124,92,255,0.04)', borderLeft:'2px solid #d8d8e8'}}>
      <span style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.10em', color:'#7c5cff', fontWeight:700, marginRight:6}}>methodologie</span>
      <span style={{fontSize:11, color:'var(--ink-700)', lineHeight:1.5}}>{children}</span>
    </div>
  );
}

window.StrategyDashboard = StrategyDashboard;