// viewbot.info — brand operations dashboard

const { useState: useStateB, useEffect: useEffectB, useMemo: useMemoB, useRef: useRefB } = React;

// ───── seed: brand roster (mock) ─────
const BRAND_ROSTER = [
  { handle: 'case-051',  plat: 'twitch', cat: 'VALORANT',         spend: 48000, score: 87, delta: '+3', trend: 'up' },
  { handle: 'case-012',  plat: 'kick',   cat: 'Slots & Casino',   spend: 120000,score: 29, delta: '-22', trend: 'down' },
  { handle: 'case-018',  plat: 'twitch', cat: 'Pools & Hot Tubs', spend: 34000, score: 44, delta: '-9', trend: 'down' },
  { handle: 'case-031',  plat: 'twitch', cat: 'Travel & Outdoors',spend: 22000, score: 91, delta: '+1', trend: 'flat' },
  { handle: 'case-011',  plat: 'twitch', cat: 'Just Chatting',    spend: 28000, score: 56, delta: '-4', trend: 'down' },
  { handle: 'case-016',  plat: 'twitch', cat: 'Fortnite',         spend: 18000, score: 72, delta: '+2', trend: 'up' },
  { handle: 'case-047',  plat: 'twitch', cat: 'Minecraft',        spend: 26000, score: 88, delta: '0', trend: 'flat' },
  { handle: 'case-013',  plat: 'twitch', cat: 'VALORANT',         spend: 14000, score: 35, delta: '-12', trend: 'down' },
];

// ───── seed: alerts (mock) ─────
const BRAND_ALERTS = [
  { t: '04m AGO', lvl: 'err',  who: 'case-012',   cat: 'Slots & Casino',
    body: 'Rigidity score dropped to <span class="accent red">29</span>. Three of last four streams held within a 2.1% CCV band across game changes.',
    sub: 'flight: TIER1_NA_Q2 · spend $120,000 · 6 of 8 deliverables pending' },
  { t: '18m AGO', lvl: 'warn', who: 'case-018',   cat: 'Pools & Hot Tubs',
    body: 'Engagement coupling broke for the first time in 30 days. Chat velocity flatlined while CCV climbed <span class="accent yellow">+38%</span>.',
    sub: 'flight: SUMMER_DROP · spend $34,000 · 2nd-pass review queued' },
  { t: '42m AGO', lvl: 'warn', who: 'case-011',   cat: 'Just Chatting',
    body: 'Historical deviation +<span class="accent yellow">3.2σ</span> on this category at this hour. Possible promotion — confirm.',
    sub: 'flight: TIER2_GLOBAL · spend $28,000' },
  { t: '01h AGO', lvl: 'ok',   who: 'case-051',   cat: 'VALORANT',
    body: 'Tournament window passed. Audience expanded with category surge — peer correlation <span class="accent red" style="color:var(--green)">0.74</span>.',
    sub: 'flight: TIER1_NA_Q2 · all signals nominal · cleared' },
  { t: '02h AGO', lvl: 'err',  who: 'case-013',   cat: 'VALORANT',
    body: 'Score crossed kill-threshold of <span class="accent red">40</span> mid-flight. Recommend pause and re-audit.',
    sub: 'flight: TIER3_LATAM · spend $14,000 · 4 days remaining' },
];

// ───── seed: vetted directory (mock) ─────
const VETTED_DIRECTORY = [
  { handle: 'case-051',  plat: 'twitch', cat: 'VALORANT',         ccv: 1840, eng: 18.2, score: 87, badge: 'VERIFIED' },
  { handle: 'case-031',  plat: 'twitch', cat: 'Travel & Outdoors',ccv: 740,  eng: 22.4, score: 91, badge: 'VERIFIED' },
  { handle: 'case-047',  plat: 'twitch', cat: 'Minecraft',        ccv: 2210, eng: 16.8, score: 88, badge: 'VERIFIED' },
  { handle: 'case-032',  plat: 'twitch', cat: 'Art',              ccv: 580,  eng: 28.4, score: 92, badge: 'VERIFIED' },
  { handle: 'case-045',  plat: 'twitch', cat: 'Music',            ccv: 1340, eng: 19.6, score: 86, badge: 'VERIFIED' },
  { handle: 'case-040',  plat: 'twitch', cat: 'Just Chatting',    ccv: 920,  eng: 24.1, score: 89, badge: 'VERIFIED' },
];

