// screens-admin-sections.jsx — Real workspaces for Overview, Content, Commerce,
// Video, Sponsors, Fans·CRM, Settings. Each one is dense, tenant-aware, and clickable.

// ─── OVERVIEW ────────────────────────────────────────
function OverviewWorkspace({ T, accent, fontMono, pendingTenant }) {
  const data = _analyticsFor(pendingTenant.id);
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
          Overview &middot; {pendingTenant.short}
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          Today's snapshot &middot; everything that needs your attention.
        </div>
      </div>

      {/* Top status row */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        {data.kpis.map((k, i) => (
          <KpiCard key={i} T={T} accent={accent} fontMono={fontMono} {...k} sparkline={i % 2 === 0 ? data.dauSeries : data.revSeries} />
        ))}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, marginBottom: 14,
      }}>
        {/* Action queue */}
        <Card T={T} title="Needs your attention" sub="Open items across the platform">
          {[
            { sev: 'high',   icon: '!', title: 'Sponsor takeover · Mylan',  sub: 'Awaiting copy approval — kicks off Saturday', tag: 'Approve' },
            { sev: 'med',    icon: '↑', title: 'Merch low-stock · 8 SKUs',  sub: 'Game-day tee size L below reorder point',     tag: 'Reorder' },
            { sev: 'med',    icon: '$', title: 'Refund queue · 12 tickets', sub: 'Auto-issued tomorrow if not actioned',         tag: 'Review' },
            { sev: 'low',    icon: '✓', title: 'Branding draft · Utah',     sub: 'Crimson tier copy ready for publish',          tag: 'Publish' },
            { sev: 'low',    icon: '◇', title: 'New athlete onboarding',    sub: 'Briscoe — NIL agreement signed',                tag: 'View' },
          ].map((row, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 0',
              borderTop: `1px solid ${T.borderSoft}`,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 11,
                background: row.sev === 'high' ? 'rgba(220,38,38,0.12)'
                          : row.sev === 'med'  ? 'rgba(245,158,11,0.12)'
                          : 'rgba(34,197,94,0.12)',
                color:      row.sev === 'high' ? '#DC2626'
                          : row.sev === 'med'  ? '#D97706'
                          : '#1A8A4E',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, flexShrink: 0,
              }}>{row.icon}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: T.text, fontWeight: 500 }}>{row.title}</div>
                <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 1 }}>{row.sub}</div>
              </div>
              <button style={{
                padding: '4px 9px', borderRadius: 4,
                background: T.activeBg, border: `1px solid ${T.border}`,
                color: T.text, fontSize: 11, fontWeight: 600,
                cursor: 'pointer', fontFamily: 'inherit',
              }}>{row.tag}</button>
            </div>
          ))}
        </Card>

        <Card T={T} title="Top sports today" sub="Live engagement">
          <SportBars data={data.sports.slice(0, 5)} accent={accent} T={T} fontMono={fontMono} />
        </Card>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, marginBottom: 14,
      }}>
        <Card T={T} title="Daily active fans" sub="Past 30 days">
          <AreaChart series={data.dauSeries} compare={true} accent={accent} T={T} fontMono={fontMono} />
        </Card>
        <Card T={T} title="Revenue mix" sub="Last 30 days">
          <Donut data={data.revenueMix} T={T} fontMono={fontMono} />
        </Card>
      </div>

      <Card T={T} title="Live now" sub="Right this moment">
        <LiveNowGrid T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

function LiveNowGrid({ T, accent, fontMono, pendingTenant }) {
  const cells = [
    { label: 'Concurrent users',    value: '4,812',  delta: '+18%', sub: 'in app right now' },
    { label: 'Active video streams',value: '1,406',  delta: '+24%', sub: 'across 4 feeds' },
    { label: 'Carts open',          value: '218',    delta: '+12%', sub: 'last 5 min' },
    { label: 'Game-day check-ins',  value: '12,400', delta: 'live', sub: 'arriving fans' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
      marginTop: -4,
    }}>
      {cells.map((c, i) => (
        <div key={i} style={{
          padding: '12px 14px',
          borderRight: i < cells.length - 1 ? `1px solid ${T.borderSoft}` : 'none',
        }}>
          <div style={{ fontSize: 11, color: T.textDim, marginBottom: 4 }}>{c.label}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
            <div style={{
              fontSize: 20, fontWeight: 700, color: T.text,
              fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
            }}>{c.value}</div>
            <div style={{ fontSize: 10, fontWeight: 600, color: '#1A8A4E', fontFamily: fontMono }}>
              {c.delta === 'live' ? <span style={{ color: '#DC2626' }}>● LIVE</span> : c.delta}
            </div>
          </div>
          <div style={{ fontSize: 10.5, color: T.textFaint }}>{c.sub}</div>
        </div>
      ))}
    </div>
  );
}

