// ============================================================
// ANALYTICS INTELLIGENCE CENTER
// Tabs: Overview · Breakdown · Attribution · Forecasting · AI Insights · Reports · Logs
// ============================================================

// ===================== OVERVIEW TAB =====================
function AnalyticsOverviewTab({ module, onPushToast }) {
  // Special-case: Geographic Heatmap module → show the UK map as the hero.
  if (module.id === 'geography') {
    return (
      <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
        <div className="fcc-alert info">
          <span className="fcc-alert-icon" style={{color: 'var(--brass-bright, #e8c98a)'}}>✦</span>
          <div style={{flex: 1}}>
            <div className="fcc-alert-title">London + Manchester drive 48% of pipeline</div>
            <div className="fcc-alert-body">
              UK metros dominate. Edinburgh and Glasgow are the highest-converting regions per capita.
              Cardiff is underperforming relative to its lead volume — Iris recommends a localised content variant.
            </div>
          </div>
          <button className="btn sm" onClick={() => onPushToast('Localised variants drafted · Cardiff')}>Optimise Cardiff</button>
        </div>
        <GeoHeatmap onPushToast={onPushToast}/>
      </div>
    );
  }

  const [period, setPeriod] = React.useState('30d');
  const sparkData = React.useMemo(
    () => Array.from({length: 60}, (_, i) => 30 + Math.sin(i * 0.3 + module.id.charCodeAt(0)) * 18 + Math.random() * 14),
    [module.id]
  );

  const subMetrics = {
    revenue:     [['Today', '£18,412'], ['7 days', '£124,800'], ['30 days', module.metric], ['MRR', '£42,100'], ['ARR', '£505k'], ['Avg deal', '£8,412']],
    pipeline:    [['Open deals', '142'], ['Avg cycle', '24 days'], ['Win rate', '38%'], ['Avg deal', '£12,800'], ['Pipeline / quota', '184%'], ['Stuck > 30d', '8']],
    leads:       [['Today', '184'], ['7 days', '1,214'], ['30 days', '4,218'], ['Qualified', '2,814'], ['ICP fit avg', '0.92'], ['Speed-to-lead', '24s']],
    cac:         [['Blended CAC', '£184'], ['Paid CAC', '£312'], ['Organic CAC', '£0'], ['Payback', '4.2 mo'], ['LTV:CAC', '3.4x'], ['Trend', '-12% MoM']],
    funnels:     [['Top CVR funnel', 'Belmont · 32.4%'], ['Bottom CVR', 'Iyer · 6.4%'], ['Best path', 'IG → SMS → AI'], ['Avg drop-off', '22.4%'], ['Bottlenecks', '3'], ['AI optimizations', '14 / wk']]
  };
  const metrics = subMetrics[module.id] || [['7 day', module.metric], ['30 day', module.metric], ['90 day', module.metric], ['Period change', module.delta], ['Confidence', `${module.confidence}%`], ['Last refresh', '2m ago']];

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-action-bar">
        <div className="segmented">
          {['24h','7d','30d','90d','ytd'].map(p => (
            <button key={p} className={period === p ? 'active' : ''} onClick={() => setPeriod(p)}>{p}</button>
          ))}
        </div>
        <span style={{flex: 1}}/>
        <button className="btn sm" onClick={() => onPushToast('Deep analysis running')}><Icon.Sparkles className="icon"/>Run deep analysis</button>
        <button className="btn sm" onClick={() => onPushToast('Report queued · 2 min ETA')}>Generate report</button>
        <button className="btn sm" onClick={() => onPushToast('AI audit · 12 checks running')}>AI audit</button>
        <button className="btn sm" onClick={() => onPushToast('Alert configured')}>Create alert</button>
        <button className="btn primary sm" onClick={() => onPushToast('Intelligence exported · CSV + PDF')}>Export</button>
      </div>

      {/* Hero chart */}
      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{borderBottom: 'none', padding: '14px 18px', display: 'flex', justifyContent: 'space-between'}}>
          <span>{module.name} · {period}</span>
          <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.12em'}}>
            {module.metric} {module.unit} · {module.delta} {module.deltaDir === 'up' ? '▲' : '▼'}
          </span>
        </div>
        <div style={{padding: '0 18px 18px'}}>
          <svg viewBox="0 0 800 200" preserveAspectRatio="none" style={{width: '100%', height: 200}}>
            <defs>
              <linearGradient id="as-hero-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor={module.hue} stopOpacity="0.45"/>
                <stop offset="100%" stopColor={module.hue} stopOpacity="0"/>
              </linearGradient>
            </defs>
            {[0, 0.25, 0.5, 0.75, 1].map((y, i) => (
              <line key={i} x1="0" x2="800" y1={y * 200} y2={y * 200} stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/>
            ))}
            <polygon
              points={`0,200 ${sparkData.map((v, i) => `${(i / (sparkData.length - 1)) * 800},${200 - (v / Math.max(...sparkData)) * 180}`).join(' ')} 800,200`}
              fill="url(#as-hero-grad)"
            />
            <polyline
              points={sparkData.map((v, i) => `${(i / (sparkData.length - 1)) * 800},${200 - (v / Math.max(...sparkData)) * 180}`).join(' ')}
              fill="none" stroke={module.hue} strokeWidth="1.5" vectorEffect="non-scaling-stroke"
            />
          </svg>
        </div>
      </div>

      {/* Sub-metrics grid */}
      <div className="fcc-analytics-grid">
        {metrics.map(([lbl, v], i) => (
          <div key={i} className="fcc-kpi-mini">
            <div className="lbl">{lbl}</div>
            <div className="val" style={{color: i === 0 ? module.hue : 'var(--text)'}}>{v}</div>
          </div>
        ))}
      </div>

      {/* Alert strip */}
      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--cyan)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">{module.deltaDir === 'up' ? `${module.name} velocity ${module.delta}` : `${module.name} velocity warning`}</div>
          <div className="fcc-alert-body">{module.ai}</div>
        </div>
        <button className="btn sm" onClick={() => onPushToast('Alert created · daily digest')}>Create alert</button>
      </div>
    </div>
  );
}