// ───── post-campaign audit pre-baked (mock) ─────
const AUDIT_RESULTS = {
  case_a: {
    handle: 'case-012', plat: 'kick', cat: 'Slots & Casino',
    flightName: 'TIER1_NA_Q2_A',
    flightStart: '2026-03-01',
    flightEnd:   '2026-04-30',
    spend: 120000,
    cpm: 18,
    contractedCCV: 4500,
    streams: 26,
    findings: {
      syntheticPct: 71,
      paidImpressions: 4_820_000,
      syntheticImpressions: 3_422_200,
      recoverable: 84200,
      confidence: 0.96,
    },
    streamRows: [
      { idx: 'S01', date: '2026-03-02', title: 'Slots & Roll • Friday',   ccv: 5010, syn: 78, paid: 920, refund: 4280 },
      { idx: 'S02', date: '2026-03-05', title: 'Late Night Pulls',         ccv: 4980, syn: 74, paid: 880, refund: 4040 },
      { idx: 'S04', date: '2026-03-12', title: 'Sponsor Hour x4',          ccv: 5060, syn: 81, paid: 1200, refund: 5680 },
      { idx: 'S07', date: '2026-03-19', title: '3am Test Stream',          ccv: 4940, syn: 92, paid: 410, refund: 2900 },
      { idx: 'S11', date: '2026-03-28', title: 'Just Chatting Detour',     ccv: 5025, syn: 76, paid: 760, refund: 3640 },
      { idx: 'S14', date: '2026-04-04', title: 'Slots Marathon',           ccv: 5042, syn: 73, paid: 1480, refund: 6720 },
      { idx: 'S18', date: '2026-04-14', title: 'Sponsor Hour x6',          ccv: 5061, syn: 79, paid: 1320, refund: 6020 },
      { idx: 'S22', date: '2026-04-22', title: 'Friday Slot Wars',         ccv: 5018, syn: 68, paid: 1140, refund: 4380 },
    ],
  },
  case_b: {
    handle: 'case-018', plat: 'twitch', cat: 'Pools & Hot Tubs',
    flightName: 'SUMMER_DROP_B',
    flightStart: '2026-04-15',
    flightEnd:   '2026-05-15',
    spend: 34000,
    cpm: 16,
    contractedCCV: 2200,
    streams: 14,
    findings: {
      syntheticPct: 38,
      paidImpressions: 2_125_000,
      syntheticImpressions: 807_500,
      recoverable: 12920,
      confidence: 0.82,
    },
    streamRows: [
      { idx: 'S01', date: '2026-04-16', title: 'Pool Day Stream',          ccv: 2310, syn: 32, paid: 740,  refund: 1480 },
      { idx: 'S03', date: '2026-04-20', title: 'IRL Day Trip',             ccv: 2480, syn: 41, paid: 880,  refund: 1980 },
      { idx: 'S06', date: '2026-04-26', title: 'Hot Tub Movie Night',      ccv: 2220, syn: 36, paid: 1020, refund: 2040 },
      { idx: 'S09', date: '2026-05-02', title: 'Beach Day',                ccv: 2180, syn: 35, paid: 920,  refund: 1810 },
      { idx: 'S12', date: '2026-05-09', title: 'Sponsor Hour',             ccv: 2290, syn: 44, paid: 880,  refund: 2120 },
      { idx: 'S14', date: '2026-05-13', title: 'IRL Walk + Pool',          ccv: 2240, syn: 39, paid: 760,  refund: 1670 },
    ],
  },
};

