function Dashboard({ go, user, plan }) {
  const wide = useWide();
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <Ticker/>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '32px 32px' : '20px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 2, marginBottom: 6 }}>SATURDAY · APR 18, 2026</div>
            <div style={{ fontSize: wide ? 42 : 30, letterSpacing: -1.2, lineHeight: 1.1 }}>
              Welcome back, <span style={{ fontStyle: 'italic', color: TH.accent }}>{user.name}.</span>
            </div>
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 1, padding: '6px 12px', border: `1px solid ${TH.accent}` }}>● {plan.toUpperCase()} MEMBER</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: wide ? '1.5fr 1fr' : '1fr', gap: 16, marginBottom: 16 }}>
          {/* Featured memo */}
          <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 28 : 20 }}>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 10 }}>THIS WEEK · MEMO №142</div>
            <div style={{ fontFamily: TH.serif, fontSize: wide ? 30 : 22, lineHeight: 1.2, marginBottom: 12, letterSpacing: -0.5 }}>
              Funding regime shift — who <span style={{ fontStyle: 'italic', color: TH.accent }}>pays</span> to be long?
            </div>
            <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6, marginBottom: 16 }}>
              Perpetual funding on the majors flipped negative for 11 straight days — a setup we've only seen twice since 2020. Here's what happened both times, and what the cross-venue basis suggests about positioning into May.
            </div>
            <div style={{ display: 'flex', gap: 14, fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1, marginBottom: 18 }}>
              <span>7 MIN READ</span><span>·</span><span>4 CHARTS</span><span>·</span><span>3 BACKTESTS</span>
            </div>
            <Btn primary small>Continue reading →</Btn>
          </div>

          {/* Quick access */}
          <div style={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)', gap: 10 }}>
            <div onClick={() => go('backtester')} style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 20, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>TOOL</div>
                <div style={{ fontFamily: TH.serif, fontSize: 18, marginTop: 2 }}>Backtester</div>
              </div>
              <span style={{ color: TH.accent, fontFamily: TH.mono, fontSize: 18 }}>→</span>
            </div>
            <div onClick={() => go('videos')} style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 20, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>LIBRARY</div>
                <div style={{ fontFamily: TH.serif, fontSize: 18, marginTop: 2 }}>94 video lectures</div>
              </div>
              <span style={{ color: TH.accent, fontFamily: TH.mono, fontSize: 18 }}>→</span>
            </div>
            <div onClick={() => go('telegram')} style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 20, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>COMMUNITY</div>
                <div style={{ fontFamily: TH.serif, fontSize: 18, marginTop: 2 }}>Telegram · 487 active</div>
              </div>
              <span style={{ color: TH.accent, fontFamily: TH.mono, fontSize: 18 }}>→</span>
            </div>
          </div>
        </div>

        {/* Index */}
        <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 28 : 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2 }}>§ RESEARCH INDEX</div>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1 }}>SHOWING LATEST 8</div>
          </div>
          {[
            { tag: 'MEMO', t: 'Funding regime shift — who pays to be long?', r: '7 min', d: 'Apr 18', c: TH.accent },
            { tag: 'BACKTEST', t: 'SMA 50/200 · BTC · 2019–2026 walk-forward', r: 'Sharpe 1.82', d: 'Apr 16', c: TH.green },
            { tag: 'SIGNAL', t: 'ETH/BTC mean reversion · 4H — OPEN', r: '+1.4% unrealized', d: 'Apr 15', c: TH.green },
            { tag: 'VIDEO', t: 'Position sizing for volatile assets — part II', r: '18 min', d: 'Apr 14', c: TH.accent },
            { tag: 'MEMO', t: 'A note on survivorship bias in altcoin baskets', r: '11 min', d: 'Apr 11', c: TH.accent },
            { tag: 'BACKTEST', t: 'Donchian breakout · SOL · walk-forward', r: 'Sharpe 1.21', d: 'Apr 09', c: TH.green },
            { tag: 'SIGNAL', t: 'Perp basis divergence · multi-venue — CLOSED', r: '+4.2%', d: 'Apr 07', c: TH.muted },
            { tag: 'MEMO', t: 'Reading the tape: what order flow tells us now', r: '9 min', d: 'Apr 04', c: TH.accent },
          ].map((row, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: wide ? '80px 1fr 120px 60px' : '70px 1fr 50px', gap: 14,
              padding: '12px 0', borderBottom: i < 7 ? `1px solid ${TH.rule}` : 'none', alignItems: 'center', cursor: 'pointer',
            }}>
              <span style={{ fontFamily: TH.mono, fontSize: 10, color: row.c, letterSpacing: 1.5 }}>{row.tag}</span>
              <span style={{ fontFamily: TH.serif, fontSize: wide ? 15 : 14, color: TH.ink }}>{row.t}</span>
              {wide && <span style={{ fontFamily: TH.mono, fontSize: 11, color: TH.inkSoft, textAlign: 'right' }}>{row.r}</span>}
              <span style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, textAlign: 'right' }}>{row.d}</span>
            </div>
          ))}
        </div>
      </div>
      <Footer/>
    </div>
  );
}

function BacktesterPlaceholder({ go }) {
  const wide = useWide();
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <Ticker/>
      <div style={{ padding: '14px 32px', borderBottom: `1px solid ${TH.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 1 }}>
        <span>TOOLS / LAB / <span style={{ color: TH.ink }}>SMA_CROSSOVER</span></span>
        <span>RUN_241 · 2026-04-18T14:22Z</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: wide ? '240px 1fr 240px' : '1fr', minHeight: 520 }}>
        {wide && (
          <div style={{ borderRight: `1px solid ${TH.rule}`, padding: '20px', background: TH.panel }}>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 16 }}>◉ INPUTS</div>
            {[['asset','BTC-USD'],['fast_sma',50],['slow_sma',200],['tf','1D'],['start','2019-01-01'],['end','2026-04-18'],['fees','0.10%'],['slip','5bps']].map(([k,v],i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontFamily: TH.mono, fontSize: 12 }}>
                <span style={{ color: TH.muted }}>{k}</span><span style={{ color: TH.accent }}>{v}</span>
              </div>
            ))}
          </div>
        )}
        <div style={{ padding: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 520, textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, border: `2px dashed ${TH.ruleHi}`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={TH.accent} strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-6"/></svg>
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 12 }}>◆ PLACEHOLDER</div>
          <div style={{ fontSize: wide ? 34 : 26, letterSpacing: -0.8, marginBottom: 14, maxWidth: 520 }}>
            SMA Backtester tool goes <span style={{ fontStyle: 'italic', color: TH.accent }}>here.</span>
          </div>
          <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6, maxWidth: 480, marginBottom: 20 }}>
            Drop the live backtester here when ready. Params sidebar and stats rail are already wired — just plug
            your equity-curve component into this middle panel.
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>/tools/backtester · MEMBER-ONLY</div>
        </div>
        {wide && (
          <div style={{ borderLeft: `1px solid ${TH.rule}`, padding: '20px', background: TH.panel }}>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 16 }}>◉ RESULTS</div>
            {[['CAGR','—'],['Sharpe','—'],['Sortino','—'],['Max DD','—'],['Win rate','—'],['N trades','—']].map(([k,v],i) => (
              <div key={i} style={{ padding: '10px 0', borderBottom: `1px solid ${TH.rule}` }}>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1, marginBottom: 2 }}>{k}</div>
                <div style={{ fontFamily: TH.mono, fontSize: 18, color: TH.inkSoft }}>{v}</div>
              </div>
            ))}
          </div>
        )}
      </div>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Dashboard, BacktesterPlaceholder });