/* global React, window, Icon, PageHead, ScoreBadge, Tag, CHART, MONTHS, SERIES, LIVE_TOPICS, LIVE_OUTLINE, PLAYLIST, QA_ITEMS, QA_CATS, LineChart, ColumnChart, niceNum */
/* ============================================================
   Live Studio — Planner · Playlist · Go Live (16:9 broadcast)
   ============================================================ */
const { useState: useLV, useEffect: useLVe, useRef: useLVr } = React;

// ---- Faux QR code ----
function QR({ size = 120, color = '#1F281F', bg = '#fff' }) {
  const n = 11;
  const cells = [];
  // deterministic pattern
  let seed = 7;
  const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
    const finder = (x < 3 && y < 3) || (x > n - 4 && y < 3) || (x < 3 && y > n - 4);
    if (finder) continue;
    if (rnd() > 0.5) cells.push([x, y]);
  }
  const c = size / n;
  const Finder = ({ fx, fy }) => (
    <g>
      <rect x={fx * c} y={fy * c} width={c * 3} height={c * 3} fill={color} />
      <rect x={(fx + 0.5) * c} y={(fy + 0.5) * c} width={c * 2} height={c * 2} fill={bg} />
      <rect x={(fx + 1) * c} y={(fy + 1) * c} width={c} height={c} fill={color} />
    </g>
  );
  return (
    <svg width={size} height={size} style={{ borderRadius: 6, background: bg, display: 'block' }}>
      {cells.map(([x, y], i) => <rect key={i} x={x * c} y={y * c} width={c} height={c} fill={color} />)}
      <Finder fx={0} fy={0} /><Finder fx={n - 3} fy={0} /><Finder fx={0} fy={n - 3} />
    </svg>
  );
}

const SUBTABS = [{ v: 'planner', label: 'Live Planner', icon: 'sparkles' }, { v: 'playlist', label: 'Chart Playlist', icon: 'layers' }, { v: 'live', label: 'Go Live', icon: 'live' }];

/* ---------------- Planner ---------------- */
function Planner({ go }) {
  const [topic, setTopic] = useLV(LIVE_TOPICS[0].id);
  return (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 320px', gap: 16, alignItems: 'start' }}>
      {/* Topic generator */}
      <div className="card" style={{ padding: 'var(--card-pad)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <Icon name="sparkles" size={16} color="var(--accent)" />
          <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 700 }}>AI Topic Suggestions</h3>
        </div>
        <p style={{ fontSize: 12, color: 'var(--ink-3)', margin: '0 0 12px' }}>Generated from this week's data shifts.</p>
        {LIVE_TOPICS.map((t) => (
          <button key={t.id} onClick={() => setTopic(t.id)} className="card" style={{
            display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', padding: 12, marginBottom: 8,
            background: topic === t.id ? 'rgba(100,188,100,0.10)' : 'var(--panel-2)', borderColor: topic === t.id ? 'var(--accent)' : 'var(--line)', color: 'var(--ink)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
              <span style={{ fontSize: 13.5, fontWeight: 700, lineHeight: 1.4 }}>{t.text}</span>
              {t.hot && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0 }}><Icon name="flame" size={13} color={CHART.clay} /></span>}
            </div>
            <div style={{ marginTop: 8 }}><Tag color={QA_CATS[t.tag]}>{t.tag}</Tag></div>
          </button>
        ))}
        <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}><Icon name="refresh" size={14} />Regenerate topics</button>
      </div>

      {/* Outline */}
      <div className="card" style={{ padding: 'var(--card-pad)' }}>
        <h3 style={{ margin: '0 0 4px', fontSize: 14.5, fontWeight: 700 }}>Live Outline</h3>
        <p style={{ fontSize: 12, color: 'var(--ink-3)', margin: '0 0 12px' }}>Drag to reorder · ~27 min total</p>
        {LIVE_OUTLINE.map((o, i) => (
          <div key={o.id} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 0', borderBottom: i < LIVE_OUTLINE.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <span style={{ cursor: 'grab', color: 'var(--ink-3)', fontSize: 14, lineHeight: 1 }}>⋮⋮</span>
            <span style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--panel-2)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, color: 'var(--ink-2)' }}>{i + 1}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.t}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{o.d}</div>
            </div>
            <span className="tabnum" style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 700 }}>{o.dur}</span>
          </div>
        ))}
      </div>

      {/* CTA / QR setup */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="card" style={{ padding: 'var(--card-pad)' }}>
          <h3 style={{ margin: '0 0 12px', fontSize: 14.5, fontWeight: 700 }}>CTA & QR Setup</h3>
          {[['Report download', true], ['Home valuation', true], ['Book consultation', true], ['Region subscribe', false]].map(([l, on]) => (
            <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
              <span style={{ width: 32, height: 18, borderRadius: 999, background: on ? 'var(--accent)' : 'var(--line)', position: 'relative', flexShrink: 0 }}>
                <span style={{ position: 'absolute', top: 2, left: on ? 16 : 2, width: 14, height: 14, borderRadius: 999, background: '#fff', transition: 'left 160ms' }} />
              </span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{l}</span>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'center', margin: '14px 0 6px' }}><QR size={130} /></div>
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-3)' }}>az.realtor/live/spring-2026</div>
        </div>
        <button className="btn btn-primary" style={{ justifyContent: 'center', padding: '13px' }} onClick={() => go('live')}><Icon name="play" size={16} />Start Live Dashboard</button>
      </div>
    </div>
  );
}