// ───── helpers ─────
function ScoreSpark({ trend }) {
  // tiny sparkline reflecting trend
  const points = trend === 'up'
    ? [10, 11, 10, 12, 13, 14, 15, 16]
    : trend === 'down'
      ? [16, 15, 14, 12, 11, 9, 8, 6]
      : [12, 13, 12, 13, 12, 13, 12, 13];
  const W = 80, H = 28;
  const sx = i => (i / (points.length - 1)) * (W - 4) + 2;
  const sy = v => H - 2 - (v / 18) * (H - 4);
  const d = points.map((v, i) => (i===0?'M':'L') + sx(i)+','+sy(v)).join(' ');
  const color = trend === 'up' ? 'var(--green)' : trend === 'down' ? 'var(--red)' : 'var(--text-3)';
  return (
    <span className="spark" style={{ display: 'inline-block', width: W }}>
      <svg viewBox={`0 0 ${W} ${H}`} width={W} height={H}>
        <path d={d} stroke={color} strokeWidth="1.4" fill="none"/>
      </svg>
    </span>
  );
}

function fmt$(n) { return '$' + n.toLocaleString('en-US'); }

// ───── tabs ─────
function BrandTabs({ value, onChange }) {
  const tabs = [
    { id: 'overview',  label: 'OVERVIEW' },
    { id: 'roster',    label: 'ACTIVE ROSTER' },
    { id: 'audit',     label: 'POST-CAMPAIGN AUDIT' },
    { id: 'directory', label: 'VETTED DIRECTORY' },
    { id: 'bulk',      label: 'BULK SCREEN' },
  ];
  return (
    <div className="brand-tabs">
      {tabs.map(t => (
        <button key={t.id} className={value === t.id ? 'active' : ''} onClick={() => onChange(t.id)}>
          {t.label}
        </button>
      ))}
    </div>
  );
}

