function Videos({ go, user }) {
  const wide = useWide();
  const [active, setActive] = React.useState(0);
  const vids = [
    { title: 'Position sizing for volatile assets — part II', cat: 'RISK', len: '18:04', date: 'Apr 14', desc: 'Continuing from part I, we move from fixed-fractional sizing to volatility-targeted sizing using realized vol windows.', free: false },
    { title: 'Reading the tape: order flow as a leading indicator', cat: 'MARKETS', len: '24:11', date: 'Apr 07', desc: 'How to extract signal from aggregated trade prints without overfitting to noise.', free: false },
    { title: 'Walk-forward 101 — why your backtest is probably lying', cat: 'METHODS', len: '12:48', date: 'Apr 01', desc: 'The most common backtest failure mode, and a simple workflow to catch it.', free: true },
    { title: 'Funding rates, explained for humans', cat: 'PRIMER', len: '08:32', date: 'Mar 24', desc: 'If you trade perps you need to understand funding. A gentle, visual introduction.', free: true },
    { title: 'Building a basic mean-reversion system — live code', cat: 'WORKSHOP', len: '42:15', date: 'Mar 17', desc: 'We code up a simple MR system in Python, then torture-test it with walk-forward.', free: false },
    { title: 'On-chain for traders: what actually matters', cat: 'ON-CHAIN', len: '28:03', date: 'Mar 10', desc: 'Most on-chain metrics are noise. Here are the handful that aren\'t.', free: false },
  ];
  const v = vids[active];
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '32px 32px' : '20px 16px' }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 10 }}>§ VIDEO LIBRARY</div>
        <div style={{ fontSize: wide ? 44 : 30, letterSpacing: -1.2, marginBottom: 24 }}>
          94 lectures. <span style={{ fontStyle: 'italic', color: TH.accent }}>No filler.</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: wide ? '1.7fr 1fr' : '1fr', gap: 16 }}>
          {/* Player */}
          <div>
            <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, aspectRatio: '16/9', position: 'relative', overflow: 'hidden' }}>
              {/* Faux thumbnail */}
              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${TH.panelHi} 0%, ${TH.bg2} 100%)` }}/>
              <svg viewBox="0 0 400 225" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.25 }}>
                <g stroke={TH.accent} strokeWidth="1" fill="none">
                  {[...Array(8)].map((_, i) => (
                    <path key={i} d={`M0 ${150 - i*8} L40 ${140 - i*10} L80 ${130 - i*8} L120 ${120 - i*12} L160 ${100 - i*10} L200 ${90 - i*12} L240 ${70 - i*8} L280 ${60 - i*10} L320 ${50 - i*8} L360 ${40 - i*10} L400 ${30 - i*8}`}/>
                  ))}
                </g>
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(212,168,75,0.15)', border: `2px solid ${TH.accent}`, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
                  <div style={{ width: 0, height: 0, borderLeft: `18px solid ${TH.accent}`, borderTop: '12px solid transparent', borderBottom: '12px solid transparent', marginLeft: 6 }}/>
                </div>
              </div>
              <div style={{ position: 'absolute', top: 14, left: 14, fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 1.5, padding: '4px 8px', background: 'rgba(19,19,15,0.7)', border: `1px solid ${TH.rule}` }}>
                {v.cat} · {v.len}
              </div>
              {!v.free && !user && (
                <div style={{ position: 'absolute', bottom: 14, right: 14, fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 1.5, padding: '4px 10px', border: `1px solid ${TH.accent}`, background: 'rgba(19,19,15,0.8)' }}>
                  ⚿ MEMBERS ONLY
                </div>
              )}
            </div>
            <div style={{ padding: '20px 0' }}>
              <div style={{ display: 'flex', gap: 10, marginBottom: 10, flexWrap: 'wrap', fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1 }}>
                <span>{v.cat}</span><span>·</span><span>{v.len}</span><span>·</span><span>{v.date.toUpperCase()}</span>
                {v.free && <span style={{ color: TH.green }}>· FREE PREVIEW</span>}
              </div>
              <div style={{ fontFamily: TH.serif, fontSize: wide ? 28 : 22, letterSpacing: -0.5, lineHeight: 1.2, marginBottom: 10 }}>{v.title}</div>
              <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6 }}>{v.desc}</div>
            </div>
          </div>

          {/* Playlist */}
          <div>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 2, marginBottom: 12 }}>UP NEXT</div>
            <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, maxHeight: wide ? 520 : 'none', overflowY: 'auto' }}>
              {vids.map((vid, i) => (
                <div key={i} onClick={() => setActive(i)} style={{
                  display: 'flex', gap: 12, padding: 14, cursor: 'pointer',
                  borderBottom: i < vids.length-1 ? `1px solid ${TH.rule}` : 'none',
                  background: active === i ? TH.panelHi : 'transparent',
                  borderLeft: active === i ? `2px solid ${TH.accent}` : '2px solid transparent',
                }}>
                  <div style={{ width: 70, height: 44, background: TH.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TH.mono, fontSize: 10, color: TH.accent }}>
                    {vid.len}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: TH.serif, fontSize: 13, color: TH.ink, lineHeight: 1.3, marginBottom: 4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{vid.title}</div>
                    <div style={{ fontFamily: TH.mono, fontSize: 9, color: TH.muted, letterSpacing: 1 }}>
                      {vid.cat} · {vid.date.toUpperCase()}{vid.free ? ' · FREE' : ''}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            {!user && (
              <div style={{ marginTop: 14, padding: 20, border: `1px solid ${TH.accent}`, background: TH.panel }}>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 8 }}>⚿ UNLOCK ALL 94</div>
                <div style={{ fontFamily: TH.serif, fontSize: 18, marginBottom: 12 }}>Join to watch the full library.</div>
                <Btn primary small onClick={() => go('pricing')} style={{ width: '100%' }}>See membership →</Btn>
              </div>
            )}
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  );
}

function Telegram({ go, user }) {
  const wide = useWide();
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: wide ? '48px 32px' : '28px 20px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: wide ? '1.1fr 1fr' : '1fr', gap: wide ? 48 : 28, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 14 }}>§ THE TELEGRAM FLOOR</div>
            <div style={{ fontSize: wide ? 52 : 36, letterSpacing: -1.5, lineHeight: 1.05, marginBottom: 20 }}>
              487 traders.<br/>One <span style={{ fontStyle: 'italic', color: TH.accent }}>tape.</span>
            </div>
            <div style={{ fontFamily: TH.serif, fontSize: 16, color: TH.inkSoft, lineHeight: 1.6, marginBottom: 24 }}>
              A private Telegram where every call is tagged, timestamped, and archived. Quants, devs, and
              self-directed traders sharing what they're doing and why — in real time.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 28 }}>
              {[
                ['487', 'Active members'],
                ['~180', 'Messages / day'],
                ['24/7', 'Across time zones'],
                ['0', 'Shillcoin mentions'],
              ].map(([n, l], i) => (
                <div key={i} style={{ padding: 16, border: `1px solid ${TH.rule}`, background: TH.panel }}>
                  <div style={{ fontFamily: TH.serif, fontSize: 24, color: TH.accent }}>{n}</div>
                  <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5, marginTop: 2 }}>{l.toUpperCase()}</div>
                </div>
              ))}
            </div>
            {user ? (
              <Btn primary style={{ padding: '14px 24px' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22 3L2 10.5l6 2.5 2.5 6L22 3zm-8.5 11l-3-1.3L20 7l-6.5 7z"/></svg>
                Open invite link →
              </Btn>
            ) : (
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => go('pricing')}>Join to unlock →</Btn>
                <Btn ghost onClick={() => go('signup')}>Free account</Btn>
              </div>
            )}
          </div>

          {/* Chat preview */}
          <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 20, position: 'relative', overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, paddingBottom: 12, borderBottom: `1px solid ${TH.rule}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 30, height: 30, borderRadius: '50%', background: TH.accent, color: TH.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TH.mono, fontWeight: 700 }}>W</div>
                <div>
                  <div style={{ fontFamily: TH.sans, fontSize: 13, fontWeight: 600 }}>Walkforward Floor</div>
                  <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.green, letterSpacing: 1 }}>● 142 ONLINE</div>
                </div>
              </div>
              <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted }}>LIVE</div>
            </div>

            {[
              { n: 'quant_marin', t: 'long ETH/BTC 0.0542 · target 0.059 · stop 0.051', tag: 'TRADE', time: '14:02' },
              { n: 'sully', t: 'anyone else seeing that vol skew on the may expiry?', tag: null, time: '14:05' },
              { n: 'nora_j', t: 'here\'s the basis divergence chart i mentioned', tag: 'CHART', time: '14:11' },
              { n: 'dev_h', t: 'running backtest on donchian variant · will share in 10', tag: null, time: '14:18' },
              { n: 'quant_marin', t: 'closed ETH/BTC +1.9% · underestimated the chop', tag: 'CLOSE', time: '14:26' },
              { n: 'mod_ari', t: 'weekly review call in 30m — link pinned', tag: 'MOD', time: '14:30' },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontFamily: TH.sans, fontSize: 13 }}>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: `hsl(${40 + i*35}, 22%, ${55 + (i%3)*8}%)`, flexShrink: 0 }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'baseline', marginBottom: 2 }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: TH.ink }}>@{m.n}</span>
                    {m.tag && <span style={{ fontFamily: TH.mono, fontSize: 9, color: m.tag === 'CLOSE' ? TH.muted : TH.accent, letterSpacing: 1, padding: '1px 5px', border: `1px solid ${m.tag === 'CLOSE' ? TH.rule : TH.accent}` }}>{m.tag}</span>}
                    <span style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted }}>{m.time}</span>
                  </div>
                  <div style={{ color: TH.inkSoft, lineHeight: 1.4 }}>{m.t}</div>
                </div>
              </div>
            ))}

            {!user && (
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(28,28,23,0) 0%, rgba(28,28,23,0.95) 75%)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 24 }}>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2 }}>⚿ MEMBERS ONLY</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Videos, Telegram });