// ─── CONTENT ─────────────────────────────────────────
function ContentWorkspace({ T, accent, fontMono, pendingTenant }) {
  const [tab, setTab] = React.useState('articles');
  const articles = [
    { title: 'Inside Briscoe\u2019s breakout: tape & coaches', author: 'Maddox J.',  status: 'live',     views: '14.2k', when: '2h ago' },
    { title: `${pendingTenant.short} vs Cincinnati: 4 keys`,   author: 'Rae T.',     status: 'live',     views: '9.8k',  when: '5h ago' },
    { title: 'Gymnastics season opens with #6 ranking',         author: 'Kelly P.',   status: 'live',     views: '6.4k',  when: '1d ago' },
    { title: 'How the Mountaineer Marching Band rebuilt',       author: 'Maddox J.',  status: 'draft',    views: '—',     when: 'edit' },
    { title: 'Behind the scenes: NIL collective Q3',            author: 'Rae T.',     status: 'review',   views: '—',     when: '12m ago' },
    { title: 'Football recruiting class · 2026',                author: 'Sam D.',     status: 'scheduled',views: '—',     when: 'Sat 9am' },
  ];
  const videos = [
    { title: 'All-22 film · Briscoe TD',           dur: '3:42', views: '128k', status: 'live',     when: '4h ago' },
    { title: 'Sideline mic\u2019d up · Coach',      dur: '2:18', views:  '54k', status: 'live',     when: '1d ago' },
    { title: 'Hype reel · Cincinnati week',         dur: '1:02', views:  '88k', status: 'live',     when: '6h ago' },
    { title: 'Press conf · Tuesday',                dur: '14:21',views:   '7k', status: 'live',     when: '2d ago' },
    { title: 'Country Roads · presented by Mylan',  dur: '0:45', views:  '38k', status: 'scheduled',when: 'Sat'   },
  ];
  const list = tab === 'articles' ? articles : videos;
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
            Content &middot; {pendingTenant.short}
          </div>
          <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
            Articles, video, and podcasts going to fans.
          </div>
        </div>
        <button style={{
          padding: '6px 12px', borderRadius: 5,
          background: accent, border: `1px solid ${accent}`,
          color: getContrast(accent), fontSize: 11.5, fontWeight: 700,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>+ New post</button>
      </div>

      {/* Tabs */}
      <div style={{
        display: 'flex', gap: 0, borderBottom: `1px solid ${T.border}`, marginBottom: 14,
      }}>
        {[
          { id: 'articles', label: 'Articles', count: 28 },
          { id: 'video',    label: 'Video',    count: 17 },
          { id: 'podcast',  label: 'Podcast',  count: 6 },
          { id: 'social',   label: 'Social',   count: 142 },
        ].map(t => {
          const active = t.id === tab;
          return (
            <button key={t.id}
              onClick={() => setTab(t.id)}
              style={{
                padding: '10px 14px', border: 'none', background: 'transparent',
                color: active ? T.text : T.textDim,
                borderBottom: `2px solid ${active ? accent : 'transparent'}`,
                fontSize: 12, fontWeight: active ? 600 : 500, cursor: 'pointer',
                fontFamily: 'inherit', marginBottom: -1,
              }}>
              {t.label} <span style={{
                fontSize: 10, color: T.textFaint, fontFamily: fontMono, marginLeft: 4,
              }}>{t.count}</span>
            </button>
          );
        })}
      </div>

      {/* Stats row */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Pieces published" value="184" delta="+12 this wk" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Total views"      value="2.4M" delta="+18.4%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Avg watch time"   value="3m 12s" delta="+4s" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="In review"        value="7"     delta="2 over SLA" down />
      </div>

      <Card T={T} title={tab === 'articles' ? 'Articles' : 'Video'} sub="Click any row to edit">
        <div style={{
          display: 'grid', gridTemplateColumns: tab === 'articles' ? '2.6fr 1fr 0.8fr 0.8fr 0.8fr' : '2.6fr 0.6fr 0.8fr 0.8fr 0.8fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Title</div>
          <div>{tab === 'articles' ? 'Author' : 'Duration'}</div>
          <div>Status</div>
          <div>Views</div>
          <div>Updated</div>
        </div>
        {list.map((row, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: tab === 'articles' ? '2.6fr 1fr 0.8fr 0.8fr 0.8fr' : '2.6fr 0.6fr 0.8fr 0.8fr 0.8fr',
            padding: '11px 0', fontSize: 12, color: T.text,
            borderBottom: i === list.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
            alignItems: 'center', cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                width: 30, height: 22, borderRadius: 3,
                background: tab === 'articles' ? T.chipBg : `linear-gradient(135deg, ${accent}88, ${accent}33)`,
                border: `1px solid ${T.border}`, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontSize: 9,
              }}>{tab === 'articles' ? '' : '▶'}</span>
              <span style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {row.title}
              </span>
            </div>
            <div style={{ color: T.textDim }}>{tab === 'articles' ? row.author : row.dur}</div>
            <div><StatusPill T={T} kind={row.status} /></div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{row.views}</div>
            <div style={{ fontSize: 11, color: T.textDim }}>{row.when}</div>
          </div>
        ))}
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── COMMERCE ────────────────────────────────────────
function CommerceWorkspace({ T, accent, fontMono, pendingTenant }) {
  const data = _analyticsFor(pendingTenant.id);
  const orders = [
    { id: '#10241', who: 'Derek C.',    item: 'Briscoe #7 Jersey · L',    total: '$95.00',  status: 'shipped',  when: '12m ago' },
    { id: '#10240', who: 'Marisol O.',  item: 'Game Day Tee · M',          total: '$38.00',  status: 'paid',     when: '14m ago' },
    { id: '#10239', who: 'Tyler B.',    item: 'Season Ticket Renewal',     total: '$1,240', status: 'paid',     when: '21m ago' },
    { id: '#10238', who: 'Reggie B.',   item: 'Cinci Hoodie · XL',         total: '$72.00',  status: 'paid',     when: '28m ago' },
    { id: '#10237', who: 'Janelle K.',  item: 'NIL Tip · Briscoe',         total: '$25.00',  status: 'paid',     when: '32m ago' },
    { id: '#10236', who: 'Sam D.',      item: 'Single Game · Sec 108',     total: '$110.00', status: 'paid',     when: '41m ago' },
    { id: '#10235', who: 'Quinn R.',    item: 'Concession · Loaded Fries', total: '$14.50',  status: 'fulfilled',when: '47m ago' },
    { id: '#10234', who: 'Asha M.',     item: 'Parking · Lot A',           total: '$30.00',  status: 'paid',     when: '54m ago' },
  ];
  const skus = [
    { sku: `${pendingTenant.short.toUpperCase()}-TEE-G25`, title: 'Game Day Tee · Cincinnati', stock:  142, sold: 1_482, rev: '$56.3k' },
    { sku: `${pendingTenant.short.toUpperCase()}-JER-7`,    title: 'Briscoe #7 Jersey',        stock:   38, sold:   612, rev: '$58.1k' },
    { sku: `${pendingTenant.short.toUpperCase()}-HOOD-W`,   title: 'Wordmark Hoodie',          stock:  220, sold:   908, rev: '$65.4k' },
    { sku: `${pendingTenant.short.toUpperCase()}-CAP-OG`,   title: 'Throwback Cap',            stock:    8, sold:   441, rev: '$15.4k', low: true },
    { sku: `${pendingTenant.short.toUpperCase()}-TEE-W`,    title: 'Wordmark Tee',             stock:  514, sold: 2_104, rev: '$67.3k' },
    { sku: `${pendingTenant.short.toUpperCase()}-FLAG`,     title: 'Stadium Flag',             stock:   62, sold:   188, rev: '$5.6k' },
  ];
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
          Commerce &middot; {pendingTenant.short}
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          Orders, inventory, and revenue in one place.
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="GMV (30d)"      value={'$' + (data.kpis[2].value.replace('$','')).replace(/^/, '')} delta="+8.1%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Orders today"   value="218"      delta="+24%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Avg order"      value="$58.40"   delta="+$3.20" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Refund rate"    value="0.6%"     delta="-0.2pp" />
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, marginBottom: 14,
      }}>
        <Card T={T} title="Daily revenue" sub="Last 30 days · weekend spikes">
          <BarChart series={data.revSeries} accent={accent} T={T} fontMono={fontMono} />
        </Card>
        <Card T={T} title="Revenue mix" sub="Last 30 days">
          <Donut data={data.revenueMix} T={T} fontMono={fontMono} />
        </Card>
      </div>

      <Card T={T} title="Recent orders" sub="Last hour">
        <div style={{
          display: 'grid', gridTemplateColumns: '0.7fr 1fr 1.8fr 0.8fr 0.8fr 0.7fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Order</div><div>Customer</div><div>Item</div><div>Total</div><div>Status</div><div>When</div>
        </div>
        {orders.map((o, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '0.7fr 1fr 1.8fr 0.8fr 0.8fr 0.7fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === orders.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{o.id}</div>
            <div style={{ color: T.text }}>{o.who}</div>
            <div style={{ color: T.text }}>{o.item}</div>
            <div style={{ fontFamily: fontMono, color: T.text, fontWeight: 500 }}>{o.total}</div>
            <div><StatusPill T={T} kind={o.status} /></div>
            <div style={{ fontSize: 11, color: T.textDim }}>{o.when}</div>
          </div>
        ))}
      </Card>

      <div style={{ height: 14 }} />
      <Card T={T} title="Inventory" sub="Top SKUs">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2.4fr 0.8fr 0.8fr 0.8fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>SKU</div><div>Title</div><div>Stock</div><div>Sold</div><div>Revenue</div>
        </div>
        {skus.map((s, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 2.4fr 0.8fr 0.8fr 0.8fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === skus.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11 }}>{s.sku}</div>
            <div style={{ color: T.text, fontWeight: 500 }}>{s.title}</div>
            <div style={{
              fontFamily: fontMono, fontSize: 11.5,
              color: s.low ? '#DC2626' : T.text,
              fontWeight: s.low ? 700 : 400,
            }}>{s.stock}{s.low && ' ⚠'}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{s.sold.toLocaleString()}</div>
            <div style={{ fontFamily: fontMono, color: T.text, fontWeight: 500 }}>{s.rev}</div>
          </div>
        ))}
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── VIDEO ───────────────────────────────────────────
function VideoWorkspace({ T, accent, fontMono, pendingTenant }) {
  const streams = [
    { title: 'Football vs Cincinnati', status: 'live', viewers: '12,402', dur: '02:14:22', cdn: 'CDN-East', health: 'good' },
    { title: 'Pre-game show',          status: 'live', viewers: '4,118',  dur: '01:42:08', cdn: 'CDN-East', health: 'good' },
    { title: 'Sideline cam',           status: 'live', viewers: '2,840',  dur: '02:14:22', cdn: 'CDN-Cent', health: 'warn' },
    { title: 'Marching band feed',     status: 'live', viewers: '988',    dur: '01:32:14', cdn: 'CDN-East', health: 'good' },
    { title: 'Press conf · Coach',     status: 'idle', viewers: '0',      dur: '—',         cdn: '—',        health: 'idle' },
    { title: 'Highlights post-game',   status: 'idle', viewers: '0',      dur: '—',         cdn: '—',        health: 'idle' },
  ];
  const top = [
    { title: 'Briscoe TD · 4Q',           views: '128.4k', avg: '42s',   completion: '78%' },
    { title: 'Coach mic\u2019d up Cinci',  views:  '54.2k', avg: '1m 18s',completion: '64%' },
    { title: 'Hype reel · Cinci week',     views:  '88.0k', avg: '52s',   completion: '71%' },
    { title: 'Tunnel walk',                views:  '38.6k', avg: '28s',   completion: '88%' },
    { title: 'Country Roads · postgame',   views:  '24.1k', avg: '45s',   completion: '69%' },
  ];
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
          Video &middot; {pendingTenant.short}
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          Live streams, encoders, and on-demand library.
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Live streams" value="4"        delta="+1 vs typical" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Concurrent viewers" value="20.3k" delta="+38%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="VOD watch time" value="412 hrs"  delta="+12%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Encoder health" value="3 of 4"  delta="1 warn" down />
      </div>

      <Card T={T} title="Live stream board" sub="All channels right now">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 0.8fr 1fr 1fr 1fr 0.8fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Channel</div><div>Status</div><div>Viewers</div><div>Duration</div><div>CDN</div><div>Health</div>
        </div>
        {streams.map((s, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '2fr 0.8fr 1fr 1fr 1fr 0.8fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === streams.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                width: 32, height: 22, borderRadius: 3,
                background: s.status === 'live' ? `linear-gradient(135deg, ${accent}, ${accent}55)` : T.chipBg,
                border: `1px solid ${T.border}`, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontSize: 9,
              }}>{s.status === 'live' ? '●' : ''}</span>
              <span style={{ color: T.text, fontWeight: 500 }}>{s.title}</span>
            </div>
            <div><StatusPill T={T} kind={s.status} /></div>
            <div style={{ fontFamily: fontMono, color: T.text }}>{s.viewers}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{s.dur}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{s.cdn}</div>
            <div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 600,
                color: s.health === 'good' ? '#1A8A4E' : s.health === 'warn' ? '#D97706' : T.textFaint,
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: 3,
                  background: s.health === 'good' ? '#22C55E' : s.health === 'warn' ? '#F59E0B' : T.textFaint,
                }} />
                {s.health === 'good' ? 'Good' : s.health === 'warn' ? 'Warn' : 'Idle'}
              </span>
            </div>
          </div>
        ))}
      </Card>

      <div style={{ height: 14 }} />
      <Card T={T} title="Top VOD this week" sub="By views">
        <div style={{
          display: 'grid', gridTemplateColumns: '2.4fr 1fr 1fr 1fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Title</div><div>Views</div><div>Avg watch</div><div>Completion</div>
        </div>
        {top.map((v, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '2.4fr 1fr 1fr 1fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === top.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ color: T.text, fontWeight: 500 }}>▶ {v.title}</div>
            <div style={{ fontFamily: fontMono, color: T.text }}>{v.views}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim }}>{v.avg}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim }}>{v.completion}</div>
          </div>
        ))}
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── SPONSORS ────────────────────────────────────────
function SponsorsWorkspace({ T, accent, fontMono, pendingTenant }) {
  const data = _analyticsFor(pendingTenant.id);
  const campaigns = [
    { brand: 'Mylan',          name: 'Mountaineer Saturdays',  reach: '184k', clicks: '12.5k', ctr: '6.8%', spend: '$184k', status: 'live' },
    { brand: 'Coca-Cola',      name: 'Game Day Refresh',       reach: '218k', clicks:  '8.5k', ctr: '3.9%', spend: '$312k', status: 'live' },
    { brand: 'Nike',           name: 'Throwback Drop',         reach: '171k', clicks:  '8.7k', ctr: '5.1%', spend: '$410k', status: 'live' },
    { brand: 'WV Lottery',     name: 'Pick-3 Promo',           reach:  '53k', clicks:  '2.2k', ctr: '4.1%', spend: '$121k', status: 'live' },
    { brand: 'Mountaineer Energy', name: 'Power Saturdays',    reach:  '35k', clicks:  '1.9k', ctr: '5.4%', spend:  '$88k', status: 'live' },
    { brand: 'Sheetz',         name: 'MTO Game Combo',         reach:  '43k', clicks:  '3.1k', ctr: '7.2%', spend:  '$71k', status: 'paused' },
    { brand: 'BlueGold Bank',  name: 'Card-back rewards',      reach:  '12k', clicks:    '480',ctr: '4.0%', spend:  '$22k', status: 'draft' },
  ];
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
            Sponsors &middot; {pendingTenant.short}
          </div>
          <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
            8 active brands, 12 campaigns this month.
          </div>
        </div>
        <button style={{
          padding: '6px 12px', borderRadius: 5,
          background: accent, border: `1px solid ${accent}`,
          color: getContrast(accent), fontSize: 11.5, fontWeight: 700,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>+ New campaign</button>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Sponsor revenue" value="$1.21M" delta="+22.4%" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Active campaigns" value="12"    delta="+3 this wk" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Avg CTR"          value="5.2%"  delta="+0.4pp" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Pending approval" value="3"     delta="2 over SLA" down />
      </div>

      <Card T={T} title="Active campaigns" sub="Click row to drill in">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.8fr 0.8fr 0.6fr 0.8fr 0.8fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Brand</div><div>Campaign</div><div>Reach</div><div>Clicks</div><div>CTR</div><div>Spend</div><div>Status</div>
        </div>
        {campaigns.map((c, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.8fr 0.8fr 0.6fr 0.8fr 0.8fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === campaigns.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{
                width: 22, height: 22, borderRadius: 4,
                background: T.chipBg, border: `1px solid ${T.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, fontWeight: 700, color: T.textDim,
              }}>{c.brand[0]}</span>
              <span style={{ fontWeight: 500, color: T.text }}>{c.brand}</span>
            </div>
            <div style={{ color: T.text }}>{c.name}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{c.reach}</div>
            <div style={{ fontFamily: fontMono, color: T.textDim, fontSize: 11.5 }}>{c.clicks}</div>
            <div style={{ fontFamily: fontMono, color: T.text }}>{c.ctr}</div>
            <div style={{ fontFamily: fontMono, color: T.text, fontWeight: 500 }}>{c.spend}</div>
            <div><StatusPill T={T} kind={c.status} /></div>
          </div>
        ))}
      </Card>

      <div style={{ height: 14 }} />
      <Card T={T} title="Inventory available" sub="Open placements next 30 days">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: -4,
        }}>
          {[
            { slot: 'Home hero',          n: 8,  rate: '$24k/wk' },
            { slot: 'Game-day takeover',  n: 3,  rate: '$48k/game' },
            { slot: 'Pre-roll · video',   n: 32, rate: '$0.04 CPM' },
            { slot: 'Tier-perk co-brand', n: 5,  rate: '$12k/mo' },
          ].map((s, i, a) => (
            <div key={i} style={{
              padding: '12px 14px',
              borderRight: i < a.length - 1 ? `1px solid ${T.borderSoft}` : 'none',
            }}>
              <div style={{ fontSize: 11, color: T.textDim, marginBottom: 4 }}>{s.slot}</div>
              <div style={{
                fontSize: 18, fontWeight: 700, color: T.text,
                fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
              }}>{s.n} <span style={{ fontSize: 11, fontWeight: 500, color: T.textDim }}>open</span></div>
              <div style={{ fontSize: 10.5, color: T.textFaint, fontFamily: fontMono, marginTop: 2 }}>{s.rate}</div>
            </div>
          ))}
        </div>
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── FANS · CRM ──────────────────────────────────────
function FansWorkspace({ T, accent, fontMono, pendingTenant }) {
  const segments = [
    { id: 'season',  label: 'Season ticket holders',     n: 18_400, rev: '$5.4M', avg: '$294' },
    { id: 'lapsed',  label: 'Lapsed (90d)',              n: 12_810, rev: '$0',    avg: '—'    },
    { id: 'students',label: 'Students',                  n: 26_900, rev: '$184k', avg: '$7'   },
    { id: 'whales',  label: 'Top 1% spenders',           n: 1_842,  rev: '$3.1M', avg: '$1,683' },
    { id: 'family',  label: 'Family pack buyers',        n: 8_240,  rev: '$782k', avg: '$95'   },
    { id: 'gold',    label: 'Gold Members',              n: 4_186,  rev: '$1.2M', avg: '$287'  },
  ];
  const fans = [
    { name: 'Derek Conrad',     city: 'Morgantown, WV',   tier: 'Gold',     ltv: '$3,420', last: '12m ago', tags: ['Season', 'Gold', 'NIL Tip'] },
    { name: 'Marisol Ortega',   city: 'Salt Lake, UT',    tier: 'Crimson',  ltv: '$1,884', last: '2h ago',  tags: ['Season', 'Family'] },
    { name: 'Trevon Hayes Sr.', city: 'Columbus, OH',     tier: 'Scarlet',  ltv: '$5,120', last: '5h ago',  tags: ['Whale', 'NIL'] },
    { name: 'Rae Tanaka',       city: 'Pittsburgh, PA',   tier: 'Standard', ltv:   '$284', last: '1d ago',  tags: ['Lapsed'] },
    { name: 'Sam Devlin',       city: 'Charleston, WV',   tier: 'Gold',     ltv: '$2,140', last: '3d ago',  tags: ['Season', 'Merch'] },
    { name: 'Quinn Reilly',     city: 'Wheeling, WV',     tier: 'Standard', ltv:   '$612', last: '6h ago',  tags: ['Student'] },
    { name: 'Janelle Kim',      city: 'Morgantown, WV',   tier: 'Crimson',  ltv: '$1,418', last: '8h ago',  tags: ['Family'] },
    { name: 'Asha Mitchell',    city: 'Cleveland, OH',    tier: 'Gold',     ltv: '$2,820', last: '11h ago', tags: ['Season'] },
  ];
  return (
    <div style={{ padding: '20px 24px', maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
            Fans &middot; CRM
          </div>
          <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
            184k known fans &middot; 6 saved segments &middot; tenant: {pendingTenant.short}
          </div>
        </div>
        <button style={{
          padding: '6px 12px', borderRadius: 5,
          background: 'transparent', border: `1px solid ${T.border}`,
          color: T.text, fontSize: 11.5, fontWeight: 500,
          cursor: 'pointer', fontFamily: 'inherit', marginRight: 8,
        }}>Export segment</button>
        <button style={{
          padding: '6px 12px', borderRadius: 5,
          background: accent, border: `1px solid ${accent}`,
          color: getContrast(accent), fontSize: 11.5, fontWeight: 700,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>+ New segment</button>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14,
      }}>
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Total fans"     value="184,320" delta="+2,184 this wk" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Avg LTV"        value="$284"     delta="+$12" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Email opt-in"   value="78.4%"    delta="+1.2pp" />
        <MiniStat T={T} accent={accent} fontMono={fontMono} label="Push opt-in"    value="64.1%"    delta="+0.8pp" />
      </div>

      <Card T={T} title="Saved segments" sub="Built from real behavior">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
        }}>
          {segments.map(s => (
            <div key={s.id} style={{
              padding: 12, borderRadius: 6,
              border: `1px solid ${T.border}`, background: T.surface2,
              cursor: 'pointer',
            }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: T.text }}>{s.label}</div>
              <div style={{
                fontSize: 16, fontWeight: 700, color: T.text,
                fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
                marginTop: 6,
              }}>{s.n.toLocaleString()}</div>
              <div style={{ display: 'flex', gap: 12, marginTop: 4, fontSize: 10.5, color: T.textFaint, fontFamily: fontMono }}>
                <span>LTV {s.rev}</span><span>Avg {s.avg}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <div style={{ height: 14 }} />
      <Card T={T} title="Recently active fans" sub="Last 24h">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 0.8fr 0.8fr 1.6fr 0.8fr',
          padding: '6px 0', fontSize: 10.5, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
        }}>
          <div>Name</div><div>City</div><div>Tier</div><div>LTV</div><div>Tags</div><div>Last seen</div>
        </div>
        {fans.map((f, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 0.8fr 0.8fr 1.6fr 0.8fr',
            padding: '10px 0', fontSize: 12, alignItems: 'center',
            borderBottom: i === fans.length - 1 ? 'none' : `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{
                width: 24, height: 24, borderRadius: 12,
                background: `linear-gradient(135deg, ${accent}, ${accent}88)`,
                color: 'white', fontSize: 10, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{f.name.split(' ').map(n => n[0]).join('').slice(0,2)}</span>
              <span style={{ color: T.text, fontWeight: 500 }}>{f.name}</span>
            </div>
            <div style={{ color: T.textDim }}>{f.city}</div>
            <div>
              <span style={{
                padding: '2px 7px', borderRadius: 3,
                background: f.tier === 'Standard' ? T.chipBg : `${accent}22`,
                color: f.tier === 'Standard' ? T.textDim : T.text,
                fontSize: 10.5, fontWeight: 600,
              }}>{f.tier}</span>
            </div>
            <div style={{ fontFamily: fontMono, color: T.text, fontWeight: 500 }}>{f.ltv}</div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {f.tags.map((tag, ti) => (
                <span key={ti} style={{
                  fontSize: 9.5, padding: '1px 5px', borderRadius: 3,
                  background: T.chipBg, color: T.textDim, fontFamily: fontMono,
                }}>{tag}</span>
              ))}
            </div>
            <div style={{ fontSize: 11, color: T.textDim }}>{f.last}</div>
          </div>
        ))}
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── SETTINGS ────────────────────────────────────────
function SettingsWorkspace({ T, accent, fontMono, pendingTenant }) {
  return (
    <div style={{ padding: '20px 24px', maxWidth: 920 }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
          Settings
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          Workspace, integrations, billing, and access.
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14,
      }}>
        <Card T={T} title="Workspace" sub="Athletics 360 Operator Console">
          <Field T={T} accent={accent} label="Org name" value="Athletics 360 — Mountaineer Athletics" />
          <Field T={T} accent={accent} label="Workspace ID" value="ath360-wvu-prod-018" />
          <Field T={T} accent={accent} label="Default tenant" value={pendingTenant.short} />
          <Field T={T} accent={accent} label="Time zone" value="America/New_York" />
        </Card>

        <Card T={T} title="Billing" sub="Plan & usage">
          <SettingsRow T={T} label="Plan"  value="Enterprise · Athletics" right={
            <span style={{
              padding: '2px 7px', borderRadius: 3,
              background: `${accent}22`, color: T.text,
              fontSize: 10.5, fontWeight: 600,
            }}>Active</span>
          } />
          <SettingsRow T={T} label="MAU this month" value="184,320 / 250,000" right={<span style={{ fontFamily: fontMono, fontSize: 11, color: T.textDim }}>74%</span>} />
          <SettingsRow T={T} label="Streaming hours" value="412 hrs / 800 hrs" right={<span style={{ fontFamily: fontMono, fontSize: 11, color: T.textDim }}>52%</span>} />
          <SettingsRow T={T} label="Next invoice" value="Dec 1, 2025 · $24,800" right={<a style={{ fontSize: 11, color: accent, fontWeight: 600 }}>View →</a>} />
        </Card>
      </div>

      <Card T={T} title="Integrations" sub="Connected systems">
        {[
          { name: 'Ticketmaster',   sub: 'Box-office sync · live',         status: 'connected', when: 'synced 2m ago' },
          { name: 'Shopify',        sub: 'Merch storefront',               status: 'connected', when: 'synced 8m ago' },
          { name: 'Stripe',         sub: 'Payments · payouts',             status: 'connected', when: 'synced 1m ago' },
          { name: 'Sailthru',       sub: 'Email · push',                   status: 'connected', when: 'synced 4m ago' },
          { name: 'Looker',         sub: 'Analytics export',               status: 'connected', when: 'last run 1h ago' },
          { name: 'NIL Manager',    sub: 'Athlete agreements · payouts',   status: 'connected', when: 'synced 3m ago' },
          { name: 'Snowflake',      sub: 'Data warehouse',                 status: 'pending',   when: 'awaiting key' },
          { name: 'Salesforce CDP', sub: 'Fan profile sync',               status: 'disconnected', when: '—' },
        ].map((row, i, a) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '11px 0',
            borderTop: `1px solid ${T.borderSoft}`,
          }}>
            <span style={{
              width: 32, height: 32, borderRadius: 6,
              background: T.chipBg, border: `1px solid ${T.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 700, color: T.textDim, flexShrink: 0,
            }}>{row.name[0]}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, color: T.text, fontWeight: 500 }}>{row.name}</div>
              <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 1 }}>{row.sub}</div>
            </div>
            <div style={{ fontSize: 11, color: T.textFaint, fontFamily: fontMono }}>{row.when}</div>
            <StatusPill T={T} kind={row.status} />
            <button style={{
              padding: '4px 9px', borderRadius: 4,
              background: 'transparent', border: `1px solid ${T.border}`,
              color: T.text, fontSize: 11, fontWeight: 500,
              cursor: 'pointer', fontFamily: 'inherit',
            }}>Configure</button>
          </div>
        ))}
      </Card>

      <div style={{ height: 14 }} />

      <Card T={T} title="Team & access" sub="People with workspace access">
        {[
          { name: 'Reggie Briscoe',   role: 'Owner',          email: 'reggie@athletics360.com',    last: 'now' },
          { name: 'Sara Kowalski',    role: 'Admin',          email: 'sara@athletics360.com',      last: '5m ago' },
          { name: 'Maddox Jenkins',   role: 'Editor · WVU',   email: 'maddox@wvuathletics.com',    last: '1h ago' },
          { name: 'Rae Tanaka',       role: 'Editor · Utah',  email: 'rae@utahathletics.com',      last: '4h ago' },
          { name: 'Sam Devlin',       role: 'Analyst',        email: 'sam@athletics360.com',       last: '2d ago' },
        ].map((p, i, a) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.6fr 0.8fr 0.6fr',
            padding: '11px 0', fontSize: 12, alignItems: 'center',
            borderTop: `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{
                width: 24, height: 24, borderRadius: 12,
                background: `linear-gradient(135deg, ${accent}, ${accent}88)`,
                color: 'white', fontSize: 10, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{p.name.split(' ').map(n => n[0]).join('')}</span>
              <span style={{ color: T.text, fontWeight: 500 }}>{p.name}</span>
            </div>
            <div style={{ color: T.textDim }}>{p.role}</div>
            <div style={{ fontFamily: fontMono, fontSize: 11, color: T.textDim }}>{p.email}</div>
            <div style={{ fontSize: 11, color: T.textFaint }}>{p.last}</div>
            <div style={{ textAlign: 'right' }}>
              <button style={{
                padding: '3px 8px', borderRadius: 4,
                background: 'transparent', border: `1px solid ${T.border}`,
                color: T.textDim, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
              }}>Edit</button>
            </div>
          </div>
        ))}
      </Card>
      <div style={{ height: 24 }} />
    </div>
  );
}

// ─── Shared bits ─────────────────────────────────────
function MiniStat({ T, accent, fontMono, label, value, delta, down }) {
  return (
    <div style={{
      background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8,
      padding: '12px 14px',
    }}>
      <div style={{ fontSize: 11.5, color: T.textDim, marginBottom: 6 }}>{label}</div>
      <div style={{
        fontSize: 20, fontWeight: 700, color: T.text,
        fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
      }}>{value}</div>
      <div style={{
        fontSize: 11, fontWeight: 600, marginTop: 3,
        color: down ? '#C0392B' : '#1A8A4E',
        fontFamily: fontMono,
      }}>{delta}</div>
    </div>
  );
}

function StatusPill({ T, kind }) {
  const map = {
    live:        { bg: 'rgba(34,197,94,0.12)', fg: '#1A8A4E',  dot: '#22C55E', label: 'Live' },
    connected:   { bg: 'rgba(34,197,94,0.12)', fg: '#1A8A4E',  dot: '#22C55E', label: 'Connected' },
    paid:        { bg: 'rgba(34,197,94,0.12)', fg: '#1A8A4E',  dot: '#22C55E', label: 'Paid' },
    fulfilled:   { bg: 'rgba(34,197,94,0.12)', fg: '#1A8A4E',  dot: '#22C55E', label: 'Fulfilled' },
    shipped:     { bg: 'rgba(99,102,241,0.12)',fg: '#4F46E5', dot: '#6366F1', label: 'Shipped' },
    review:      { bg: 'rgba(245,158,11,0.12)',fg: '#D97706', dot: '#F59E0B', label: 'In review' },
    pending:     { bg: 'rgba(245,158,11,0.12)',fg: '#D97706', dot: '#F59E0B', label: 'Pending' },
    warn:        { bg: 'rgba(245,158,11,0.12)',fg: '#D97706', dot: '#F59E0B', label: 'Warn' },
    scheduled:   { bg: 'rgba(99,102,241,0.12)',fg: '#4F46E5', dot: '#6366F1', label: 'Scheduled' },
    draft:       { bg: T.chipBg,                fg: T.textDim, dot: T.textFaint, label: 'Draft' },
    paused:      { bg: T.chipBg,                fg: T.textDim, dot: T.textFaint, label: 'Paused' },
    idle:        { bg: T.chipBg,                fg: T.textDim, dot: T.textFaint, label: 'Idle' },
    disconnected:{ bg: 'rgba(220,38,38,0.10)',  fg: '#C0392B', dot: '#DC2626', label: 'Off' },
  };
  const s = map[kind] || map.draft;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 7px', borderRadius: 3,
      background: s.bg, color: s.fg,
      fontSize: 10.5, fontWeight: 600,
    }}>
      <span style={{ width: 5, height: 5, borderRadius: 3, background: s.dot }} />
      {s.label}
    </span>
  );
}

function SettingsRow({ T, label, value, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 0',
      borderTop: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{ flex: '0 0 130px', fontSize: 11.5, color: T.textDim }}>{label}</div>
      <div style={{ flex: 1, fontSize: 12, color: T.text, fontWeight: 500 }}>{value}</div>
      {right}
    </div>
  );
}

Object.assign(window, {
  OverviewWorkspace, ContentWorkspace, CommerceWorkspace,
  VideoWorkspace, SponsorsWorkspace, FansWorkspace, SettingsWorkspace,
});