// Standard Mode — Day Trader (Persona 2)
// 5 states: briefing → watchlist → order → live → journal
function StandardMode({ stdState, setStdState, livePrice, onPositionClose, setHasOpenPosition, chartOverlay, overlayStyle }) {
  const [selectedSym, setSelectedSym] = React.useState('GOLD');
  const [orderType, setOrderType] = React.useState('stop');
  const [bpTab, setBpTab] = React.useState('positions');
  const [emotion, setEmotion] = React.useState(null);

  // Position: entry 2632, SL 2618 (14pts), TP 2660 (28pts) → 1:2 R:R
  // Lots: 0.07 (1% risk on $10k / $14 SL distance × $100/lot)
  const ENTRY = 2632.00, SL = 2618.00, TP = 2660.00, LOTS = 0.07;
  const PX_PER_LOT = 100; // $100/point for 1 GOLD lot
  const newLivePosition = {
    sym: 'GOLD', dir: 'BUY', lots: LOTS,
    open: ENTRY, current: livePrice, sl: SL, tp: TP,
    pl: ((livePrice - ENTRY) * LOTS * PX_PER_LOT),
  };
  const rValue = ((livePrice - ENTRY) / (ENTRY - SL));

  const account = {
    balance: 10247.60,
    equity: 10247.60 + (stdState === 'live' ? newLivePosition.pl : 0),
    dailyPL: stdState === 'live' ? newLivePosition.pl : 0,
    margin: stdState === 'live' ? 1854.00 : 0,
    free: 10247.60 - (stdState === 'live' ? 1854.00 : 0),
  };

  const handleStartSession = () => setStdState('watchlist');
  const handlePasteSignal = () => setStdState('order');
  const handleConfirm = () => { setStdState('live'); setHasOpenPosition(true); };
  const handleFlatten = () => {
    onPositionClose && onPositionClose({ pl: 196.00, entry: ENTRY, exit: TP, hold: '1h 12m', pct: 1.96 });
  };

  const showChart = stdState === 'watchlist' || stdState === 'order' || stdState === 'live';
  const showBottomPanel = showChart;
  const overlay = (stdState === 'order' || stdState === 'live')
    ? (chartOverlay || { entry: ENTRY, sl: SL, tp: TP })
    : null;

  return (
    <div className="main">
      {/* ── LEFT SIDEBAR ── */}
      <div className="sidebar-left">
        {/* briefing: overnight moves */}
        {stdState === 'briefing' && (
          <>
            <div className="section-h">Overnight Moves</div>
            <div className="overnight-list">
              {OVERNIGHT.map(o => (
                <div key={o.sym} className="overnight-row">
                  <div className="overnight-row-top">
                    <div className="overnight-row-sym">{o.sym}</div>
                    <div className={`overnight-row-move ${o.move >= 0 ? 'pos' : 'neg'}`}>
                      {o.move >= 0 ? '+' : ''}{o.move.toFixed(2)}%
                    </div>
                  </div>
                  <div className="overnight-row-note">{o.note}</div>
                </div>
              ))}
            </div>
          </>
        )}

        {/* journal: session summary */}
        {stdState === 'journal' && (
          <>
            <div className="section-h">Session</div>
            <div className="ticket-content" style={{paddingTop:8}}>
              <div style={{fontSize:11, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:6}}>Trades today</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12}}>
                {[['Total','1'],['Wins','1'],['Losses','0'],['Win rate','100%']].map(([l,v]) => (
                  <div key={l} style={{background:'var(--panel-3)', border:'1px solid var(--border)', borderRadius:8, padding:'8px 10px'}}>
                    <div style={{fontSize:10, color:'var(--text-3)'}}>{l}</div>
                    <div style={{fontSize:16, fontWeight:700, marginTop:2, fontFamily:'JetBrains Mono,monospace'}}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{fontSize:11, color:'var(--text-3)', marginBottom:4}}>Best trade</div>
              <div style={{fontFamily:'JetBrains Mono,monospace', fontSize:18, fontWeight:800, color:'var(--green)', marginBottom:12}}>+$196.00</div>
              <div className="session-streak-card">
                <div className="streak-big">🔥</div>
                <div className="streak-info">
                  <div className="num">5 green</div>
                  <div className="sub">consecutive sessions</div>
                </div>
              </div>
            </div>
          </>
        )}

        {/* watchlist/order/live: full market watch */}
        {showChart && (
          <>
            <div className="section-h">Market Watch</div>
            <div className="market-watch">
              {INSTRUMENTS.map(it => {
                const decimalPlaces = it.sym === 'EUR/USD' ? 4 : 2;
                return (
                  <div key={it.sym} className={`mw-row ${selectedSym === it.sym ? 'active' : ''}`}
                       onClick={() => setSelectedSym(it.sym)}>
                    <div className="mw-row-top">
                      <div className="mw-sym">{it.sym}</div>
                      <div className={`mw-pct ${it.pctDir}`}>
                        {it.pctDir === 'up' ? '+' : ''}{it.pct.toFixed(2)}%
                      </div>
                    </div>
                    <div className="mw-prices mono">
                      <span className="bid">{it.bid.toFixed(decimalPlaces)}</span>
                      <span className="sep">/</span>
                      <span className="ask">{it.ask.toFixed(decimalPlaces)}</span>
                    </div>
                    <div className="mw-meta">
                      <span className="mw-atr">ATR {it.atr}</span>
                      <span className={`mw-trend ${it.trend}`}>
                        {it.trend === 'up' ? '↑' : it.trend === 'down' ? '↓' : '→'}
                      </span>
                      {it.newsCount > 0 && <span className="mw-news">{it.newsCount} news</span>}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="section-h" style={{borderTop:'1px solid var(--border)'}}>Account</div>
            <div className="account">
              <div className="account-row"><span className="lbl">Balance</span><span className="val">${account.balance.toLocaleString('en-US',{minimumFractionDigits:2})}</span></div>
              <div className="account-row"><span className="lbl">Equity</span><span className={`val ${account.equity < account.balance ? 'neg' : 'pos'}`}>${account.equity.toFixed(2)}</span></div>
              <div className="account-row"><span className="lbl">Daily P&L</span><span className={`val ${account.dailyPL < 0 ? 'neg' : account.dailyPL > 0 ? 'pos' : ''}`}>{account.dailyPL >= 0 ? '+' : ''}${account.dailyPL.toFixed(2)}</span></div>
              <div className="account-row"><span className="lbl">Margin</span><span className="val">${account.margin.toLocaleString('en-US',{minimumFractionDigits:2})}</span></div>
              <div className="account-row"><span className="lbl">Free margin</span><span className="val">${account.free.toFixed(2)}</span></div>
            </div>
            <div className="live-row"><span className="dot"></span> LIVE</div>
          </>
        )}
      </div>

      {/* ── CENTER + BOTTOM ── */}
      <div className="center-wrap">
        <div className="center">
          {/* STATE: BRIEFING — full center area */}
          {stdState === 'briefing' && (
            <div className="briefing-center">
              <div className="briefing-greeting">
                <h2>Good morning, Apurv 👋</h2>
                <p>Pre-market brief · Apr 30, 2026 · NFP day</p>
              </div>
              <div className="briefing-grid">
                {/* AI card */}
                <div className="ai-card">
                  <div className="ai-card-h">🤖 Why is gold moving today?</div>
                  {AI_GOLD_BULLETS.map(b => (
                    <div key={b.text} className="ai-bullet">
                      <span className="ai-icon">{b.icon}</span>
                      <span>{b.text}</span>
                    </div>
                  ))}
                </div>
                {/* Calendar card */}
                <div className="cal-card">
                  <div className="cal-card-h">📅 Economic Calendar — Today</div>
                  {CALENDAR_EVENTS.map(ev => (
                    <div key={ev.label} className="cal-event-row">
                      <div className="cal-time">{ev.time}</div>
                      <div><span className={`cal-label-pill ${ev.impact}`}>{ev.label}</span></div>
                      <div className="cal-event-body">
                        <div className={`cal-countdown ${ev.countdown === 'done' ? 'done' : 'upcoming'}`}>
                          {ev.countdown === 'done' ? '✓ done' : `⏱ ${ev.countdown}`}
                        </div>
                        <div className="cal-desc">{ev.desc}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <button className="btn btn-buy" onClick={handleStartSession}
                      style={{maxWidth:280, margin:'0 auto', display:'block', fontSize:14}}>
                Start Session →
              </button>
            </div>
          )}

          {/* STATE: JOURNAL — full center area */}
          {stdState === 'journal' && (
            <div className="journal-center">
              <div className="journal-trade-result">
                <div className="jtr-label">✓ GOLD LONG · CLOSED</div>
                <div className="jtr-pl">+$196.00</div>
                <div className="jtr-r">+2.0R · Target hit</div>
                <div className="jtr-meta">
                  {[['Entry','2,632.00'],['Exit','2,660.00'],['Hold','1h 12m'],['R:R','1 : 2.0']].map(([l,v]) => (
                    <div key={l} className="jtr-meta-row">
                      <div className="lbl">{l}</div>
                      <div className="val">{v}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="journal-form">
                <div className="journal-form-h">How did this trade feel?</div>
                <div className="emotion-row">
                  {['😊 Calm','🎯 Focused','😤 Rushed','🤯 Overtraded'].map(e => (
                    <button key={e} className={`emotion-btn ${emotion === e ? 'active' : ''}`}
                            onClick={() => setEmotion(e)}>{e}</button>
                  ))}
                </div>
                <textarea className="journal-notes" placeholder="Quick notes — what worked, what to improve..." rows={3} />
                <div style={{display:'flex', gap:10}}>
                  <button className="btn btn-secondary" style={{flex:1}} onClick={() => setStdState('watchlist')}>
                    Done
                  </button>
                  <button className="btn btn-buy" style={{flex:1}}>
                    📤 Share to Feed
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* STATES: WATCHLIST / ORDER / LIVE — chart */}
          {showChart && (
            <>
              <div className="chart-header">
                <div className="chart-sym">{selectedSym}</div>
                <div style={{fontSize:11, color:'var(--text-3)', fontFamily:'JetBrains Mono,monospace', fontWeight:600, padding:'0 8px', borderRight:'1px solid var(--border)'}}>
                  H4+H1
                </div>
                {/* Calendar event chips */}
                <div style={{display:'flex', gap:6, alignItems:'center'}}>
                  {CALENDAR_EVENTS.filter(e => e.countdown !== 'done').map(ev => (
                    <div key={ev.label} className={`cal-chip ${ev.impact}`}>
                      <span>{ev.label}</span>
                      <span style={{opacity:0.75}}>· {ev.countdown}</span>
                    </div>
                  ))}
                  {CALENDAR_EVENTS.filter(e => e.countdown === 'done').map(ev => (
                    <div key={ev.label} className="cal-chip done">
                      <span>{ev.label} ✓</span>
                    </div>
                  ))}
                </div>
                {/* Bar Replay button */}
                <div className="bar-replay-btn" style={{marginLeft:'auto'}}>
                  ⏪ Bar Replay
                </div>
                {/* Live quote */}
                <div className="chart-quote" style={{marginLeft:12}}>
                  <span className="bid mono">{(livePrice - 0.10).toFixed(2)}</span>
                  <span style={{color:'var(--text-3)'}}>/</span>
                  <span className="ask mono">{(livePrice + 0.10).toFixed(2)}</span>
                </div>
              </div>
              <div className="chart-body">
                <div className="chart-tools">
                  <div className="chart-tool active">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 2l8 4-3.5 1.2L6.5 11 3 2z" stroke="currentColor" strokeWidth="1.4"/></svg>
                  </div>
                  <div className="chart-tool">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.2"/></svg>
                  </div>
                  <div className="chart-tool">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 11l10-8" stroke="currentColor" strokeWidth="1.4"/></svg>
                  </div>
                  <div className="chart-tool">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="3" width="10" height="8" stroke="currentColor" strokeWidth="1.2"/></svg>
                  </div>
                </div>
                <div className="chart-svg-wrap">
                  <DayMultiTFChart
                    overlay={overlay}
                    overlayStyle={overlayStyle}
                    currentPrice={livePrice}
                    totalWidth={900} height={420}
                  />
                </div>
              </div>
            </>
          )}
        </div>

        {/* ── BOTTOM PANEL ── */}
        {showBottomPanel && (
          <div className="bottom-panel">
            <div className="bp-tabs">
              {[['positions','Positions'],['pending','Pending'],['history','History'],['news','News']].map(([id,lbl]) => (
                <div key={id} className={`bp-tab ${bpTab === id ? 'active' : ''}`} onClick={() => setBpTab(id)}>{lbl}</div>
              ))}
              <div className="bp-summary">
                <span style={{color:'var(--text-3)', marginRight:8}}>
                  OPEN ({stdState === 'live' ? 1 : 0})&nbsp;·&nbsp;P&L:
                </span>
                <span style={{color: newLivePosition.pl < 0 ? '#EF4444' : 'var(--green)', fontFamily:'JetBrains Mono,monospace', fontWeight:700}}>
                  {stdState === 'live' ? (newLivePosition.pl >= 0 ? '+' : '−') + '$' + Math.abs(newLivePosition.pl).toFixed(2) : '$0.00'}
                </span>
              </div>
            </div>
            <div className="bp-table">
              {bpTab === 'positions' && (
                stdState === 'live' ? (
                  <>
                    <div className="bp-table-header">
                      <div>Symbol</div><div>Dir</div><div>Lots</div><div>Entry</div><div>Current</div><div>P&L</div><div>SL</div><div>TP</div><div></div>
                    </div>
                    <div className="bp-table-row">
                      <div className="sym">GOLD</div>
                      <div className="dir buy">BUY</div>
                      <div>{LOTS}</div>
                      <div>{ENTRY.toFixed(2)}</div>
                      <div>{livePrice.toFixed(2)}</div>
                      <div className={`pl ${newLivePosition.pl < 0 ? 'neg' : 'pos'}`}>
                        {newLivePosition.pl < 0 ? '−' : '+'}${Math.abs(newLivePosition.pl).toFixed(2)}
                      </div>
                      <div>{SL.toFixed(2)}</div>
                      <div>{TP.toFixed(2)}</div>
                      <div><button className="close-x" onClick={handleFlatten}>×</button></div>
                    </div>
                  </>
                ) : (
                  <div style={{padding:24, color:'var(--text-3)', fontSize:12}}>No open positions.</div>
                )
              )}
              {bpTab === 'pending' && <div style={{padding:24, color:'var(--text-3)', fontSize:12}}>No pending orders.</div>}
              {bpTab === 'history' && <div style={{padding:24, color:'var(--text-3)', fontSize:12}}>No closed positions today.</div>}
              {bpTab === 'news' && (
                <div style={{padding:'14px 16px'}}>
                  <div style={{fontSize:12, marginBottom:8}}><b>Gold breaks above 2,641 on weak ADP</b><span style={{color:'var(--text-3)', marginLeft:8}}>· 12m ago</span></div>
                  <div style={{fontSize:12, marginBottom:8}}><b>DXY slips below 104 — dollar weakness bid</b><span style={{color:'var(--text-3)', marginLeft:8}}>· 31m ago</span></div>
                  <div style={{fontSize:12}}><b>NFP due 13:30 — consensus 185k</b><span style={{color:'var(--text-3)', marginLeft:8}}>· 1h ago</span></div>
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* ── RIGHT SIDEBAR ── */}
      <div className={`sidebar-right state-${stdState}`}>
        {/* Daily risk card — visible in all states */}
        <div className="sidebar-daily-risk">
          <div className="sidebar-daily-risk-row">
            <span className="sidebar-daily-risk-label">Daily Risk Used</span>
            <span className="sidebar-daily-risk-val">
              {stdState === 'live' ? `−$${(47 + Math.max(0, -newLivePosition.pl)).toFixed(0)}` : '−$0'}
            </span>
          </div>
          <div className="daily-meter-bar" style={{marginBottom:4}}>
            <div className="daily-meter-fill" style={{width: stdState === 'live' ? '24%' : '0%'}}></div>
          </div>
          <div className="sidebar-daily-risk-pct">
            {stdState === 'live' ? '$47 of $200 · 24% consumed' : '$0 of $200 · clean slate'}
          </div>
        </div>

        {/* STATE: BRIEFING */}
        {stdState === 'briefing' && (
          <>
            <div className="ticket-header">
              <span>Today's Focus</span>
              <span className="ticket-status idle">PREP</span>
            </div>
            <div className="ticket-content">
              <div className="focus-sym">GOLD · XAUUSD</div>
              <div className="focus-bias"><span className="bias-bull">Bullish bias</span> — weak jobs data expected</div>
              <div style={{marginTop:14, borderTop:'1px solid var(--border)', paddingTop:12}}>
                <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-3)', marginBottom:8}}>Key Levels Today</div>
                {[['Resistance','2,650'],['Current','2,641'],['Support','2,625'],['NFP target','2,680+']].map(([l,v]) => (
                  <div key={l} className="level-row">
                    <span className="lbl">{l}</span>
                    <span className="val">{v}</span>
                  </div>
                ))}
              </div>
              <div style={{marginTop:16, padding:'10px 12px', background:'rgba(245,158,11,0.07)', border:'1px solid rgba(245,158,11,0.2)', borderRadius:8, fontSize:11, color:'var(--amber)', lineHeight:1.5}}>
                ⚡ NFP in 2h 14m — avoid new entries within 20 min of event
              </div>
              <button className="btn btn-secondary" style={{marginTop:16}} onClick={handleStartSession}>
                Open Chart →
              </button>
            </div>
          </>
        )}

        {/* STATE: WATCHLIST — idle ticket */}
        {stdState === 'watchlist' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--blue)'}}>GOLD — WATCHING</span>
              <span className="ticket-status watching">H1</span>
            </div>
            <div className="ticket-content">
              <div className="spread-banner">
                <div className="spread-banner-h">Spread <span className="mono" style={{color:'var(--green)'}}>0.20 pts ✓</span></div>
                <div className="spread-banner-row">
                  <span className="lbl">Bid</span>
                  <span className="bid mono">{(livePrice - 0.10).toFixed(2)}</span>
                </div>
                <div className="spread-banner-row">
                  <span className="lbl">Ask</span>
                  <span className="ask mono">{(livePrice + 0.10).toFixed(2)}</span>
                </div>
              </div>
              <button className="btn-paste-large pulsing" onClick={handlePasteSignal} style={{marginTop:4}}>
                Paste Signal <kbd>⌘V</kbd>
              </button>
              <div className="empty-foot">
                <span style={{color:'var(--text-3)', fontSize:11}}>or</span>
                <button className="btn btn-secondary" style={{marginTop:8, fontSize:12}} onClick={() => setStdState('order')}>
                  Place manual order
                </button>
              </div>
              <div style={{marginTop:18, paddingTop:14, borderTop:'1px solid var(--border)', fontSize:11, color:'var(--text-3)', lineHeight:1.5}}>
                <div style={{textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:600, marginBottom:6, color:'var(--text-2)'}}>Waiting for</div>
                H4 structure to confirm → H1 entry signal → paste or click below
              </div>
            </div>
          </>
        )}

        {/* STATE: ORDER — signal parsed, confirm */}
        {stdState === 'order' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--green)'}}>GOLD — SIGNAL READY</span>
              <span className="ticket-status active">PARSED</span>
            </div>
            <div className="ticket-content">
              <div className="signal-banner">
                <div className="ok">✓ Signal parsed</div>
                <div className="raw">"XAUUSD buy stop 2652 SL 2625 TP 2690"</div>
                <div className="from">via GoldMacro Daily · 1m ago</div>
              </div>
              <div className="bid-ask-row">
                <div className="bid-ask-cell sell">
                  <div className="lbl">SELL</div>
                  <div className="px mono">{(livePrice - 0.10).toFixed(2)}</div>
                </div>
                <div className="bid-ask-cell buy">
                  <div className="lbl">BUY</div>
                  <div className="px mono">{(livePrice + 0.10).toFixed(2)}</div>
                </div>
              </div>
              <div className="order-tabs">
                {['Market','Limit','Stop','Stop Limit'].map(t => {
                  const id = t.toLowerCase().replace(' ','-');
                  return <button key={t} className={`order-tab ${orderType === id ? 'active' : ''}`} onClick={() => setOrderType(id)}>{t}</button>;
                })}
              </div>
              <div className="field">
                <label className="field-label">Entry</label>
                <input className="field-input autofilled mono" defaultValue="2,632.00" />
              </div>
              <div className="field">
                <label className="field-label">Stop Loss</label>
                <input className="field-input autofilled mono" defaultValue="2,618.00" />
              </div>
              <div className="field">
                <label className="field-label">Take Profit</label>
                <input className="field-input autofilled mono" defaultValue="2,660.00" />
              </div>
              <div className="risk-badge-chip">
                <span className="dot"></span>
                <span>1% risk · $100 · 0.07 lots</span>
              </div>
              <div className="rr-line"><span>R : R</span><span className="v">1 : 2.0</span></div>
              <div className="rr-line"><span>Spread</span><span className="v" style={{color:'var(--green)'}}>0.20 pts ✓</span></div>
              <button className="btn btn-buy pulsing" style={{marginTop:14, fontSize:14}} onClick={handleConfirm}>
                CONFIRM BUY GOLD
              </button>
              <button className="btn-cancel-soft" onClick={() => setStdState('watchlist')}>Cancel signal</button>
            </div>
          </>
        )}

        {/* STATE: LIVE — position management */}
        {stdState === 'live' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--green)'}}>● GOLD · LONG · OPEN</span>
              <span className="ticket-status running">RUNNING</span>
            </div>
            <div className="ticket-content">
              <div className={`posmgmt-pl ${newLivePosition.pl >= 0 ? 'pos' : 'neg'}`} style={{marginTop:4, marginBottom:6}}>
                {newLivePosition.pl >= 0 ? '+' : '−'}${Math.abs(newLivePosition.pl).toFixed(2)}
              </div>
              <div className="pos-r-chip">
                <span className="r-value">{rValue >= 0 ? '+' : ''}{rValue.toFixed(1)}R</span>
                <span className="r-sep">·</span>
                <span className="r-time">in trade</span>
              </div>
              <div className="risk-badge-chip" style={{marginBottom:8}}>
                <span className="dot"></span>
                <span>Deployed: $100 (1%)</span>
              </div>
              <div className="posmgmt-row"><span className="lbl">Entry</span><span className="val mono">2,632.00</span></div>
              <div className="posmgmt-row"><span className="lbl">Current</span><span className="val mono">{livePrice.toFixed(2)}</span></div>
              <div className="posmgmt-row"><span className="lbl">Lots</span><span className="val mono">0.07</span></div>
              <div style={{borderTop:'1px solid var(--border)', paddingTop:10}}>
                <div className="posmgmt-row"><span className="lbl">Stop Loss</span><span className="val mono">2,618.00 ✎</span></div>
                <div className="posmgmt-row"><span className="lbl">Take Profit</span><span className="val mono">2,660.00 ✎</span></div>
                <div className="posmgmt-row"><span className="lbl">R : R</span><span className="val mono">1 : 2.0</span></div>
              </div>
              <div className="posmgmt-actions">
                <button>Partial ½</button>
                <button>Breakeven</button>
                <button>Trail SL</button>
                <button className="flatten" onClick={handleFlatten}>Flatten</button>
              </div>
            </div>
          </>
        )}

        {/* STATE: JOURNAL — streak + share */}
        {stdState === 'journal' && (
          <>
            <div className="ticket-header">
              <span style={{color:'var(--green)'}}>Session Complete</span>
              <span className="ticket-status active">DONE</span>
            </div>
            <div className="ticket-content">
              <div className="session-streak-card">
                <div className="streak-big">🔥</div>
                <div className="streak-info">
                  <div className="num">5 sessions</div>
                  <div className="sub">green in a row · PB: 8</div>
                </div>
              </div>
              <div style={{marginBottom:12, padding:'10px 12px', background:'var(--panel-3)', border:'1px solid var(--border)', borderRadius:8}}>
                <div style={{fontSize:10, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:4}}>Today's P&L</div>
                <div style={{fontFamily:'JetBrains Mono,monospace', fontSize:22, fontWeight:800, color:'var(--green)'}}>+$196.00</div>
                <div style={{fontSize:11, color:'var(--text-2)', marginTop:2}}>1 trade · 100% win rate</div>
              </div>
              <button className="btn btn-buy" style={{marginBottom:8}}>📤 Share to Feed</button>
              <button className="btn btn-secondary" onClick={() => setStdState('watchlist')}>
                New Session
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.StandardMode = StandardMode;