// ───── OVERVIEW ─────
function BrandOverview({ onPickStreamer, onTab }) {
  return (
    <>
      <div className="brand-stats">
        <div className="brand-stat purple">
          <span className="label">ACTIVE FLIGHTS</span>
          <span className="num numfont">14</span>
          <span className="delta">$612,000 IN-MARKET</span>
        </div>
        <div className="brand-stat">
          <span className="label">MONITORED CREATORS</span>
          <span className="num numfont">28</span>
          <span className="delta">3 NEW THIS WEEK</span>
        </div>
        <div className="brand-stat red">
          <span className="label">$ AT RISK · TODAY</span>
          <span className="num numfont">$162,000</span>
          <span className="delta" style={{ color: 'var(--red)' }}>3 ROSTER CHANNELS FAILING</span>
        </div>
        <div className="brand-stat green">
          <span className="label">RECOVERED · YTD</span>
          <span className="num numfont">$284,500</span>
          <span className="delta" style={{ color: 'var(--green)' }}>9 SUCCESSFUL CLAIMS</span>
        </div>
      </div>

      <div className="brands-dash">
        {/* roster preview */}
        <div className="card">
          <div className="card-head">
            <span className="card-title"><span className="dot"></span>ACTIVE_ROSTER / LIVE</span>
            <button className="btn" onClick={() => onTab('roster')} style={{ height: 28, padding: '0 10px', fontSize: 10.5 }}>
              VIEW ALL 28 →
            </button>
          </div>
          <BrandRosterRows rows={BRAND_ROSTER.slice(0, 5)} onPickStreamer={onPickStreamer}/>
          <div className="card-foot">
            <span>SORTED · LARGEST $ AT RISK</span>
            <span>RE-SCORE EVERY 30s · MODEL v3.2.1</span>
          </div>
        </div>

        {/* alerts feed */}
        <div className="card">
          <div className="card-head">
            <span className="card-title"><span className="dot red"></span>WATCHLIST_ALERTS / TODAY</span>
            <span className="chip">5 NEW · 12 OPEN</span>
          </div>
          <div className="alerts-feed">
            {BRAND_ALERTS.map((a, i) => (
              <div className={'alert ' + a.lvl} key={i} onClick={() => onPickStreamer({
                user: a.who, plat: a.who === 'case-012' ? 'kick' : 'twitch',
                cat: a.cat, viewers: 5000, eng: 3.1, score: a.lvl === 'err' ? 22 : a.lvl === 'warn' ? 48 : 80
              })}>
                <span className="pip"/>
                <div className="body">
                  <span className="strong">{a.who}</span> · <span className="muted-2">{a.cat}</span>
                  <span style={{ display: 'block', marginTop: 6 }} dangerouslySetInnerHTML={{ __html: a.body }}/>
                  <span className="sub">{a.sub}</span>
                </div>
                <span className="t">{a.t}</span>
              </div>
            ))}
          </div>
          <div className="card-foot">
            <span>ALERTS WEBHOOK · slack:#sponsorship-ops</span>
            <span>RULES · 7 ACTIVE</span>
          </div>
        </div>
      </div>

      {/* post-campaign audit teaser */}
      <div className="card" style={{ marginTop: 18 }}>
        <div className="card-head">
          <span className="card-title"><span className="dot purple"></span>POST-CAMPAIGN AUDIT / NEW</span>
          <button className="btn purple" onClick={() => onTab('audit')} style={{ height: 28, padding: '0 12px', fontSize: 10.5 }}>
            OPEN TOOL →
          </button>
        </div>
        <div className="promo-grid" style={{ padding: '20px 24px 22px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <div>
            <h4 style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em' }}>
              Already paid them? <span style={{ color: 'var(--purple)' }}>Get it back.</span>
            </h4>
            <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginTop: 10, maxWidth: 720 }}>
              Load any past creator's handle and contract window. We retroactively re-run the eight-score model on their stats from that period, isolate the synthetic impressions you paid for, and produce a defensible evidence package — ready to attach to a chargeback, a recovery claim, or a lawyer's letter.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end', minWidth: 220 }}>
            <span className="chip" style={{ color: 'var(--green)' }}>9 CLAIMS RECOVERED · YTD</span>
            <span className="chip" style={{ color: 'var(--green)' }}>$284,500 RETURNED · AVG 71% OF ASK</span>
            <span className="chip">DEFENSIBLE EVIDENCE PACK · PDF + JSON + RAW CSV</span>
          </div>
        </div>
      </div>
    </>
  );
}