/* ---------------- Playlist ---------------- */
function Playlist({ current, setCurrent, go }) {
  return (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)' }}>7 slides · each chart pulls live data · drag to reorder, click to preview</p>
        <button className="btn btn-primary" onClick={() => go('live')}><Icon name="play" size={14} />Present</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {PLAYLIST.map((p, i) => (
          <button key={p.id} onClick={() => setCurrent(i)} className="card" style={{
            padding: 0, overflow: 'hidden', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', color: 'var(--ink)',
            outline: current === i ? '2px solid var(--accent)' : 'none', outlineOffset: -1,
          }}>
            <div style={{ aspectRatio: '16/10', background: 'var(--panel-2)', borderBottom: '1px solid var(--line)', display: 'flex', flexDirection: 'column', padding: 11, position: 'relative' }}>
              <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 9.5, fontWeight: 700, background: 'var(--az-dark-green,#1F281F)', color: '#fff', padding: '2px 6px', borderRadius: 3 }}>{i + 1}</span>
              <span style={{ position: 'absolute', top: 8, right: 8 }}><Tag>{p.kind}</Tag></span>
              <div style={{ marginTop: 'auto' }}>
                <MiniPreview kind={p.chart} />
              </div>
            </div>
            <div style={{ padding: 11 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1.35, marginBottom: 4 }}>{p.title}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.45 }}>{p.takeaway}</div>
            </div>
          </button>
        ))}
        <button className="card" style={{ display: 'grid', placeItems: 'center', cursor: 'pointer', background: 'var(--panel-2)', borderStyle: 'dashed', minHeight: 160, color: 'var(--ink-3)', fontFamily: 'inherit' }}>
          <div style={{ textAlign: 'center' }}><Icon name="plus" size={22} color="var(--ink-3)" style={{ margin: '0 auto 6px' }} /><div style={{ fontSize: 12, fontWeight: 700 }}>Add slide</div></div>
        </button>
      </div>
    </div>
  );
}

function MiniPreview({ kind }) {
  if (kind === 'kpi') return <div style={{ display: 'flex', gap: 5 }}>{['1.6M', '872', '7.0'].map((v) => <div key={v} style={{ flex: 1, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 4, padding: '5px 4px', textAlign: 'center' }}><div className="tabnum" style={{ fontSize: 11, fontWeight: 800 }}>{v}</div></div>)}</div>;
  if (kind === 'cta') return <div style={{ display: 'grid', placeItems: 'center' }}><QR size={52} /></div>;
  if (kind === 'opening') return <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-2)', lineHeight: 1.5 }}>· 大盘<br/>· York<br/>· 买卖建议</div>;
  if (kind === 'advice') return <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>{['卖家：别高开', '买家：别犹豫'].map((t) => <div key={t} style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-2)' }}>{t}</div>)}</div>;
  // mini sparkline
  const s = (kind === 'snlr' ? SERIES.snlr : SERIES.avgPrice).slice(-10);
  const mn = Math.min(...s), mx = Math.max(...s);
  const d = s.map((v, i) => `${(i / (s.length - 1)) * 100},${28 - ((v - mn) / (mx - mn || 1)) * 26}`).join(' ');
  return <svg viewBox="0 0 100 30" style={{ width: '100%', height: 30 }}><polyline points={d} fill="none" stroke={CHART.green} strokeWidth="2.5" /></svg>;
}