// ===================== BREAKDOWN TAB =====================
function AnalyticsBreakdownTab({ module, onPushToast }) {
  const [groupBy, setGroupBy] = React.useState('funnel');
  const [view, setView] = React.useState('table');

  const dims = {
    funnel:   [['Belmont · new patient', 184200, 24, '+18%'], ['Acme · seller leads', 124000, 18, '+24%'], ['Demiurge · principals', 412000, 14, '+8%'], ['Atelier · launch', 38400, 8, '-4%'], ['Iyer · masterclass', 84200, 12, '+12%']],
    channel:  [['Google Ads', 84200, 24, '+12%'], ['Meta Ads', 64100, 18, '+8%'], ['TikTok', 48400, 14, '+38%'], ['LinkedIn', 38400, 11, '+4%'], ['Organic', 124000, 22, '+18%'], ['Email', 38400, 11, '+24%']],
    geography:[['UK · London', 184200, 38, '+18%'], ['UK · Manchester', 84200, 18, '+22%'], ['EU · DE', 64100, 13, '+12%'], ['EU · FR', 38400, 8, '+8%'], ['US · East', 48400, 10, '+14%'], ['US · West', 38400, 8, '+18%'], ['AU', 18400, 4, '+24%']],
    agent:    [['Atlas', 184200, 38, '+24%'], ['Hermes', 84200, 18, '+18%'], ['Vesta', 64100, 13, '+12%'], ['Iris', 38400, 8, '+4%'], ['Orion', 48400, 10, '+8%'], ['Calliope', 38400, 8, '+22%']],
    rep:      [['Reza Khalili', 184200, 38, '+18%'], ['Anya Patel', 84200, 18, '+22%'], ['Marcus W.', 64100, 13, '+8%'], ['Priya Iyer', 38400, 8, '+4%']],
    industry: [['SaaS', 184200, 28, '+18%'], ['Dental', 124000, 18, '+24%'], ['Property', 84200, 13, '+12%'], ['Legal', 38400, 6, '+4%'], ['Agency', 48400, 8, '+22%'], ['Trades', 28400, 5, '+18%']],
    type:     [['Enterprise', 412000, 18, '+24%'], ['SMB', 184200, 48, '+18%'], ['Self-serve', 64100, 28, '+14%'], ['Pilot', 18400, 6, '+8%']]
  };
  const rows = dims[groupBy] || dims.funnel;
  const total = rows.reduce((s, r) => s + r[1], 0);

  // Special-case geography → render the dedicated UK heatmap.
  if (groupBy === 'geography') {
    return (
      <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
        <div className="fcc-action-bar">
          <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Group by</span>
          <div className="segmented">
            {[
              ['funnel', 'Funnel'],
              ['channel', 'Channel'],
              ['geography', 'Geography'],
              ['agent', 'AI Agent'],
              ['rep', 'Sales rep'],
              ['industry', 'Industry'],
              ['type', 'Customer type']
            ].map(([k, l]) => (
              <button key={k} className={groupBy === k ? 'active' : ''} onClick={() => setGroupBy(k)}>{l}</button>
            ))}
          </div>
        </div>
        <GeoHeatmap onPushToast={onPushToast}/>
      </div>
    );
  }

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-action-bar">
        <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Group by</span>
        <div className="segmented">
          {[
            ['funnel', 'Funnel'],
            ['channel', 'Channel'],
            ['geography', 'Geography'],
            ['agent', 'AI Agent'],
            ['rep', 'Sales rep'],
            ['industry', 'Industry'],
            ['type', 'Customer type']
          ].map(([k, l]) => (
            <button key={k} className={groupBy === k ? 'active' : ''} onClick={() => setGroupBy(k)}>{l}</button>
          ))}
        </div>
        <span style={{flex: 1}}/>
        <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>View</span>
        <div className="segmented">
          {[['table', 'Table'], ['bar', 'Bar'], ['heat', 'Heatmap']].map(([k, l]) => (
            <button key={k} className={view === k ? 'active' : ''} onClick={() => setView(k)}>{l}</button>
          ))}
        </div>
      </div>

      {view === 'table' && (
        <div className="fcc-trf-table">
          <div className="fcc-trf-row hd" style={{gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'}}>
            <div className="c">Dimension</div>
            <div className="c">Revenue</div>
            <div className="c">Share</div>
            <div className="c">Delta</div>
            <div className="c">Trend</div>
          </div>
          {rows.map((r, i) => {
            const share = (r[1] / total) * 100;
            const sparkData = Array.from({length: 14}, (_, i) => 30 + Math.sin(i * 0.5 + r[0].charCodeAt(0)) * 14 + Math.random() * 8);
            return (
              <div key={i} className="fcc-trf-row" style={{gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'}} onClick={() => onPushToast(`Drilling: ${r[0]}`)}>
                <div className="c"><span style={{color: 'var(--text)', fontSize: 13}}>{r[0]}</span></div>
                <div className="c mono tnum" style={{color: 'var(--good)'}}>£{r[1].toLocaleString()}</div>
                <div className="c">
                  <div style={{display: 'flex', alignItems: 'center', gap: 8, width: '100%'}}>
                    <div className="bar-track" style={{flex: 1, height: 4}}>
                      <div className="bar-fill" style={{width: `${share}%`, background: module.hue, boxShadow: `0 0 6px ${module.hue}`}}/>
                    </div>
                    <span className="mono" style={{fontSize: 11, minWidth: 36, textAlign: 'right'}}>{share.toFixed(1)}%</span>
                  </div>
                </div>
                <div className="c mono" style={{color: r[3].startsWith('+') ? 'var(--good)' : 'var(--danger)'}}>{r[3]}</div>
                <div className="c" style={{padding: '4px 8px'}}>
                  <svg viewBox="0 0 100 30" preserveAspectRatio="none" style={{width: 80, height: 24}}>
                    <polyline points={sparkData.map((v, i) => `${(i / (sparkData.length - 1)) * 100},${30 - (v / 60) * 28}`).join(' ')} fill="none" stroke={module.hue} strokeWidth="1.2" vectorEffect="non-scaling-stroke"/>
                  </svg>
                </div>
              </div>
            );
          })}
        </div>
      )}
      {view === 'bar' && (
        <div className="fcc-mini-card">
          <div style={{padding: 20, display: 'flex', flexDirection: 'column', gap: 12}}>
            {rows.map((r, i) => {
              const share = (r[1] / total) * 100;
              return (
                <div key={i} style={{display: 'flex', alignItems: 'center', gap: 14}}>
                  <span style={{minWidth: 180, fontSize: 13, color: 'var(--text)'}}>{r[0]}</span>
                  <div style={{flex: 1, height: 22, background: 'rgba(255,255,255,0.04)', borderRadius: 3, overflow: 'hidden', border: '1px solid var(--border)', position: 'relative'}}>
                    <div style={{
                      width: `${share}%`, height: '100%',
                      background: `linear-gradient(90deg, ${module.hue}80, ${module.hue}30)`,
                      boxShadow: `inset 0 0 12px ${module.hue}40`
                    }}/>
                    <span style={{position: 'absolute', right: 8, top: 3, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)'}}>£{r[1].toLocaleString()}</span>
                  </div>
                  <span className="mono" style={{fontSize: 11, minWidth: 60, textAlign: 'right', color: 'var(--cyan)'}}>{share.toFixed(1)}%</span>
                </div>
              );
            })}
          </div>
        </div>
      )}
      {view === 'heat' && (
        <div className="fcc-mini-card">
          <div style={{padding: 20}}>
            <div style={{display: 'grid', gridTemplateColumns: `180px repeat(12, 1fr)`, gap: 2, fontSize: 10, fontFamily: 'var(--font-mono)'}}>
              <div></div>
              {Array.from({length: 12}, (_, i) => <div key={i} style={{color: 'var(--text-faint)', textAlign: 'center'}}>W{i+1}</div>)}
              {rows.map((r, ri) => (
                <React.Fragment key={ri}>
                  <div style={{color: 'var(--text)', padding: '4px 0'}}>{r[0]}</div>
                  {Array.from({length: 12}, (_, ci) => {
                    const intensity = Math.abs(Math.sin(ri * 0.7 + ci * 0.4 + r[0].charCodeAt(0)));
                    return (
                      <div key={ci} title={`${r[0]} · W${ci+1}`} style={{
                        height: 24,
                        background: `${module.hue}${Math.floor(intensity * 99).toString(16).padStart(2, '0')}`,
                        border: '1px solid rgba(255,255,255,0.04)',
                        borderRadius: 1,
                        cursor: 'pointer',
                        transition: 'transform 0.12s'
                      }}/>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
            <div style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-faint)'}}>
              <span>low</span>
              <div style={{display: 'flex', gap: 1}}>
                {[0.15, 0.3, 0.5, 0.7, 0.9].map(a => (
                  <div key={a} style={{width: 18, height: 10, background: `${module.hue}${Math.floor(a * 99).toString(16).padStart(2, '0')}`}}/>
                ))}
              </div>
              <span>high</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ===================== ATTRIBUTION TAB =====================
function AnalyticsAttributionTab({ module, onPushToast }) {
  const [model, setModel] = React.useState('multi_touch');
  const models = [
    ['first_touch', 'First touch'],
    ['last_touch',  'Last touch'],
    ['linear',      'Linear'],
    ['time_decay',  'Time decay'],
    ['multi_touch', 'Multi-touch'],
    ['ai',          'AI Attribution']
  ];

  const journeys = [
    { steps: ['Instagram', 'SMS follow-up', 'AI booking', 'Close'],         revenue: 38412, count: 84, lift: '+12%' },
    { steps: ['Google Ads', 'Landing', 'Form', 'Hermes call', 'Close'],     revenue: 28412, count: 64, lift: '+8%'  },
    { steps: ['TikTok',    'Reel CTA',  'WhatsApp', 'Close'],               revenue: 18412, count: 48, lift: '+38%' },
    { steps: ['LinkedIn',  'DM',        'Email seq · D7', 'Close'],         revenue: 24108, count: 42, lift: '+18%' },
    { steps: ['Organic',   'Pricing',   'Demo booking', 'Close'],           revenue: 84200, count: 28, lift: '+4%'  },
    { steps: ['Referral',  'Direct',    'Close'],                           revenue: 64100, count: 38, lift: '+24%' },
    { steps: ['Email · cohort 14', 'SMS', 'AI follow-up', 'Reactivate'],    revenue: 18400, count: 24, lift: '+8%'  }
  ];

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-action-bar">
        <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Attribution model</span>
        <div className="segmented">
          {models.map(([k, l]) => (
            <button key={k} className={model === k ? 'active' : ''} onClick={() => setModel(k)}>{l}</button>
          ))}
        </div>
        <span style={{flex: 1}}/>
        <button className="btn sm" onClick={() => onPushToast('Recalculating attribution · 30d backfill')}><Icon.Refresh className="icon"/>Recalculate</button>
      </div>

      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--cyan)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">"Instagram → SMS follow-up → AI booking → close" generated £38,412 this month</div>
          <div className="fcc-alert-body">
            Top assisting path — 84 conversions, +12% vs prior period. AI recommends doubling SMS reachout from D2 to D2 + D4.
          </div>
        </div>
        <button className="btn sm" onClick={() => onPushToast('Path optimization queued')}>Optimize path</button>
      </div>

      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{borderBottom: '1px solid var(--border)', padding: '14px 18px'}}>Top converting journeys · {models.find(m => m[0] === model)[1]}</div>
        <div style={{padding: '14px 0'}}>
          {journeys.map((j, i) => (
            <div key={i} className="as-journey" onClick={() => onPushToast(`Journey opened · ${j.steps.join(' → ')}`)}>
              <span className="mono" style={{fontSize: 10, color: 'var(--text-faint)', letterSpacing: '0.16em', minWidth: 28}}>/ {String(i+1).padStart(2,'0')}</span>
              <div style={{flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'}}>
                {j.steps.map((s, si) => (
                  <React.Fragment key={si}>
                    <span className="as-journey-step" style={{
                      borderColor: si === j.steps.length - 1 ? 'rgba(93,255,176,0.4)' : 'var(--border)',
                      color: si === j.steps.length - 1 ? 'var(--good)' : 'var(--text)',
                      background: si === j.steps.length - 1 ? 'rgba(93,255,176,0.06)' : 'rgba(255,255,255,0.02)'
                    }}>
                      {s}
                    </span>
                    {si < j.steps.length - 1 && <span style={{color: module.hue, fontSize: 10}}>→</span>}
                  </React.Fragment>
                ))}
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: 18, fontFamily: 'var(--font-mono)', fontSize: 11}}>
                <span style={{color: 'var(--text-dim)'}}>{j.count} conv</span>
                <span style={{color: 'var(--good)', fontSize: 13}}>£{j.revenue.toLocaleString()}</span>
                <span style={{color: j.lift.startsWith('+') ? 'var(--good)' : 'var(--danger)', minWidth: 44, textAlign: 'right'}}>{j.lift}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="fcc-alert warn">
        <span className="fcc-alert-icon">⚠</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">Revenue leakage point identified</div>
          <div className="fcc-alert-body">
            18% of Meta-sourced leads never reach the qualification stage when traffic hits weekend hours. £12,400 estimated leakage / month. Iris recommends weekend-aware routing.
          </div>
        </div>
        <button className="btn sm" onClick={() => onPushToast('Weekend routing rule drafted')}>Build rule</button>
      </div>
    </div>
  );
}

// ===================== FORECASTING TAB =====================
function AnalyticsForecastTab({ module, onPushToast }) {
  const [adSpend, setAdSpend] = React.useState(100);
  const [posting, setPosting] = React.useState(100);
  const [funnelCvr, setFunnelCvr] = React.useState(100);
  const [closeRate, setCloseRate] = React.useState(100);

  // Simple compounding model
  const base = 487200;
  const multiplier = (adSpend / 100) * 0.18 + (posting / 100) * 0.12 + (funnelCvr / 100) * 0.42 + (closeRate / 100) * 0.28;
  const projected = base * multiplier;
  const best = projected * 1.18;
  const worst = projected * 0.78;

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--brass-bright, #e8c98a)'}}>∞</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">Predictive scenario model · drag sliders to model outcomes</div>
          <div className="fcc-alert-body">
            Forecast is recalibrated every 6 hours against actuals. Confidence interval ±18% on the 60-day horizon.
          </div>
        </div>
      </div>

      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{padding: '14px 18px'}}>Levers · scenario</div>
        <div style={{padding: '8px 0'}}>
          {[
            ['Ad spend',                adSpend,   setAdSpend,   50, 200],
            ['Posting frequency',       posting,   setPosting,   50, 200],
            ['Funnel conversion %',     funnelCvr, setFunnelCvr, 80, 150],
            ['Close rate',              closeRate, setCloseRate, 80, 150]
          ].map(([lbl, val, setter, min, max], i) => (
            <div key={i} className="ccc-setting-row">
              <div>
                <div className="ccc-setting-lbl">{lbl}</div>
                <div className="ccc-setting-sub">scale current performance — 100 = today's rate</div>
              </div>
              <div className="ccc-setting-ctrl">
                <input
                  type="range"
                  min={min}
                  max={max}
                  value={val}
                  onChange={e => setter(+e.target.value)}
                  className="ccc-slider"
                />
                <span className="mono" style={{minWidth: 48, textAlign: 'right', color: val > 100 ? 'var(--good)' : val < 100 ? 'var(--warn)' : 'var(--text)'}}>
                  {val > 100 ? '+' : ''}{val - 100}%
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="fcc-analytics-grid" style={{gridTemplateColumns: 'repeat(3, 1fr)'}}>
        <div className="fcc-kpi-mini">
          <div className="lbl">Worst case · 60d</div>
          <div className="val" style={{color: 'var(--warn)'}}>£{(worst / 1000).toFixed(1)}<span style={{fontSize: 14, fontFamily: 'var(--font-mono)', fontStyle: 'normal', marginLeft: 2}}>k</span></div>
          <div className="d mono" style={{color: 'var(--warn)'}}>p10 confidence</div>
        </div>
        <div className="fcc-kpi-mini" style={{borderColor: 'rgba(75,232,255,0.3)', background: 'linear-gradient(180deg, rgba(75,232,255,0.04), rgba(255,255,255,0.005))'}}>
          <div className="lbl">Expected case · 60d</div>
          <div className="val" style={{color: 'var(--cyan)'}}>£{(projected / 1000).toFixed(1)}<span style={{fontSize: 14, fontFamily: 'var(--font-mono)', fontStyle: 'normal', marginLeft: 2}}>k</span></div>
          <div className="d mono" style={{color: 'var(--cyan)'}}>p50 confidence</div>
        </div>
        <div className="fcc-kpi-mini">
          <div className="lbl">Best case · 60d</div>
          <div className="val" style={{color: 'var(--good)'}}>£{(best / 1000).toFixed(1)}<span style={{fontSize: 14, fontFamily: 'var(--font-mono)', fontStyle: 'normal', marginLeft: 2}}>k</span></div>
          <div className="d mono" style={{color: 'var(--good)'}}>p90 confidence</div>
        </div>
      </div>

      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{padding: '14px 18px'}}>Additional projections · next 30 days</div>
        <div style={{padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14}}>
          {[
            ['Booked meetings',     `${Math.round(1284 * multiplier).toLocaleString()}`, 'var(--violet)'],
            ['Churn probability',   `${(2.4 / multiplier).toFixed(1)}%`,                'var(--warn)'],
            ['Campaign ROI',        `${(6.2 * multiplier).toFixed(1)}x`,                'var(--good)'],
            ['Staffing load',       `${Math.round(94 / multiplier)}%`,                  'var(--cyan)'],
            ['Growth bottlenecks',  `${Math.max(0, Math.round(3 / multiplier))} flagged`, 'var(--danger)'],
            ['Missed opportunities',`£${Math.round(42000 / multiplier).toLocaleString()}`, 'var(--warn)']
          ].map(([lbl, v, color], i) => (
            <div key={i} style={{padding: 12, background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', borderRadius: 'var(--radius)'}}>
              <div style={{fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--text-faint)', letterSpacing: '0.16em', textTransform: 'uppercase'}}>{lbl}</div>
              <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24, marginTop: 6, color, letterSpacing: '-0.02em'}}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--good)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">
            {funnelCvr > 105 ? `If funnel conversion improves +${funnelCvr - 100}%, projected MRR increases to £${Math.round(42100 * (funnelCvr / 100)).toLocaleString()}.` : 'Tune the conversion lever to see compounding revenue projections.'}
          </div>
        </div>
        <button className="btn primary sm" onClick={() => onPushToast('Scenario saved · "Aggressive growth"')}>Save scenario</button>
      </div>
    </div>
  );
}

// ===================== AI INSIGHTS TAB =====================
function AnalyticsAIInsightsTab({ module, onPushToast }) {
  const INSIGHTS = [
    { score: 9.2,  kind: 'opportunity', title: 'Shift £1,200/wk from Meta to TikTok',                    body: 'TikTok 8.4x ROAS vs Meta 5.2x. Projected lift +£18k/month.', impact: '+£18k/mo', verb: 'Apply reallocation' },
    { score: 8.8,  kind: 'opportunity', title: 'Lead response delay above 8 minutes reduces close rate by 18%', body: 'Hermes recovery currently triggers at 10 minutes. Tighten to 4.', impact: '+£12k/mo', verb: 'Tighten SLA' },
    { score: 8.4,  kind: 'opportunity', title: 'Funnels A & C should be merged',                          body: 'Same ICP, 84% audience overlap. Merging removes one bottleneck and lifts e2e CVR by 2.2pp.', impact: '+£8k/mo', verb: 'Merge funnels' },
    { score: 7.9,  kind: 'risk',        title: 'Atelier · launch funnel above acceptable drop-off',      body: '62% drop at the form stage. Single-page mobile form recommended.', impact: '-£14k/mo risk', verb: 'Build variant' },
    { score: 7.4,  kind: 'risk',        title: 'Acme Property · churn probability 38% in 90 days',       body: 'NPS dropped to 4 · usage down 24%. Recommend QBR + expansion offer.', impact: '-£18k MRR risk', verb: 'Schedule QBR' },
    { score: 6.8,  kind: 'opportunity', title: 'TikTok acquisition costs 37% lower than Meta',           body: 'Test extending TikTok creative variants from 4 → 8 per week.', impact: '+£6k/mo', verb: 'Brief Calliope' },
    { score: 6.4,  kind: 'risk',        title: '£14k spend wasted on LinkedIn DMs (no replies)',          body: 'CTR 0.4% · zero conversions in 30d. Pause or reposition.', impact: '+£14k freed', verb: 'Pause campaign' },
    { score: 5.8,  kind: 'opportunity', title: 'D14 trial-expiring email drives 8% reactivation',         body: 'Send variant with social proof — projected lift +2pp.', impact: '+£3k/mo', verb: 'Run A/B test' }
  ];

  const opportunityScore = 8.4;
  const riskScore = 3.2;

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>
        <div className="fcc-mini-card" style={{padding: 24}}>
          <div className="mono faint" style={{fontSize: 9.5, letterSpacing: '0.18em', textTransform: 'uppercase'}}>Opportunity score</div>
          <div style={{display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 10}}>
            <span style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 64, color: 'var(--good)', letterSpacing: '-0.03em', lineHeight: 1}}>{opportunityScore}</span>
            <span style={{fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)'}}>/ 10</span>
            <span style={{flex: 1}}/>
            <span style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--good)', letterSpacing: '0.12em', textTransform: 'uppercase'}}>▲ +0.6 vs last week</span>
          </div>
          <div style={{marginTop: 14, fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.5}}>
            6 high-value opportunities surfaced. Top three account for <span style={{color: 'var(--good)'}}>£38k/month</span> recoverable.
          </div>
        </div>
        <div className="fcc-mini-card" style={{padding: 24}}>
          <div className="mono faint" style={{fontSize: 9.5, letterSpacing: '0.18em', textTransform: 'uppercase'}}>Risk score</div>
          <div style={{display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 10}}>
            <span style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 64, color: 'var(--warn)', letterSpacing: '-0.03em', lineHeight: 1}}>{riskScore}</span>
            <span style={{fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)'}}>/ 10</span>
            <span style={{flex: 1}}/>
            <span style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--good)', letterSpacing: '0.12em', textTransform: 'uppercase'}}>▼ -0.4 vs last week</span>
          </div>
          <div style={{marginTop: 14, fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.5}}>
            3 active risks · 1 churn flag · estimated <span style={{color: 'var(--danger)'}}>£32k/month</span> at-risk if unaddressed.
          </div>
        </div>
      </div>

      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{padding: '14px 18px'}}>Growth levers & hidden insights · sorted by score</div>
        <div style={{padding: '8px 0'}}>
          {INSIGHTS.map((ins, i) => (
            <div key={i} className="as-insight">
              <div className="as-insight-score" style={{
                color: ins.kind === 'opportunity' ? 'var(--good)' : 'var(--warn)',
                background: ins.kind === 'opportunity' ? 'rgba(93,255,176,0.08)' : 'rgba(255,177,75,0.08)',
                border: `1px solid ${ins.kind === 'opportunity' ? 'rgba(93,255,176,0.3)' : 'rgba(255,177,75,0.3)'}`
              }}>
                {ins.score}
              </div>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4}}>
                  <span className="mono" style={{
                    fontSize: 9.5,
                    padding: '2px 6px',
                    borderRadius: 2,
                    letterSpacing: '0.14em',
                    color: ins.kind === 'opportunity' ? 'var(--good)' : 'var(--warn)',
                    background: ins.kind === 'opportunity' ? 'rgba(93,255,176,0.08)' : 'rgba(255,177,75,0.08)',
                    border: `1px solid ${ins.kind === 'opportunity' ? 'rgba(93,255,176,0.3)' : 'rgba(255,177,75,0.3)'}`
                  }}>{ins.kind.toUpperCase()}</span>
                  <span style={{fontSize: 13.5, color: 'var(--text)'}}>{ins.title}</span>
                </div>
                <div style={{fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5}}>{ins.body}</div>
              </div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end', flexShrink: 0}}>
                <span className="mono" style={{fontSize: 11, color: ins.impact.startsWith('+') ? 'var(--good)' : 'var(--danger)', letterSpacing: '0.06em'}}>{ins.impact}</span>
                <div style={{display: 'flex', gap: 4}}>
                  <button className="btn ghost sm" onClick={() => onPushToast(`Assigned to operator · ${ins.title.slice(0, 32)}…`)}>Assign</button>
                  <button className="btn primary sm" onClick={() => onPushToast(`${ins.verb} · queued`)}>{ins.verb}</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ===================== REPORTS TAB =====================
function AnalyticsReportsTab({ module, onPushToast }) {
  const TEMPLATES = [
    { id: 'ceo',       name: 'CEO report',                 desc: 'Executive view of revenue · pipeline · risk · forecast', cadence: 'weekly', last: 'Mon 06:00' },
    { id: 'growth',    name: 'Weekly growth report',       desc: 'Acquisition · activation · channel mix · cohorts',       cadence: 'weekly', last: 'Mon 07:00' },
    { id: 'marketing', name: 'Marketing report',           desc: 'Spend · ROAS · creative performance · attribution',      cadence: 'weekly', last: 'Mon 07:30' },
    { id: 'funnel',    name: 'Funnel performance',         desc: 'CVR by stage · drop-off · AI recommendations',           cadence: 'monthly', last: '1 Jun' },
    { id: 'sales',     name: 'Sales performance',          desc: 'Pipeline · win rate · rep load · forecast accuracy',     cadence: 'weekly', last: 'Mon 08:00' },
    { id: 'agency',    name: 'Agency report',              desc: 'Per-account · margin · capacity · churn risk',           cadence: 'weekly', last: 'Mon 09:00' },
    { id: 'client',    name: 'Client report',              desc: 'White-label client deliverable · branded · monthly',     cadence: 'monthly', last: '1 Jun' },
    { id: 'investor', name: 'Investor report',             desc: 'KPIs · cohorts · runway · 12-month forecast',            cadence: 'monthly', last: '1 Jun' }
  ];

  const [busy, setBusy] = React.useState(null);
  const [summary, setSummary] = React.useState(null);

  const generate = async (tpl) => {
    setBusy(tpl.id);
    setSummary(null);
    try {
      const text = await window.claude.complete({
        messages: [{
          role: 'user',
          content: `You are Demiurge Intelligence. Write the lede paragraph (90-120 words) of a "${tpl.name}" for week 22 of 2026. Cover: revenue +14.2% MoM, pipeline £1.84M, TikTok ROAS up to 8.4x, one risk flag, one opportunity. No preamble. No bullets. Confident operator voice.`
        }]
      });
      setSummary({ name: tpl.name, text });
    } catch {
      setSummary({
        name: tpl.name,
        text: `Demiurge Intelligence Summary — This week revenue increased 14.2%, driven primarily by appointment funnel improvements and TikTok content velocity. Pipeline expanded to £1.84M with 142 deals in flight. TikTok ROAS climbed to 8.4x, outpacing Meta by a wide margin — Orion has flagged a reallocation that should compound this lift. One risk: Atelier's launch funnel is bleeding mobile traffic at the form stage. One opportunity: merging Funnels A and C would lift end-to-end conversion by 2.2pp and consolidate the team's attention.`
      });
    }
    setBusy(null);
    onPushToast(`Generated · ${tpl.name}`);
  };

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-action-bar">
        <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase'}}>
          8 templates · auto-generated · brand-aware
        </span>
        <span style={{flex: 1}}/>
        <button className="btn sm" onClick={() => onPushToast('Recurring schedule configured')}>Schedule weekly</button>
        <button className="btn sm" onClick={() => onPushToast('Email summary sent to leadership')}>Email summary</button>
        <button className="btn primary sm" onClick={() => onPushToast('Building report library export')}>
          <Icon.Sparkles className="icon"/>Generate all
        </button>
      </div>

      <div className="as-reports-grid">
        {TEMPLATES.map(tpl => (
          <div key={tpl.id} className="as-report-card">
            <div style={{display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12}}>
              <div style={{minWidth: 0, flex: 1}}>
                <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, letterSpacing: '-0.01em', color: 'var(--text)'}}>{tpl.name}</div>
                <div style={{fontSize: 12, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.5}}>{tpl.desc}</div>
              </div>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 8px',
                color: 'var(--brass-bright, #e8c98a)',
                background: 'rgba(232,201,138,0.08)',
                border: '1px solid rgba(232,201,138,0.3)',
                borderRadius: 2, letterSpacing: '0.14em', textTransform: 'uppercase'
              }}>{tpl.cadence}</span>
            </div>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, marginTop: 12, borderTop: '1px solid var(--border)'}}>
              <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.1em'}}>
                last <span style={{color: 'var(--text-dim)'}}>{tpl.last}</span>
              </span>
              <div style={{display: 'flex', gap: 4}}>
                <button className="btn ghost sm" onClick={() => onPushToast(`PDF generated · ${tpl.name}`)}>PDF</button>
                <button className="btn ghost sm" onClick={() => onPushToast(`CSV exported · ${tpl.name}`)}>CSV</button>
                <button className="btn primary sm" onClick={() => generate(tpl)} disabled={busy === tpl.id}>
                  <Icon.Sparkles className="icon"/>{busy === tpl.id ? 'Writing…' : 'Generate'}
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {summary && (
        <div className="ccc-compose-result">
          <div className="ccc-setting-hd" style={{borderBottom: 'none', padding: 0, paddingBottom: 8}}>
            {summary.name} · AI summary
          </div>
          <pre>{summary.text}</pre>
          <div style={{display: 'flex', gap: 8, justifyContent: 'flex-end'}}>
            <button className="btn sm" onClick={() => onPushToast('Copied to clipboard')}>Copy</button>
            <button className="btn primary sm" onClick={() => onPushToast('Distributed · 4 recipients')}>Send to leadership</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ===================== LOGS TAB =====================
function AnalyticsLogsTab({ module, onPushToast }) {
  const [filter, setFilter] = React.useState('all');
  const events = React.useMemo(() => {
    const types = [
      { k: 'refresh',  icon: '↻', color: 'var(--cyan)',     label: 'metric_refresh', verbs: ['Metric refreshed for', 'Live recalculation on', 'Stream tick for'] },
      { k: 'model',    icon: '⚙', color: 'var(--violet)',   label: 'model_recalc',   verbs: ['Attribution recalculated on', 'Forecast model re-fit for', 'Cohort recomputed on'] },
      { k: 'ai',       icon: '✦', color: 'var(--magenta)',  label: 'ai_insight',     verbs: ['Recommendation surfaced for', 'New opportunity scored for', 'Pattern detected on'] },
      { k: 'attr',     icon: '⇆', color: 'var(--good)',     label: 'attribution',    verbs: ['Attribution model changed for', 'Touch weight rebalanced on', 'Journey path updated for'] },
      { k: 'alert',    icon: '⚠', color: 'var(--warn)',     label: 'alert',          verbs: ['Alert triggered on', 'Threshold crossed for', 'Watchdog fired on'] },
      { k: 'anomaly',  icon: '◐', color: 'var(--danger)',   label: 'anomaly',        verbs: ['Anomaly detected on', 'Outlier flagged for', 'Variance breach on'] },
      { k: 'report',   icon: '✎', color: 'var(--brass-bright, #e8c98a)', label: 'report', verbs: ['Report generated · ', 'Summary written for', 'PDF rendered for'] },
      { k: 'export',   icon: '⤓', color: 'var(--text-dim)', label: 'export',         verbs: ['CSV exported for', 'Data dump for', 'API pull for'] }
    ];
    const ev = [];
    const seed = module.id.charCodeAt(0);
    for (let i = 0; i < 38; i++) {
      const tIdx = (seed + i * 5) % types.length;
      const type = types[tIdx];
      const min = (i + seed * 7) % 60;
      const hr = Math.floor((i * 13 + seed) / 6) % 24;
      const verb = type.verbs[i % type.verbs.length];
      ev.push({
        time: `${String(hr).padStart(2, '0')}:${String(min).padStart(2, '0')}:${String((i * 11) % 60).padStart(2, '0')}`,
        type,
        msg: `${verb} ${module.name}`,
        actor: ['system', 'Iris', 'Orion', 'Calliope', 'Atlas', 'Reza'][(i + seed) % 6]
      });
    }
    return ev;
  }, [module.id, module.name]);

  const sets = {
    success: new Set(['refresh', 'report', 'attr']),
    warning: new Set(['alert']),
    critical: new Set(['anomaly']),
    ai: new Set(['ai', 'model']),
    human: new Set(['report', 'export']),
    system: new Set(['refresh', 'model', 'attr', 'alert'])
  };

  const filtered = filter === 'all' ? events
    : sets[filter] ? events.filter(e => sets[filter].has(e.type.k))
    : events;

  return (
    <div>
      <div style={{display: 'flex', alignItems: 'center', gap: 10, padding: '0 4px 14px', flexWrap: 'wrap'}}>
        {[['all','All'],['success','Success'],['warning','Warning'],['critical','Critical'],['ai','AI'],['human','Human'],['system','System']].map(([k, l]) => (
          <button key={k} onClick={() => setFilter(k)} className={`ccc-pill ${filter === k ? 'on' : ''}`}>{l}</button>
        ))}
        <span style={{flex: 1}}/>
        <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase'}}>
          Streaming · {filtered.length} events · {module.name}
        </span>
      </div>
      <div className="ccc-logs">
        {filtered.map((e, i) => (
          <div key={i} className="ccc-log-row">
            <span className="mono faint" style={{fontSize: 10.5, color: 'var(--text-faint)', minWidth: 64}}>{e.time}</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 20, height: 20, borderRadius: 3,
              background: `${e.type.color}15`, color: e.type.color,
              fontSize: 11, border: `1px solid ${e.type.color}40`
            }}>{e.type.icon}</span>
            <span className="mono" style={{fontSize: 10, color: e.type.color, letterSpacing: '0.12em', textTransform: 'uppercase', minWidth: 110}}>{e.type.label}</span>
            <span style={{fontSize: 12.5, color: 'var(--text)', flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{e.msg}</span>
            <span className="mono faint" style={{fontSize: 10}}>{e.actor}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===================== MAIN CONTROL CENTER =====================
function AnalyticsIntelligenceCenter({ module, onBack }) {
  const [tab, setTab] = React.useState('overview');
  const [toast, setToast] = React.useState(null);

  const pushToast = (msg) => {
    setToast({ msg, id: Date.now() });
    setTimeout(() => setToast(t => (t && t.msg === msg ? null : t)), 2400);
  };

  return (
    <div className="ccc-shell">
      <div className="ccc-hd">
        <button className="ccc-back" onClick={onBack}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
          <span>Intelligence</span>
        </button>
        <div className="ccc-hd-glyph" style={{color: module.hue, background: `linear-gradient(135deg, ${module.hue}25, ${module.hue}05)`, borderColor: `${module.hue}30`}}>
          {Icon[module.icon] ? React.createElement(Icon[module.icon], {style: {width: 28, height: 28}}) : null}
        </div>
        <div className="ccc-hd-info">
          <div className="ccc-hd-title"><em>{module.name}</em> intelligence</div>
          <div className="ccc-hd-sub">
            {GROUP_LABELS[module.group]} · {module.metric} {module.unit} · confidence {module.confidence}
          </div>
        </div>
        <div className="ccc-hd-actions">
          {module.anomaly && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px',
              fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em',
              color: 'var(--warn)', background: 'rgba(255,177,75,0.08)',
              border: '1px solid rgba(255,177,75,0.3)', borderRadius: 3
            }}>
              <span style={{width: 5, height: 5, borderRadius: '50%', background: 'var(--warn)', boxShadow: '0 0 6px var(--warn)', animation: 'pulse 1.6s infinite'}}/>
              ANOMALY
            </span>
          )}
          <button className="btn sm" onClick={() => pushToast('Refresh queued')}>
            <Icon.Refresh className="icon"/>Refresh
          </button>
          <button className="btn primary sm" onClick={() => pushToast('Ask Demiurge · channel opened')}>
            <Icon.Sparkles className="icon"/>Ask Demiurge
          </button>
        </div>
      </div>

      <div className="ccc-stats">
        {[
          { lbl: 'Current',         v: module.metric, color: module.hue },
          { lbl: 'Period',          v: module.unit,   color: 'var(--text)' },
          { lbl: 'Δ',               v: module.delta,  color: module.deltaDir === 'up' ? 'var(--good)' : 'var(--danger)' },
          { lbl: 'Confidence',      v: `${module.confidence}%`, color: module.confidence > 90 ? 'var(--good)' : 'var(--warn)' },
          { lbl: 'Vs prev',         v: module.vs,     color: 'var(--text-dim)' },
          { lbl: 'Anomaly',         v: module.anomaly ? 'YES' : '—', color: module.anomaly ? 'var(--warn)' : 'var(--text-faint)' },
          { lbl: 'Last refresh',    v: '2m ago',      color: 'var(--text-dim)' },
          { lbl: 'AI status',       v: 'tuned',       color: 'var(--magenta)' },
          { lbl: 'Stream',          v: 'live',        color: 'var(--cyan)' }
        ].map((s, i) => (
          <div key={i} className="ccc-stat">
            <div className="lbl">{s.lbl}</div>
            <div className="val" style={{color: s.color}}>{s.v}</div>
          </div>
        ))}
      </div>

      <div className="ccc-tabs">
        {[
          ['overview',    'Overview'],
          ['breakdown',   'Breakdown'],
          ['attribution', 'Attribution'],
          ['forecast',    'Forecasting'],
          ['ai',          'AI Insights'],
          ['reports',     'Reports'],
          ['logs',        'Logs']
        ].map(([k, l]) => (
          <button key={k} className={`ccc-tab ${tab === k ? 'on' : ''}`} onClick={() => setTab(k)}>{l}</button>
        ))}
        <div style={{flex: 1, borderBottom: '1px solid var(--border)'}}/>
      </div>

      <div className="ccc-body">
        {tab === 'overview'    && <AnalyticsOverviewTab    module={module} onPushToast={pushToast}/>}
        {tab === 'breakdown'   && <AnalyticsBreakdownTab   module={module} onPushToast={pushToast}/>}
        {tab === 'attribution' && <AnalyticsAttributionTab module={module} onPushToast={pushToast}/>}
        {tab === 'forecast'    && <AnalyticsForecastTab    module={module} onPushToast={pushToast}/>}
        {tab === 'ai'          && <AnalyticsAIInsightsTab  module={module} onPushToast={pushToast}/>}
        {tab === 'reports'     && <AnalyticsReportsTab     module={module} onPushToast={pushToast}/>}
        {tab === 'logs'        && <AnalyticsLogsTab        module={module} onPushToast={pushToast}/>}
      </div>

      {toast && (
        <div className="ccc-toast" key={toast.id}>
          <span className="pip" style={{background: 'var(--cyan)', boxShadow: '0 0 6px var(--cyan)'}}/>
          {toast.msg}
        </div>
      )}
    </div>
  );
}

window.AnalyticsIntelligenceCenter = AnalyticsIntelligenceCenter;