// dash-invest.jsx — The Bitcoin Financial OS · Invest tab
// Marketplace of every public Bitcoin-adjacent instrument + Robo portfolio builder

const INVEST_CATEGORIES = [
  { id: 'all',       label: 'All',            icon: 'grid' },
  { id: 'etf',       label: 'Spot ETFs',      icon: 'stack' },
  { id: 'cc',        label: 'Covered Calls',  icon: 'circle' },
  { id: 'mstr',      label: 'Treasury Co.',   icon: 'vault' },
  { id: 'miner',     label: 'Miners',         icon: 'pick' },
  { id: 'trust',     label: 'Trusts',         icon: 'dome' },
  { id: 'futures',   label: 'Futures',        icon: 'bolt' },
  { id: 'options',   label: 'Options',        icon: 'diamond' },
  { id: 'infra',     label: 'Infrastructure', icon: 'chip' },
  { id: 'intl',      label: 'International',  icon: 'globe' },
];

const INVEST_TICKERS = [
  // ═══ SPOT BTC ETFs ═══════════════════════════════════════════════════
  { sym: 'IBIT',  name: 'iShares Bitcoin Trust',           issuer: 'BlackRock',       cat: 'etf', price: 41.82,  chg: +2.1,  aum: '$54.2B', fee: '0.25%' },
  { sym: 'FBTC',  name: 'Fidelity Wise Origin Bitcoin',    issuer: 'Fidelity',        cat: 'etf', price: 64.18,  chg: +2.0,  aum: '$19.8B', fee: '0.25%' },
  { sym: 'ARKB',  name: 'ARK 21Shares Bitcoin',            issuer: 'ARK · 21Shares',  cat: 'etf', price: 75.31,  chg: +2.2,  aum: '$3.2B',  fee: '0.21%' },
  { sym: 'BITB',  name: 'Bitwise Bitcoin ETF',             issuer: 'Bitwise',         cat: 'etf', price: 46.02,  chg: +2.1,  aum: '$2.7B',  fee: '0.20%' },
  { sym: 'HODL',  name: 'VanEck Bitcoin Trust',            issuer: 'VanEck',          cat: 'etf', price: 89.14,  chg: +2.0,  aum: '$720M',  fee: '0.20%' },
  { sym: 'BRRR',  name: 'Valkyrie Bitcoin Fund',           issuer: 'Valkyrie',        cat: 'etf', price: 22.67,  chg: +1.9,  aum: '$610M',  fee: '0.25%' },
  { sym: 'EZBC',  name: 'Franklin Bitcoin ETF',            issuer: 'Franklin Tpl.',   cat: 'etf', price: 44.20,  chg: +2.0,  aum: '$430M',  fee: '0.19%' },

  // ═══ TRUSTS (Grayscale family) ══════════════════════════════════════
  { sym: 'GBTC',  name: 'Grayscale Bitcoin Trust',         issuer: 'Grayscale',       cat: 'trust', price: 62.48, chg: +1.8,  aum: '$18.4B', fee: '1.50%' },
  { sym: 'BTC',   name: 'Grayscale Bitcoin Mini Trust',    issuer: 'Grayscale',       cat: 'trust', price: 48.91, chg: +2.1,  aum: '$4.1B',  fee: '0.15%' },
  { sym: 'GDLC',  name: 'Grayscale Digital Large Cap',     issuer: 'Grayscale',       cat: 'trust', price: 38.22, chg: +1.4,  aum: '$520M',  fee: '2.50%' },

  // ═══ COVERED CALL / YIELD BTC ETFs ══════════════════════════════════
  { sym: 'YBIT',  name: 'YieldMax Bitcoin Option Income',  issuer: 'YieldMax',        cat: 'cc', price: 18.44, chg: +0.8, aum: '$110M', fee: '0.99%', yield: '46.2%' },
  { sym: 'BTCI',  name: 'NEOS Bitcoin High Income',        issuer: 'NEOS',            cat: 'cc', price: 41.07, chg: +0.9, aum: '$220M', fee: '0.68%', yield: '28.7%' },
  { sym: 'MAXI',  name: 'Simplify Bitcoin Strategy PLUS',  issuer: 'Simplify',        cat: 'cc', price: 22.10, chg: +1.1, aum: '$95M',  fee: '1.29%', yield: '12.4%' },
  { sym: 'BITO',  name: 'ProShares Bitcoin Strategy',      issuer: 'ProShares',       cat: 'cc', price: 23.68, chg: +1.9, aum: '$2.1B', fee: '0.95%' },
  { sym: 'BITU',  name: 'ProShares Ultra Bitcoin · 2x',    issuer: 'ProShares',       cat: 'cc', price: 42.77, chg: +3.8, aum: '$820M', fee: '0.95%' },
  { sym: 'BITX',  name: 'Volatility Shares 2x Bitcoin',    issuer: 'Vol Shares',      cat: 'cc', price: 58.14, chg: +3.9, aum: '$2.6B', fee: '1.85%' },

  // ═══ TREASURY COMPANIES ═════════════════════════════════════════════
  { sym: 'MSTR',  name: 'MicroStrategy',                   issuer: '214k BTC · $14.6B cost', cat: 'mstr', price: 1480.20, chg: +5.1, mcap: '$42B' },
  { sym: 'MSTU',  name: 'Defiance Daily MSTR 2x',          issuer: 'Defiance ETF',    cat: 'mstr', price: 32.44, chg: +10.2, aum: '$1.6B', fee: '1.29%' },
  { sym: 'MSTX',  name: 'T-Rex 2x Long MSTR',              issuer: 'T-Rex',           cat: 'mstr', price: 28.10, chg: +10.1, aum: '$1.8B', fee: '1.05%' },
  { sym: 'MSTY',  name: 'YieldMax MSTR Option Income',     issuer: 'YieldMax',        cat: 'mstr', price: 24.88, chg: +1.8,  aum: '$2.2B', fee: '0.99%', yield: '85.2%' },
  { sym: 'TSLA',  name: 'Tesla · 11,509 BTC treasury',     issuer: 'Tesla',           cat: 'mstr', price: 241.55, chg: +1.8, mcap: '$768B' },
  { sym: 'SMLR',  name: 'Semler Scientific',               issuer: '2,321 BTC treasury', cat: 'mstr', price: 38.90, chg: +2.4, mcap: '$320M' },
  { sym: 'BOYAA', name: 'Boyaa Interactive · HK',          issuer: '3,183 BTC treasury', cat: 'mstr', price: 1.42, chg: +1.1, mcap: '$450M' },

  // ═══ MINERS ═════════════════════════════════════════════════════════
  { sym: 'MARA',  name: 'Marathon Digital',                issuer: '40+ EH/s · TX & ND',  cat: 'miner', price: 18.42, chg: +4.7, mcap: '$5.8B' },
  { sym: 'RIOT',  name: 'Riot Platforms',                  issuer: '31 EH/s · TX',        cat: 'miner', price: 9.14,  chg: +4.9, mcap: '$2.7B' },
  { sym: 'CLSK',  name: 'CleanSpark',                      issuer: '32 EH/s · GA',        cat: 'miner', price: 12.66, chg: +3.8, mcap: '$3.1B' },
  { sym: 'HUT',   name: 'Hut 8 Mining',                    issuer: '9.2 EH/s · NY·TX·NE', cat: 'miner', price: 11.20, chg: -0.6, mcap: '$1.1B' },
  { sym: 'CIFR',  name: 'Cipher Mining',                   issuer: '13.5 EH/s',           cat: 'miner', price: 4.68,  chg: +3.4, mcap: '$1.6B' },
  { sym: 'BTBT',  name: 'Bit Digital',                     issuer: '2.5 EH/s',            cat: 'miner', price: 3.04,  chg: +2.8, mcap: '$580M' },
  { sym: 'WULF',  name: 'TeraWulf',                        issuer: '8.1 EH/s',            cat: 'miner', price: 4.22,  chg: +5.2, mcap: '$1.5B' },
  { sym: 'BITF',  name: 'Bitfarms',                        issuer: '11 EH/s · ASIC fleet',cat: 'miner', price: 2.18,  chg: +1.9, mcap: '$900M' },
  { sym: 'IREN',  name: 'Iris Energy',                     issuer: '10 EH/s · hydro',     cat: 'miner', price: 9.80,  chg: +4.1, mcap: '$1.8B' },
  { sym: 'CORZ',  name: 'Core Scientific',                 issuer: '19 EH/s · AI + BTC',  cat: 'miner', price: 10.40, chg: +3.2, mcap: '$2.9B' },

  // ═══ INFRASTRUCTURE / EXCHANGES ═════════════════════════════════════
  { sym: 'COIN',  name: 'Coinbase',                        issuer: 'Exchange · custody',  cat: 'infra', price: 238.70, chg: +3.2, mcap: '$58B' },
  { sym: 'HOOD',  name: 'Robinhood Markets',               issuer: 'Broker · crypto desk',cat: 'infra', price: 24.88, chg: +2.1, mcap: '$22B' },
  { sym: 'CIFR',  name: 'Cipher Mining',                   issuer: 'ASIC infra',          cat: 'infra', price: 4.68,  chg: +3.4, mcap: '$1.6B' },
  { sym: 'CANG',  name: 'Canaan Creative',                 issuer: 'ASIC manufacturer',   cat: 'infra', price: 1.48,  chg: +2.9, mcap: '$270M' },
  { sym: 'BLOK',  name: 'Amplify Transformational Data',   issuer: 'Blockchain ETF',      cat: 'infra', price: 45.10, chg: +1.8, aum: '$980M', fee: '0.71%' },
  { sym: 'DAPP',  name: 'VanEck Digital Transformation',   issuer: 'Digital asset ETF',   cat: 'infra', price: 11.22, chg: +2.0, aum: '$110M', fee: '0.51%' },

  // ═══ FUTURES ════════════════════════════════════════════════════════
  { sym: 'BTC 1M',  name: 'CME Bitcoin Futures · front',   issuer: 'CME · 5 BTC notional',cat: 'futures', price: 68_612, chg: +2.1, openInt: '24.2k' },
  { sym: 'MBT 1M',  name: 'CME Micro Bitcoin · front',     issuer: 'CME · 0.1 BTC',       cat: 'futures', price: 68_605, chg: +2.1, openInt: '18.8k' },
  { sym: 'BTC 3M',  name: 'CME Bitcoin Futures · quarterly', issuer: 'CME · 5 BTC',       cat: 'futures', price: 69_840, chg: +2.0, openInt: '6.1k' },

  // ═══ OPTIONS ════════════════════════════════════════════════════════
  { sym: 'IBIT 45C', name: 'IBIT · $45 Call · Jun exp',    issuer: 'OCC listed',          cat: 'options', price: 1.82, chg: +8.4, openInt: '142k' },
  { sym: 'IBIT 40P', name: 'IBIT · $40 Put · Jun exp',     issuer: 'OCC listed',          cat: 'options', price: 1.11, chg: -4.2, openInt: '98k' },
  { sym: 'MSTR 1500C', name: 'MSTR · $1,500 Call · Jun',   issuer: 'OCC listed',          cat: 'options', price: 84.20, chg: +12.1, openInt: '8.4k' },
  { sym: 'MSTR 1200P', name: 'MSTR · $1,200 Put · Jun',    issuer: 'OCC listed',          cat: 'options', price: 42.10, chg: -6.8, openInt: '12.1k' },

  // ═══ INTERNATIONAL ══════════════════════════════════════════════════
  { sym: 'BTCC.B',  name: 'Purpose Bitcoin ETF',           issuer: 'Purpose · Canada',    cat: 'intl', price: 10.80, chg: +2.0, aum: 'C$2.1B', fee: '1.00%' },
  { sym: 'BITB.CN', name: 'Bitbank Canadian Miner ETF',    issuer: 'Horizons · Canada',   cat: 'intl', price: 14.22, chg: +3.1, aum: 'C$180M', fee: '0.65%' },
  { sym: 'BTCE',    name: '21Shares Bitcoin Core ETP',     issuer: '21Shares · Germany',  cat: 'intl', price: 58.40, chg: +2.0, aum: '€1.9B',  fee: '0.21%' },
  { sym: 'ABTC',    name: 'CoinShares Physical Bitcoin',   issuer: 'CoinShares · Swiss',  cat: 'intl', price: 74.22, chg: +2.1, aum: '$2.4B',  fee: '0.25%' },
  { sym: '2800',    name: 'Harvest Bitcoin Spot ETF',      issuer: 'Harvest · HK',        cat: 'intl', price: 8.92,  chg: +1.9, aum: 'HK$1.2B',fee: '0.30%' },
];