/* ---------------- Go Live (broadcast 16:9) ---------------- */
function GoLive({ current, setCurrent }) {
  const slide = PLAYLIST[current];
  const next = PLAYLIST[(current + 1) % PLAYLIST.length];
  const [secs, setSecs] = useLV(0);
  useLVe(() => { const t = setInterval(() => setSecs((s) => s + 1), 1000); return () => clearInterval(t); }, []);
  const mm = String(Math.floor(secs / 60)).padStart(2, '0'), ss = String(secs % 60).padStart(2, '0');

  return (
    <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 16, alignItems: 'start' }}>
      {/* Broadcast stage */}
      <div>
        <div style={{ aspectRatio: '16/9', background: '#161D16', borderRadius: 10, border: '1px solid var(--line)', overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column', color: '#fff' }}>
          {/* live bar */}
          <div style={{ position: 'absolute', top: 16, left: 20, display: 'flex', alignItems: 'center', gap: 8, zIndex: 2 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: CHART.clay, padding: '4px 9px', borderRadius: 4, fontSize: 11, fontWeight: 800, letterSpacing: '0.08em' }}>
              <span className="live-dot" style={{ width: 7, height: 7, borderRadius: 999, background: '#fff' }} />LIVE
            </span>
            <span className="tabnum" style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontWeight: 700 }}>{mm}:{ss} · 184 watching</span>
          </div>
          <img src="assets/az-logo-horizontal-white.png" alt="" style={{ position: 'absolute', top: 16, right: 20, height: 18, opacity: 0.85, zIndex: 2 }} />

          {/* main content */}
          <div style={{ flex: 1, padding: '60px 56px 0', display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: CHART.green, marginBottom: 10 }}>{slide.kind} · York Region</div>
            <h2 style={{ margin: 0, fontSize: 30, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.15, maxWidth: '80%' }}>{slide.title}</h2>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: slide.chart === 'cta' ? '1fr auto' : '1fr', gap: 24, alignItems: 'center', marginTop: 14 }}>
              <BroadcastBody slide={slide} />
              {slide.chart === 'cta' && (
                <div style={{ textAlign: 'center', background: '#fff', borderRadius: 12, padding: 18 }}>
                  <QR size={150} /><div style={{ color: '#1F281F', fontSize: 12, fontWeight: 700, marginTop: 8 }}>扫码领取报告</div>
                </div>
              )}
            </div>
          </div>

          {/* takeaway bar */}
          <div style={{ background: 'rgba(100,188,100,0.16)', borderTop: '2px solid ' + CHART.green, padding: '14px 56px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: '0.1em', color: CHART.green, textTransform: 'uppercase', flexShrink: 0 }}>Key takeaway</span>
            <span style={{ fontSize: 16, fontWeight: 700 }}>{slide.takeaway}</span>
          </div>

          {/* persistent QR (non-CTA slides) */}
          {slide.chart !== 'cta' && (
            <div style={{ position: 'absolute', bottom: 78, right: 28, background: '#fff', borderRadius: 8, padding: 8, textAlign: 'center' }}>
              <QR size={66} /><div style={{ color: '#1F281F', fontSize: 8.5, fontWeight: 700, marginTop: 4 }}>领取报告</div>
            </div>
          )}
        </div>

        {/* transport */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
          <button className="btn btn-ghost" onClick={() => setCurrent((current - 1 + PLAYLIST.length) % PLAYLIST.length)}><Icon name="chevronL" size={15} />Prev</button>
          <button className="btn btn-primary" onClick={() => setCurrent((current + 1) % PLAYLIST.length)}>Next slide<Icon name="chevronR" size={15} /></button>
          <div style={{ display: 'flex', gap: 5, marginLeft: 8 }}>
            {PLAYLIST.map((_, i) => <button key={i} onClick={() => setCurrent(i)} style={{ width: i === current ? 22 : 8, height: 8, borderRadius: 999, border: 'none', cursor: 'pointer', background: i === current ? 'var(--accent)' : 'var(--line)', transition: 'width 160ms' }} />)}
          </div>
          <div style={{ flex: 1 }} />
          <button className="btn btn-ghost"><Icon name="eye" size={15} />Quick chart</button>
        </div>
      </div>

      {/* Presenter panel */}
      <div className="card" style={{ overflow: 'hidden' }}>
        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--panel-2)' }}>
          <Icon name="eye" size={15} color="var(--accent)" /><span style={{ fontSize: 12.5, fontWeight: 700 }}>Presenter — only you</span>
        </div>
        <div style={{ padding: 16 }}>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Up next · slide {((current + 1) % PLAYLIST.length) + 1}</div>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 14 }}>{next.title}</div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Script · 30s</div>
          <p style={{ fontSize: 12.5, lineHeight: 1.6, color: 'var(--ink-2)', margin: '0 0 14px' }}>
            “看这张图 —— {slide.takeaway}。这说明现在的市场是{slide.kind === 'Advice' ? '机会和风险并存' : '温和回暖'}，所以接下来我给大家两个具体建议……”
          </p>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            {[['Timer', mm + ':' + ss], ['Slide', (current + 1) + '/7']].map(([l, v]) => (
              <div key={l} style={{ flex: 1, background: 'var(--panel-2)', border: '1px solid var(--line)', borderRadius: 7, padding: '9px 11px' }}>
                <div className="eyebrow">{l}</div><div className="tabnum" style={{ fontSize: 17, fontWeight: 800 }}>{v}</div>
              </div>
            ))}
          </div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Live Q&A · 5 new</div>
          {QA_ITEMS.slice(0, 3).map((q) => (
            <div key={q.id} style={{ display: 'flex', gap: 8, padding: '8px 0', borderTop: '1px solid var(--line)' }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: QA_CATS[q.cat], marginTop: 5, flexShrink: 0 }} />
              <div>
                <div style={{ fontSize: 11.5, lineHeight: 1.4 }}>{q.q}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{q.cat}{q.lead ? ' · lead captured' : ''}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function BroadcastBody({ slide }) {
  if (slide.chart === 'opening') {
    return <ul style={{ margin: 0, paddingLeft: 22, fontSize: 22, lineHeight: 1.8, fontWeight: 600 }}>
      <li>GTA 大盘：成交回升、库存缓解</li>
      <li>York 独立屋：4 个月连涨</li>
      <li>买家 & 卖家：现在该怎么做</li>
    </ul>;
  }
  if (slide.chart === 'kpi') {
    const kp = [['Avg price', '$1.62M', '+1.1%'], ['Sales', '872', '+3.7%'], ['Active', '6,080', '−2.6%'], ['MOI', '7.0', '−0.4'], ['SNLR', '62%', '+5pts']];
    return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14, alignSelf: 'center' }}>
      {kp.map(([l, v, d]) => <div key={l} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 10, padding: '18px 14px' }}>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{l}</div>
        <div className="tabnum" style={{ fontSize: 30, fontWeight: 800, margin: '6px 0 3px' }}>{v}</div>
        <div className="tabnum" style={{ fontSize: 13, fontWeight: 700, color: d[0] === '−' ? '#E89' : CHART.green }}>{d}</div>
      </div>)}
    </div>;
  }
  if (slide.chart === 'advice') {
    return <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, alignSelf: 'center', width: '100%' }}>
      {[['卖家 Sellers', '定价贴近市场，别高开 5%。合理定价拿 105% SP/LP、19 天成交。', CHART.gold], ['买家 Buyers', '还有选择和议价空间，但优质独立屋开始变快 —— 别犹豫太久。', CHART.green]].map(([h, t, c]) => (
        <div key={h} style={{ background: 'rgba(255,255,255,0.05)', borderLeft: '3px solid ' + c, borderRadius: 8, padding: 20 }}>
          <div style={{ fontSize: 16, fontWeight: 800, marginBottom: 8 }}>{h}</div>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)' }}>{t}</div>
        </div>
      ))}
    </div>;
  }
  // chart slides — render a light-on-dark line
  const stat = slide.chart === 'snlr' ? SERIES.snlr : SERIES.avgPrice;
  return <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 10, padding: '14px 18px', alignSelf: 'stretch', display: 'flex' }}>
    <DarkLine series={stat} months={MONTHS} fmt={slide.chart === 'snlr' ? (v) => v + '%' : (v) => '$' + (v / 1000).toFixed(1) + 'M'} />
  </div>;
}