// ───── ROSTER (table rows component) ─────
function BrandRosterRows({ rows, onPickStreamer }) {
  return (
    <div>
      <div className="roster-row head">
        <span></span>
        <span>CREATOR</span>
        <span>SPEND</span>
        <span>30D TREND</span>
        <span style={{ textAlign: 'right' }}>SCORE</span>
        <span style={{ textAlign: 'right' }}>Δ 7D</span>
        <span style={{ textAlign: 'right' }}>STATUS</span>
      </div>
      {rows.map(r => {
        const cls = r.score < 35 ? 'red' : r.score < 65 ? 'yellow' : 'green';
        return (
          <div className="roster-row" key={r.handle} onClick={() => onPickStreamer({
            user: r.handle, plat: r.plat, cat: r.cat, viewers: 4200, eng: r.score / 14, score: r.score
          })}>
            <Avatar name={r.handle} palette={avatarColor(r.handle.length * 3)} size={28} ringStatus={cls === 'red' ? 'botted' : cls === 'yellow' ? 'review' : 'legit'}/>
            <div>
              <div className="nm">{r.handle}</div>
              <div className="meta"><Plat p={r.plat} size={10}/> &nbsp;{r.cat}</div>
            </div>
            <div className="spend" style={{ textAlign: 'left' }}>{fmt$(r.spend)}</div>
            <ScoreSpark trend={r.trend}/>
            <div className="score-pill" style={{ justifyContent: 'flex-end' }}>
              <span className={'v ' + cls}>{r.score}</span>
            </div>
            <span className={'delta ' + (r.trend === 'up' ? 'up' : r.trend === 'down' ? 'down' : 'flat')}
                  style={{ justifyContent: 'flex-end', display: 'inline-flex' }}>
              {r.delta === '0' ? '—' : r.delta}
            </span>
            <div style={{ textAlign: 'right' }}>
              <RiskPill score={r.score}/>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function BrandRoster({ onPickStreamer }) {
  return (
    <div className="card">
      <div className="card-head">
        <span className="card-title"><span className="dot"></span>ACTIVE_ROSTER / 28 CREATORS · $612,000 IN-MARKET</span>
        <span className="chip">RE-SCORED 30s AGO</span>
      </div>
      <BrandRosterRows rows={BRAND_ROSTER} onPickStreamer={onPickStreamer}/>
      <div className="card-foot">
        <span>3 FAILING · 2 WATCH · 23 NOMINAL</span>
        <span>EXPORT CSV · CONFIGURE ALERTS · ADD CREATOR</span>
      </div>
    </div>
  );
}

// ───── VETTED DIRECTORY ─────
function BrandDirectory({ onPickStreamer }) {
  return (
    <>
      <div className="row-between" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <span className="label">FILTER:</span>
        <div className="seg purple">
          <button className="active">ALL CATEGORIES</button>
          <button>GAMING</button>
          <button>JUST CHATTING</button>
          <button>IRL</button>
          <button>MUSIC</button>
        </div>
        <span className="muted-3" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          46 VERIFIED · ALL AUDITED ≤ 7 DAYS AGO
        </span>
      </div>
      <div className="dir-grid">
        {VETTED_DIRECTORY.map(d => (
          <div className="dir-card" key={d.handle} onClick={() => onPickStreamer({
            user: d.handle, plat: d.plat, cat: d.cat, viewers: d.ccv, eng: d.eng, score: d.score
          })}>
            <div className="head">
              <Avatar name={d.handle} palette={avatarColor(d.handle.length * 3)} size={36} ringStatus="legit"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="nm">{d.handle}</div>
                <div className="sub"><Plat p={d.plat} size={11}/> &nbsp;{d.cat}</div>
              </div>
              <span className="badge legit">✓ VERIFIED</span>
            </div>
            <div className="stats">
              <div className="stat"><span className="k">MEDIAN CCV</span><span className="v">{fmt(d.ccv)}</span></div>
              <div className="stat"><span className="k">ENG%</span><span className="v green">{d.eng}%</span></div>
              <div className="stat"><span className="k">HEALTH SCORE</span><span className="v green">{d.score}</span></div>
              <div className="stat"><span className="k">LAST AUDIT</span><span className="v">2d AGO</span></div>
            </div>
            <div className="tags">
              <span className="chip">brand-safe</span>
              <span className="chip">no slots</span>
              <span className="chip">eng &gt; 15%</span>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ───── POST-CAMPAIGN AUDIT ─────
function PostCampaignAudit({ onPickStreamer }) {
  const [handle, setHandle] = useStateB('');
  const [plat, setPlat] = useStateB('kick');
  const [start, setStart] = useStateB('2026-03-01');
  const [end, setEnd]     = useStateB('2026-04-30');
  const [spend, setSpend] = useStateB('120000');
  const [result, setResult] = useStateB(null);
  const [running, setRunning] = useStateB(false);

  const runAudit = (preset) => {
    setRunning(true);
    setResult(null);
    const sample = preset || (handle.toLowerCase().includes('018') || handle.toLowerCase().includes('b') ? AUDIT_RESULTS.case_b : AUDIT_RESULTS.case_a);
    if (!preset) {
      // populate with example so empty form still produces useful demo
      setHandle(sample.handle);
      setPlat(sample.plat);
      setStart(sample.flightStart);
      setEnd(sample.flightEnd);
      setSpend(String(sample.spend));
    }
    setTimeout(() => { setResult(sample); setRunning(false); }, 700);
  };

  return (
    <div className="audit-grid">
      {/* form */}
      <div className="card audit-form">
        <div className="card-head" style={{ padding: 0, paddingBottom: 12, borderBottom: 'none' }}>
          <span className="card-title"><span className="dot purple"></span>BUILD_FRAUD_CLAIM</span>
          <span className="card-aux">v3.2.1 RETRO</span>
        </div>

        <div className="field-block">
          <label>CREATOR HANDLE</label>
          <input value={handle} placeholder="e.g. case-012" onChange={e => setHandle(e.target.value)}/>
        </div>

        <div className="field-block">
          <label>PLATFORM</label>
          <div className="seg" style={{ width: '100%' }}>
            {['twitch','kick','rumble'].map(p => (
              <button key={p} className={plat === p ? 'active' : ''} onClick={() => setPlat(p)}
                style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <Plat p={p} size={11}/> {p.toUpperCase()}
              </button>
            ))}
          </div>
        </div>

        <div className="row2">
          <div className="field-block">
            <label>FLIGHT START</label>
            <input type="text" value={start} onChange={e => setStart(e.target.value)}/>
          </div>
          <div className="field-block">
            <label>FLIGHT END</label>
            <input type="text" value={end} onChange={e => setEnd(e.target.value)}/>
          </div>
        </div>

        <div className="row2">
          <div className="field-block">
            <label>SPEND (USD)</label>
            <input value={spend} onChange={e => setSpend(e.target.value)} placeholder="120000"/>
          </div>
          <div className="field-block">
            <label>CONTRACTED CCV</label>
            <input placeholder="4,500" defaultValue="4500"/>
          </div>
        </div>

        <button className="btn solid purple" style={{ width: '100%', height: 40 }} onClick={() => runAudit()}>
          {running ? 'RUNNING RETRO-SCAN…' : '▸ RUN RETRO-AUDIT'}
        </button>

        <div className="muted-3" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', lineHeight: 1.55 }}>
          ※ Our model holds 18 months of historical stream-level telemetry for ~38,000 channels across Twitch, Kick, and Rumble. Older deals require uploading the platform's own reporting CSVs.
        </div>

        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 14 }}>
          <span className="label" style={{ display: 'block', marginBottom: 8 }}>OR TRY A SAMPLE CASE</span>
          <button className="sample-btn fail" style={{ width: '100%' }} onClick={() => runAudit(AUDIT_RESULTS.case_a)}>
            <span className="nm">▸ case-012 · slots & casino · kick</span>
            <span className="ds">$120,000 flight · 71% synthetic · $84,200 recoverable</span>
          </button>
          <button className="sample-btn" style={{ width: '100%', marginTop: 8 }} onClick={() => runAudit(AUDIT_RESULTS.case_b)}>
            <span className="nm">▸ case-018 · pools & hot tubs · twitch</span>
            <span className="ds">$34,000 flight · 38% synthetic · $12,920 recoverable</span>
          </button>
        </div>
      </div>

      {/* result */}
      <div className="card audit-report">
        {!result ? (
          <>
            <div className="card-head">
              <span className="card-title"><span className="dot purple"></span>RETRO_AUDIT.REPORT</span>
              <span className="card-aux">AWAITING INPUT</span>
            </div>
            <div className="audit-empty">
              <div className="glyph">⌖</div>
              <span className="card-title" style={{ color: 'var(--text-2)' }}>No audit running</span>
              <span className="label">Fill in a creator + flight window · or pick a sample case</span>
            </div>
          </>
        ) : (
          <>
            <div className="card-head">
              <span className="card-title"><span className="dot red"></span>RETRO_AUDIT.REPORT / {result.flightName}</span>
              <span className="chip">CONF · {(result.findings.confidence*100).toFixed(0)}%</span>
            </div>

            <div className="head">
              <div>
                <span className="label" style={{ color: 'var(--red)' }}>
                  ! FRAUD FOUND · {result.findings.syntheticPct}% SYNTHETIC IMPRESSIONS
                </span>
                <h4>{result.handle}</h4>
                <div className="who">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    <Plat p={result.plat} size={12}/> {result.plat}.com / {result.handle}
                  </span>
                  <span>· {result.cat}</span>
                  <span>· flight {result.flightStart} → {result.flightEnd}</span>
                  <span>· {result.streams} streams audited</span>
                </div>
              </div>
              <div className="recover">
                <span className="lbl">RECOVERABLE</span>
                <span className="v">{fmt$(result.findings.recoverable)}</span>
                <span className="sub">of {fmt$(result.spend)} spent · {Math.round(result.findings.recoverable / result.spend * 100)}%</span>
              </div>
            </div>

            <div className="audit-summary">
              <div className="cell">
                <span className="lbl">PAID IMPRESSIONS</span>
                <span className="v">{(result.findings.paidImpressions/1_000_000).toFixed(2)}M</span>
                <span className="sub">across {result.streams} streams</span>
              </div>
              <div className="cell">
                <span className="lbl">SYNTHETIC</span>
                <span className="v red">{(result.findings.syntheticImpressions/1_000_000).toFixed(2)}M</span>
                <span className="sub">{result.findings.syntheticPct}% of paid</span>
              </div>
              <div className="cell">
                <span className="lbl">EFFECTIVE CPM</span>
                <span className="v">${(result.spend / (result.findings.paidImpressions - result.findings.syntheticImpressions) * 1000).toFixed(2)}</span>
                <span className="sub">contracted ${result.cpm.toFixed(2)}</span>
              </div>
              <div className="cell">
                <span className="lbl">RIGIDITY · MEDIAN</span>
                <span className="v red">12</span>
                <span className="sub">σ² = 0.004</span>
              </div>
            </div>

            <div className="audit-streams">
              <div className="head">
                <span className="card-title"><span className="dot red"></span>PER-STREAM EVIDENCE</span>
                <span className="chip">SAMPLE · TOP 8 OF {result.streams}</span>
              </div>
              <div className="row head-row">
                <span>STREAM</span>
                <span>TITLE</span>
                <span className="num">DATE</span>
                <span className="num">CCV</span>
                <span className="num">SYN %</span>
                <span className="num">REFUND $</span>
              </div>
              {result.streamRows.map(s => (
                <div className="row" key={s.idx}>
                  <span>{s.idx}</span>
                  <span className="title">{s.title}</span>
                  <span className="num date">{s.date}</span>
                  <span className="num">{fmt(s.ccv)}</span>
                  <span className="num red">{s.syn}%</span>
                  <span className="num red">${s.refund.toLocaleString()}</span>
                </div>
              ))}
            </div>

            <div className="evidence-pack">
              <div className="copy">
                <span className="strong">Evidence package ready.</span> Includes per-stream CCV / chatter / msg-rate samples,
                model output for all eight scores per stream, peer-cohort comparison data, and a written summary
                suitable for attaching to a chargeback or counsel's demand letter.
                <span style={{ display: 'block', marginTop: 6, color: 'var(--text-3)' }}>
                  9 of 12 prior claims using this format have been resolved in favor of the brand. Average return: 71% of ask.
                </span>
              </div>
              <div className="actions">
                <button className="btn">EXPORT JSON</button>
                <button className="btn">DOWNLOAD CSVs</button>
                <button className="btn solid purple">▸ GENERATE CLAIM PDF</button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ───── BULK SCREEN ─────
function BulkScreen() {
  return (
    <div className="brands-dash">
      <div className="card bulk-card">
        <div className="card-head" style={{ padding: 0, paddingBottom: 12, borderBottom: 'none' }}>
          <span className="card-title"><span className="dot purple"></span>BULK_SCREEN.UPLOAD</span>
          <span className="card-aux">UP TO 500 HANDLES</span>
        </div>
        <div className="bulk-dropzone">
          <span className="t">Drop a CSV of creator handles</span>
          <span className="s">columns required: handle, platform · optional: spend, category</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn" style={{ flex: 1 }}>PASTE LIST</button>
          <button className="btn purple" style={{ flex: 1 }}>UPLOAD CSV</button>
        </div>
        <div className="muted-3" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', lineHeight: 1.55 }}>
          ※ Returns a screening table with current score, last-30-day trend, and a verdict per row. Average turnaround: 4 minutes for 500 handles. CSV + JSON export.
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <span className="card-title"><span className="dot"></span>RECENT_SCREENINGS</span>
          <span className="chip">12 IN LAST 30 DAYS</span>
        </div>
        <div style={{ padding: 8 }}>
          {[
            { name: 'Q2_INFLUENCER_LIST_v3', count: 240, fail: 38, time: '14h ago' },
            { name: 'AGENCY_BLINK_KICK_ROSTER', count: 86, fail: 22, time: '2d ago' },
            { name: 'SUMMER_PARTNERS_FINAL', count: 124, fail: 11, time: '4d ago' },
            { name: 'TIER1_EUR_CSGO',         count: 60, fail:  4, time: '1w ago' },
          ].map(s => (
            <div key={s.name} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, padding: '12px 12px', borderBottom: '1px solid var(--border)', alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 12.5 }}>
              <div>
                <div style={{ color: 'var(--text)' }}>{s.name}</div>
                <div style={{ color: 'var(--text-3)', fontSize: 11, marginTop: 4 }}>
                  {s.count} handles · {s.time}
                </div>
              </div>
              <span className="chip" style={{ color: 'var(--red)' }}>{s.fail} FAIL</span>
              <button className="btn" style={{ height: 26, padding: '0 10px', fontSize: 10.5 }}>VIEW</button>
            </div>
          ))}
        </div>
        <div className="card-foot">
          <span>RETAINED · 90 DAYS</span>
          <span>EXPORT · INTEGRATIONS · NOTION · AIRTABLE · SLACK</span>
        </div>
      </div>
    </div>
  );
}

// ───── MAIN ─────
function ForBrands({ onPickStreamer }) {
  const [tab, setTab] = useStateB('overview');

  return (
    <section className="section" id="brands">
      <div className="section-inner">
        <div className="section-head">
          <span className="eyebrow purple">FOR BRANDS · OPERATIONS DASHBOARD</span>
          <h2>
            Vet before. Monitor during. <span className="purple">Recover after.</span>
          </h2>
          <p>
            The same eight-score model — wired into your sponsorship pipeline. Pre-screen rosters before signing, watch every creator mid-flight, and retroactively build defensible fraud claims against deals that turned out to be inflated.
          </p>
        </div>

        <BrandTabs value={tab} onChange={setTab}/>

        {tab === 'overview'  && <BrandOverview onPickStreamer={onPickStreamer} onTab={setTab}/>}
        {tab === 'roster'    && <BrandRoster onPickStreamer={onPickStreamer}/>}
        {tab === 'audit'     && <PostCampaignAudit onPickStreamer={onPickStreamer}/>}
        {tab === 'directory' && <BrandDirectory onPickStreamer={onPickStreamer}/>}
        {tab === 'bulk'      && <BulkScreen/>}

        {/* CTA strip below */}
        <div className="brands-cta" style={{ marginTop: 24, padding: '28px 32px' }}>
          <div>
            <span className="eyebrow purple">PRICING</span>
            <h3 style={{ fontSize: 28 }}>
              $4,800 / month per brand seat.<br/>
              <span className="dim">First recovered claim covers a year.</span>
            </h3>
          </div>
          <div className="brands-actions">
            <div className="row">
              <input placeholder="work email · @your-brand.com"/>
              <button className="btn solid purple">REQUEST ACCESS</button>
            </div>
            <div className="brands-meta">
              <span>UNLIMITED RETRO-AUDITS</span>
              <span>500 BULK / MO</span>
              <span>API + SLACK ALERTS</span>
              <span>DEFENSIBLE PDF REPORTS</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ForBrands });