// ═══ CATEGORY ICON ═══════════════════════════════════════════════════════
const CAT_ICON = (name, c = 'currentColor') => {
  const p = { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'grid':   return <svg {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>;
    case 'stack':  return <svg {...p}><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>;
    case 'circle': return <svg {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg>;
    case 'vault':  return <svg {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M12 9v-1M12 16v-1M15 12h1M8 12h1"/></svg>;
    case 'pick':   return <svg {...p}><path d="M14 2l8 8-3 3-8-8zM11 5L3 13l3 3 8-8M6 16l-4 6M9 19l3 3"/></svg>;
    case 'dome':   return <svg {...p}><path d="M3 21h18M4 21V10a8 8 0 0116 0v11M8 21V13M12 21V10M16 21V13"/></svg>;
    case 'bolt':   return <svg {...p}><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>;
    case 'diamond':return <svg {...p}><path d="M12 2L2 9l10 13 10-13z"/><path d="M2 9h20M8 9l4 13M16 9l-4 13"/></svg>;
    case 'chip':   return <svg {...p}><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/></svg>;
    case 'globe':  return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18"/></svg>;
    default: return null;
  }
};

// ═══ MINI SPARKLINE ══════════════════════════════════════════════════════
function Spark({ positive, seed = 0 }) {
  const pts = React.useMemo(() => {
    const arr = []; let v = 50;
    for (let i = 0; i < 20; i++) { v += (Math.sin(i * 0.8 + seed) + (Math.random() - 0.5)) * 3; arr.push(v); }
    if (positive) arr[arr.length - 1] = Math.max(...arr) + 2;
    else arr[arr.length - 1] = Math.min(...arr) - 2;
    return arr;
  }, [positive, seed]);
  const min = Math.min(...pts), max = Math.max(...pts), r = max - min || 1;
  const path = pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${(i / 19) * 48} ${24 - ((v - min) / r) * 20 - 2}`).join(' ');
  return (
    <svg width="48" height="24" viewBox="0 0 48 24" style={{ flexShrink: 0 }}>
      <path d={path} fill="none" stroke={positive ? '#10B981' : '#EF4444'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ═══ TICKER ROW ══════════════════════════════════════════════════════════
function TickerRow({ t, seed, onClick }) {
  const positive = t.chg >= 0;
  const priceFmt = t.price >= 1000 ? `$${t.price.toLocaleString('en-US', { maximumFractionDigits: 2 })}` : `$${t.price.toFixed(2)}`;
  return (
    <button onClick={onClick} style={{
      width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
      padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: '1px solid rgba(255,255,255,0.04)', textAlign: 'left',
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
        background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: t.sym.length > 4 ? 8 : 10, fontWeight: 700, color: '#fff', fontFamily: DASH_MONO, letterSpacing: '0.04em', textAlign: 'center', lineHeight: 1.1, padding: 2,
      }}>{t.sym}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.name}</div>
        <div style={{ fontSize: 10, color: 'rgba(245,245,247,0.5)', marginTop: 1, fontFamily: DASH_MONO, letterSpacing: '0.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {t.issuer}
          {t.aum && <span> · {t.aum}</span>}
          {t.fee && <span> · {t.fee}</span>}
          {t.yield && <span style={{ color: '#10B981' }}> · {t.yield} yield</span>}
          {t.mcap && <span> · {t.mcap}</span>}
          {t.openInt && <span> · OI {t.openInt}</span>}
        </div>
      </div>
      <Spark positive={positive} seed={seed}/>
      <div style={{ textAlign: 'right', flexShrink: 0, minWidth: 62 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', fontFamily: DASH_MONO }}>{priceFmt}</div>
        <div style={{ fontSize: 10, color: positive ? '#10B981' : '#EF4444', fontFamily: DASH_MONO, fontWeight: 600 }}>
          {positive ? '+' : ''}{t.chg.toFixed(1)}%
        </div>
      </div>
    </button>
  );
}

// ═══ ROBO ADVISOR WALKTHROUGH ═══════════════════════════════════════════
const ROBO_RISKS = [
  { id: 'conservative', label: 'Conservative', sub: 'Mostly spot ETFs + yield', color: '#10B981',
    mix: [{ cat: 'etf', pct: 45, label: 'Spot ETFs' }, { cat: 'cc', pct: 30, label: 'Covered Call Income' }, { cat: 'trust', pct: 15, label: 'Trusts' }, { cat: 'infra', pct: 10, label: 'Infrastructure' }] },
  { id: 'balanced', label: 'Balanced', sub: 'ETFs + MSTR + some miners', color: '#3B82F6',
    mix: [{ cat: 'etf', pct: 35, label: 'Spot ETFs' }, { cat: 'mstr', pct: 25, label: 'Treasury Cos.' }, { cat: 'miner', pct: 15, label: 'Miners' }, { cat: 'cc', pct: 15, label: 'Yield' }, { cat: 'infra', pct: 10, label: 'Infrastructure' }] },
  { id: 'growth', label: 'Growth', sub: 'MSTR + leveraged + miners', color: '#FF9F0A',
    mix: [{ cat: 'mstr', pct: 35, label: 'Treasury Cos. (incl. 2x)' }, { cat: 'miner', pct: 25, label: 'Miners' }, { cat: 'etf', pct: 20, label: 'Spot ETFs' }, { cat: 'options', pct: 12, label: 'Long Calls' }, { cat: 'infra', pct: 8, label: 'Infrastructure' }] },
  { id: 'degen', label: 'Max BTC Beta', sub: 'Leveraged & derivatives', color: '#EF4444',
    mix: [{ cat: 'mstr', pct: 30, label: 'MSTR + 2x MSTR' }, { cat: 'options', pct: 25, label: 'Long-dated Calls' }, { cat: 'futures', pct: 20, label: 'Futures · rolled' }, { cat: 'miner', pct: 15, label: 'Small-cap miners' }, { cat: 'cc', pct: 10, label: '2x Leveraged ETF' }] },
];

function RoboFlow({ onClose, btcPrice }) {
  const [step, setStep] = React.useState(0);
  const [risk, setRisk] = React.useState(null);
  const [amount, setAmount] = React.useState(25000);
  const [horizon, setHorizon] = React.useState('5+');
  const [income, setIncome] = React.useState(false);

  const catLabel = { etf: 'Spot ETFs', cc: 'Covered Calls', mstr: 'Treasury Co.', miner: 'Miners', trust: 'Trusts', futures: 'Futures', options: 'Options', infra: 'Infrastructure', intl: 'International' };

  const steps = ['How much', 'Time horizon', 'Income?', 'Risk', 'Portfolio'];

  const pick = (r) => { setRisk(r); setStep(4); };
  const close = () => onClose();

  return (
    <div onClick={step === 0 ? close : undefined} style={{
      position: 'absolute', inset: 0, zIndex: 60,
      background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'flex-end', animation: 'waOverlayIn 0.25s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', height: '94%', overflowY: 'auto',
        background: '#0a0a0f', borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
        padding: '14px 18px 28px',
        animation: 'waSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 16px' }}/>

        {/* Progress */}
        <div style={{ display: 'flex', gap: 4, marginBottom: 18 }}>
          {steps.map((_, i) => (
            <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i <= step ? '#FF9F0A' : 'rgba(255,255,255,0.08)', transition: 'background 0.3s' }}/>
          ))}
        </div>

        <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: '#FF9F0A', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>Robo Advisor · Step {step + 1} of 5</div>
        <div style={{ fontFamily: DASH_DISPLAY, fontSize: 26, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginBottom: 6 }}>{steps[step]}</div>

        {step === 0 && (
          <>
            <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 18 }}>How much would you like to allocate? You can add more any time.</div>
            <div style={{ fontFamily: DASH_DISPLAY, fontSize: 42, fontWeight: 700, color: '#fff', letterSpacing: '-0.04em', marginBottom: 6 }}>{fmtUsd(amount, { decimals: 0 })}</div>
            <div style={{ fontFamily: DASH_MONO, fontSize: 11, color: '#FF9F0A', marginBottom: 18 }}>≈ {(amount / btcPrice).toFixed(4)} BTC equivalent</div>
            <input type="range" min="1000" max="250000" step="1000" value={amount} onChange={e => setAmount(Number(e.target.value))} style={{ width: '100%', accentColor: '#FF9F0A', marginBottom: 18 }}/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 6, marginBottom: 20 }}>
              {[5000, 25000, 100000, 250000].map(v => (
                <button key={v} onClick={() => setAmount(v)} style={{ padding: '9px', borderRadius: 100, background: amount === v ? 'rgba(255,159,10,0.15)' : 'rgba(255,255,255,0.04)', border: amount === v ? '1px solid rgba(255,159,10,0.5)' : '1px solid rgba(255,255,255,0.08)', color: amount === v ? '#FF9F0A' : 'rgba(245,245,247,0.7)', fontSize: 11, fontWeight: 600, fontFamily: DASH_MONO, cursor: 'pointer' }}>{fmtUsd(v, { abbreviate: true, decimals: 0 })}</button>
              ))}
            </div>
            <button onClick={() => setStep(1)} style={{ width: '100%', padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Continue</button>
          </>
        )}

        {step === 1 && (
          <>
            <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 18 }}>How long until you might need this money?</div>
            <div style={{ display: 'grid', gap: 8, marginBottom: 20 }}>
              {[
                { v: '<1', l: 'Less than a year', s: 'Shorter picks, yield-tilted' },
                { v: '1-3', l: '1–3 years', s: 'Balanced, some volatility OK' },
                { v: '3-5', l: '3–5 years', s: 'Growth-tilted' },
                { v: '5+',  l: '5+ years', s: 'Max Bitcoin exposure' },
              ].map(o => (
                <button key={o.v} onClick={() => setHorizon(o.v)} style={{ padding: 14, borderRadius: 14, background: horizon === o.v ? 'rgba(255,159,10,0.12)' : 'rgba(255,255,255,0.03)', border: horizon === o.v ? '1px solid rgba(255,159,10,0.5)' : '1px solid rgba(255,255,255,0.08)', color: '#fff', textAlign: 'left', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{o.l}</div>
                    <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 2 }}>{o.s}</div>
                  </div>
                  {horizon === o.v && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF9F0A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
                </button>
              ))}
            </div>
            <button onClick={() => setStep(2)} style={{ width: '100%', padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Continue</button>
          </>
        )}

        {step === 2 && (
          <>
            <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 18 }}>Do you want monthly income from your Bitcoin position?</div>
            <div style={{ display: 'grid', gap: 8, marginBottom: 20 }}>
              {[
                { v: true,  l: 'Yes — tilt toward yield', s: 'Covered calls, MSTY, BTCI — 20–80% distributions' },
                { v: false, l: 'No — maximize total return', s: 'Growth from price only' },
              ].map(o => (
                <button key={String(o.v)} onClick={() => setIncome(o.v)} style={{ padding: 14, borderRadius: 14, background: income === o.v ? 'rgba(255,159,10,0.12)' : 'rgba(255,255,255,0.03)', border: income === o.v ? '1px solid rgba(255,159,10,0.5)' : '1px solid rgba(255,255,255,0.08)', color: '#fff', textAlign: 'left', cursor: 'pointer' }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{o.l}</div>
                  <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 2 }}>{o.s}</div>
                </button>
              ))}
            </div>
            <button onClick={() => setStep(3)} style={{ width: '100%', padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Continue</button>
          </>
        )}

        {step === 3 && (
          <>
            <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 18 }}>Pick a risk profile. We'll build a basket of real, publicly-traded Bitcoin-adjacent tickers.</div>
            <div style={{ display: 'grid', gap: 8 }}>
              {ROBO_RISKS.map(r => (
                <button key={r.id} onClick={() => pick(r)} style={{ padding: 16, borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', color: '#fff', textAlign: 'left', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <div style={{ width: 10, height: 10, borderRadius: '50%', background: r.color }}/>
                      <div style={{ fontSize: 15, fontWeight: 600 }}>{r.label}</div>
                    </div>
                    <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)' }}>{r.sub}</div>
                    <div style={{ display: 'flex', height: 4, borderRadius: 2, marginTop: 8, overflow: 'hidden', background: 'rgba(255,255,255,0.05)' }}>
                      {r.mix.map((m, i) => <div key={i} style={{ flex: m.pct, background: r.color, opacity: 1 - i * 0.15 }}/>)}
                    </div>
                  </div>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(245,245,247,0.45)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
                </button>
              ))}
            </div>
          </>
        )}

        {step === 4 && risk && (
          <>
            <div style={{ fontSize: 12, color: 'rgba(245,245,247,0.55)', marginBottom: 16 }}>Your {risk.label.toLowerCase()} {fmtUsd(amount, { decimals: 0 })} portfolio:</div>

            {/* Donut viz */}
            <div style={{ padding: 18, borderRadius: 18, background: `linear-gradient(135deg, ${risk.color}15, rgba(255,255,255,0.02))`, border: `1px solid ${risk.color}30`, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <svg width="96" height="96" viewBox="0 0 36 36" style={{ transform: 'rotate(-90deg)', flexShrink: 0 }}>
                {(() => {
                  let acc = 0;
                  return risk.mix.map((m, i) => {
                    const dash = (m.pct / 100) * 100;
                    const el = <circle key={i} cx="18" cy="18" r="15.9155" fill="transparent" stroke={risk.color} strokeOpacity={1 - i * 0.15} strokeWidth="4" strokeDasharray={`${dash} ${100 - dash}`} strokeDashoffset={-acc}/>;
                    acc += dash; return el;
                  });
                })()}
              </svg>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: DASH_DISPLAY, fontSize: 22, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{fmtUsd(amount, { decimals: 0 })}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 2 }}>Across {risk.mix.length} categories · {risk.mix.reduce((s, m) => s + Math.ceil(m.pct / 8), 0)} positions</div>
                {income && <div style={{ marginTop: 8, padding: '3px 8px', borderRadius: 100, background: 'rgba(16,185,129,0.12)', border: '1px solid rgba(16,185,129,0.3)', color: '#10B981', fontSize: 9, fontFamily: DASH_MONO, fontWeight: 700, letterSpacing: '0.12em', display: 'inline-block' }}>INCOME TILT</div>}
              </div>
            </div>

            <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.45)', textTransform: 'uppercase', paddingLeft: 4, marginBottom: 8 }}>Allocation breakdown</div>
            <DashCard style={{ padding: 0, overflow: 'hidden', marginBottom: 14 }}>
              {risk.mix.map((m, i) => {
                const picks = INVEST_TICKERS.filter(t => t.cat === m.cat).slice(0, 3).map(t => t.sym).join(' · ');
                return (
                  <div key={i} style={{ padding: '12px 14px', borderBottom: i === risk.mix.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.04)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 8, height: 8, borderRadius: 2, background: risk.color, opacity: 1 - i * 0.15 }}/>
                        <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>{m.label}</div>
                      </div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: DASH_MONO }}>{m.pct}% · {fmtUsd(amount * m.pct / 100, { decimals: 0 })}</div>
                    </div>
                    <div style={{ fontSize: 10, color: 'rgba(245,245,247,0.5)', fontFamily: DASH_MONO, letterSpacing: '0.04em' }}>→ {picks}</div>
                  </div>
                );
              })}
            </DashCard>

            <div style={{ padding: 14, borderRadius: 14, background: 'rgba(16,185,129,0.06)', border: '1px solid rgba(16,185,129,0.2)', marginBottom: 14, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(16,185,129,0.2)', color: '#10B981', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.75)', lineHeight: 1.5 }}>
                Orders route through our prime broker and execute over 3 trading days. Rebalance monthly — we'll email you before any changes. 0.25% annual advisory fee.
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => setStep(3)} style={{ flex: 1, padding: 14, borderRadius: 100, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Change risk</button>
              <button onClick={close} style={{ flex: 2, padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Fund portfolio</button>
            </div>
          </>
        )}

        <style>{`input[type=range]::-webkit-slider-thumb { background: #FF9F0A; }`}</style>
      </div>
    </div>
  );
}

// ═══ TICKER DETAIL ═══════════════════════════════════════════════════════
function TickerDetail({ t, btcPrice, onClose }) {
  const positive = t.chg >= 0;
  const [qty, setQty] = React.useState(1);

  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 55,
      background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'flex-end', animation: 'waOverlayIn 0.25s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxHeight: '90%', overflowY: 'auto',
        background: '#0a0a0f', borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
        padding: '14px 18px 28px',
        animation: 'waSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 16px' }}/>

        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 16 }}>
          <div style={{ width: 52, height: 52, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: t.sym.length > 4 ? 10 : 14, fontWeight: 700, color: '#fff', fontFamily: DASH_MONO, letterSpacing: '0.04em', textAlign: 'center', lineHeight: 1.1, padding: 2, flexShrink: 0 }}>{t.sym}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: DASH_DISPLAY, fontSize: 20, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{t.name}</div>
            <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 2 }}>{t.issuer}</div>
          </div>
        </div>

        <div style={{ fontFamily: DASH_DISPLAY, fontSize: 36, fontWeight: 700, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 4 }}>
          ${t.price.toLocaleString('en-US', { maximumFractionDigits: 2 })}
        </div>
        <div style={{ fontSize: 13, color: positive ? '#10B981' : '#EF4444', fontFamily: DASH_MONO, fontWeight: 600, marginBottom: 14 }}>{positive ? '+' : ''}{t.chg.toFixed(1)}% today</div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 16 }}>
          {[
            t.aum && { l: 'AUM', v: t.aum },
            t.mcap && { l: 'Market cap', v: t.mcap },
            t.fee && { l: 'Expense', v: t.fee },
            t.yield && { l: 'Yield', v: t.yield, c: '#10B981' },
            t.openInt && { l: 'Open int.', v: t.openInt },
            { l: 'Category', v: catLabelOf(t.cat) },
          ].filter(Boolean).map((f, i) => (
            <div key={i} style={{ padding: '10px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
              <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.5)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 3 }}>{f.l}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: f.c || '#fff', fontFamily: DASH_MONO }}>{f.v}</div>
            </div>
          ))}
        </div>

        <div style={{ padding: 14, borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', marginBottom: 14 }}>
          <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.5)', textTransform: 'uppercase', marginBottom: 8 }}>Quick order</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <input type="number" value={qty} onChange={e => setQty(Math.max(0, Number(e.target.value)))} min="0" step="1" style={{ flex: 1, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: '#fff', fontSize: 18, fontFamily: DASH_MONO, fontWeight: 600, boxSizing: 'border-box' }}/>
            <div style={{ fontFamily: DASH_MONO, fontSize: 11, color: 'rgba(245,245,247,0.55)' }}>shares</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(245,245,247,0.7)', marginBottom: 10 }}>
            <span>Est. cost</span>
            <span style={{ color: '#fff', fontFamily: DASH_MONO, fontWeight: 600 }}>${(t.price * qty).toLocaleString('en-US', { maximumFractionDigits: 2 })}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <button style={{ padding: 14, borderRadius: 100, background: DASH_GRADIENT, border: 'none', color: '#000', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Buy</button>
            <button style={{ padding: 14, borderRadius: 100, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)', color: '#fff', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY }}>Sell</button>
          </div>
        </div>

        <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', lineHeight: 1.5, textAlign: 'center' }}>
          Executes at the next open through our prime broker. Settles T+2. No hidden markup.
        </div>
      </div>
    </div>
  );
}

function catLabelOf(cat) {
  return { etf: 'Spot ETF', cc: 'Covered Call', mstr: 'Treasury Co.', miner: 'Miner', trust: 'Trust', futures: 'Futures', options: 'Options', infra: 'Infrastructure', intl: 'International' }[cat] || cat;
}

// ═══ MAIN INVEST TAB ═════════════════════════════════════════════════════
function InvestTab({ btcPrice }) {
  const [cat, setCat] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const [roboOpen, setRoboOpen] = React.useState(false);
  const [picked, setPicked] = React.useState(null);

  const tickers = INVEST_TICKERS.filter(t => (cat === 'all' || t.cat === cat) && (query === '' || t.sym.toLowerCase().includes(query.toLowerCase()) || t.name.toLowerCase().includes(query.toLowerCase())));

  const counts = INVEST_CATEGORIES.map(c => ({ ...c, n: c.id === 'all' ? INVEST_TICKERS.length : INVEST_TICKERS.filter(t => t.cat === c.id).length }));

  // group headers for 'all' view (by category)
  const groups = cat === 'all' && query === ''
    ? INVEST_CATEGORIES.filter(c => c.id !== 'all').map(c => ({ ...c, items: INVEST_TICKERS.filter(t => t.cat === c.id) }))
    : null;

  return (
    <DashScreen modals={<>
      {roboOpen && <RoboFlow btcPrice={btcPrice} onClose={() => setRoboOpen(false)}/>}
      {picked && <TickerDetail t={picked} btcPrice={btcPrice} onClose={() => setPicked(null)}/>}
    </>}>
      <DashHeader subtitle="Invest" title="Bitcoin Marketplace"/>
      <div style={{ padding: '0 20px 16px' }}>

        {/* Hero — OS framing */}
        <DashCard glow style={{ padding: 18, marginBottom: 14, position: 'relative', overflow: 'hidden' }}>
          <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: '#FF9F0A', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>The Bitcoin Financial OS</div>
          <div style={{ fontFamily: DASH_DISPLAY, fontSize: 22, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.15, marginBottom: 10, maxWidth: '85%' }}>
            Every publicly traded Bitcoin instrument, in one place.
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 14 }}>
            <Stat v={INVEST_TICKERS.length} l="tickers"/>
            <StatDot/>
            <Stat v={INVEST_CATEGORIES.length - 1} l="categories"/>
            <StatDot/>
            <Stat v="24/7" l="market hours"/>
          </div>
          <button onClick={() => setRoboOpen(true)} style={{ width: '100%', padding: '14px', borderRadius: 100, background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: DASH_DISPLAY, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/><circle cx="12" cy="12" r="4"/></svg>
            Let Robo build you a portfolio
          </button>
          <div style={{ position: 'absolute', right: -20, bottom: -30, fontSize: 140, fontFamily: DASH_DISPLAY, fontWeight: 800, color: 'rgba(255,255,255,0.03)', lineHeight: 1, pointerEvents: 'none' }}>₿</div>
        </DashCard>

        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 12 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(245,245,247,0.4)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search IBIT, MSTR, MARA, Grayscale…" style={{ width: '100%', padding: '12px 14px 12px 36px', borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: '#fff', fontSize: 13, boxSizing: 'border-box', outline: 'none' }}/>
        </div>

        {/* Category chips */}
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginBottom: 14, paddingBottom: 4, marginLeft: -20, marginRight: -20, paddingLeft: 20, paddingRight: 20, scrollbarWidth: 'none' }}>
          {counts.map(c => (
            <button key={c.id} onClick={() => setCat(c.id)} style={{
              padding: '8px 12px', borderRadius: 100, whiteSpace: 'nowrap',
              background: cat === c.id ? 'rgba(255,159,10,0.15)' : 'rgba(255,255,255,0.04)',
              border: cat === c.id ? '1px solid rgba(255,159,10,0.5)' : '1px solid rgba(255,255,255,0.08)',
              color: cat === c.id ? '#FF9F0A' : 'rgba(245,245,247,0.7)',
              fontSize: 12, fontWeight: 500, cursor: 'pointer', flexShrink: 0,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              {CAT_ICON(c.icon, cat === c.id ? '#FF9F0A' : 'rgba(245,245,247,0.55)')}
              {c.label}
              <span style={{ opacity: 0.6, fontFamily: DASH_MONO, fontSize: 10 }}>{c.n}</span>
            </button>
          ))}
        </div>

        {/* Tickers list — grouped or flat */}
        {groups ? (
          groups.map(g => (
            <div key={g.id} style={{ marginBottom: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, paddingLeft: 4 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.55)', textTransform: 'uppercase' }}>
                  {CAT_ICON(g.icon, 'rgba(245,245,247,0.55)')}
                  {g.label}
                  <span style={{ opacity: 0.6 }}>· {g.items.length}</span>
                </div>
                <button onClick={() => setCat(g.id)} style={{ background: 'transparent', border: 'none', color: '#FF9F0A', fontSize: 11, fontWeight: 500, cursor: 'pointer' }}>See all</button>
              </div>
              <DashCard style={{ padding: 0, overflow: 'hidden' }}>
                {g.items.slice(0, 4).map((t, i) => (
                  <TickerRow key={t.sym + i} t={t} seed={i} onClick={() => setPicked(t)}/>
                ))}
              </DashCard>
            </div>
          ))
        ) : tickers.length === 0 ? (
          <DashCard style={{ padding: 24, textAlign: 'center' }}>
            <div style={{ fontSize: 13, color: 'rgba(245,245,247,0.55)' }}>No tickers match "{query}".</div>
          </DashCard>
        ) : (
          <>
            <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.55)', textTransform: 'uppercase', paddingLeft: 4, marginBottom: 8 }}>{tickers.length} result{tickers.length !== 1 ? 's' : ''}</div>
            <DashCard style={{ padding: 0, overflow: 'hidden' }}>
              {tickers.map((t, i) => <TickerRow key={t.sym + i} t={t} seed={i} onClick={() => setPicked(t)}/>)}
            </DashCard>
          </>
        )}

        <div style={{ textAlign: 'center', fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.3)', letterSpacing: '0.15em', marginTop: 24, textTransform: 'uppercase' }}>
          Not investment advice · Execution via prime broker · 0% commission
        </div>
      </div>
    </DashScreen>
  );
}

function Stat({ v, l }) {
  return (
    <div>
      <div style={{ fontFamily: DASH_DISPLAY, fontSize: 20, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1 }}>{v}</div>
      <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.55)', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 3 }}>{l}</div>
    </div>
  );
}
function StatDot() { return <div style={{ width: 3, height: 3, borderRadius: '50%', background: 'rgba(255,255,255,0.2)' }}/>; }

Object.assign(window, { InvestTab });