function DarkLine({ series, months, fmt }) {
  const W = 760, H = 300, padL = 56, padR = 16, padT = 14, padB = 30, iw = W - padL - padR, ih = H - padT - padB;
  const mx = Math.max(...series), mn = Math.min(...series), rng = (mx - mn) * 1.15 || 1, bottom = mn - (mx - mn) * 0.12;
  const x = (i) => padL + (i / (series.length - 1)) * iw, y = (v) => padT + ih - ((v - bottom) / rng) * ih;
  const d = series.map((v, i) => (i ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(v).toFixed(1)).join(' ');
  const everyN = Math.ceil(months.length / 8);
  return <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ fontFamily: "'Open Sans',sans-serif" }}>
    {[0, 0.25, 0.5, 0.75, 1].map((f, i) => { const v = bottom + rng * f; return <g key={i}><line x1={padL} x2={W - padR} y1={y(v)} y2={y(v)} stroke="rgba(255,255,255,0.10)" /><text x={padL - 8} y={y(v) + 4} textAnchor="end" fontSize="12" fill="rgba(255,255,255,0.5)">{fmt(Math.round(v))}</text></g>; })}
    <path d={d + ` L ${x(series.length - 1)} ${padT + ih} L ${padL} ${padT + ih} Z`} fill={CHART.green} opacity="0.12" />
    <path d={d} fill="none" stroke={CHART.green} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    <circle cx={x(series.length - 1)} cy={y(series[series.length - 1])} r="5" fill={CHART.green} />
    {months.map((m, i) => (i % everyN === 0) && <text key={i} x={x(i)} y={H - 9} textAnchor="middle" fontSize="11" fill="rgba(255,255,255,0.5)">{m.label}</text>)}
  </svg>;
}

function LiveStudio({ setView }) {
  const [tab, setTab] = useLV('planner');
  const [current, setCurrent] = useLV(0);
  return (
    <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PageHead eyebrow="Live Studio" title="Spring Market Outlook"
        sub="直播前不用从零准备，直播中不手忙脚乱，直播后内容自动复用并转化 lead。"
        actions={
          <div style={{ display: 'inline-flex', background: 'var(--panel-2)', border: '1px solid var(--line)', borderRadius: 7, padding: 3, gap: 2 }}>
            {SUBTABS.map((s) => (
              <button key={s.v} onClick={() => setTab(s.v)} style={{
                border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12.5, fontWeight: 700, padding: '7px 13px', borderRadius: 5,
                display: 'inline-flex', alignItems: 'center', gap: 6,
                background: tab === s.v ? 'var(--accent)' : 'transparent', color: tab === s.v ? '#16241B' : 'var(--ink-2)',
              }}><Icon name={s.icon} size={14} color={tab === s.v ? '#16241B' : 'currentColor'} />{s.label}</button>
            ))}
          </div>
        } />
      {tab === 'planner' && <Planner go={setTab} />}
      {tab === 'playlist' && <Playlist current={current} setCurrent={setCurrent} go={setTab} />}
      {tab === 'live' && <GoLive current={current} setCurrent={setCurrent} />}
    </div>
  );
}
window.LiveStudio = LiveStudio;