// markets.jsx — Markets Home mobile (2 variants) + desktop

// ╔══════════════════════════════════════════════════════════════╗
// ║  MARKETS A — Editorial / Magazine Layout                     ║
// ║  Top of crowd → hero stock card → top predictors leaderboard ║
// ╚══════════════════════════════════════════════════════════════╝
function MarketsA({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Top app bar */}
      <TopAppBar t={t} hasNotifications={true} />
      {/* Screen title block */}
      <div style={{ padding: '6px 16px 8px' }}>
        <div style={{ fontSize: 11, color: t.textDim, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
          Sun, May 17
        </div>
        <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>
          Markets
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Indices strip */}
        <div style={{ display: 'flex', gap: 8, padding: '8px 16px 4px', overflowX: 'auto' }}>
          {[
            { name: 'DAX', val: '18,742', chg: '+0.42%', up: true },
            { name: 'S&P 500', val: '5,478', chg: '−0.18%', up: false },
            { name: 'NASDAQ', val: '17,224', chg: '−0.31%', up: false },
            { name: 'BTC', val: '€68,420', chg: '+1.84%', up: true },
          ].map(i => (
            <Card key={i.name} t={t} pad={12} radius={12} style={{ minWidth: 110 }}>
              <div style={{ fontSize: 10.5, color: t.textDim, fontWeight: 600, letterSpacing: '0.02em' }}>{i.name}</div>
              <div style={{ fontFamily: SW_MONO, fontSize: 14, fontWeight: 600, marginTop: 3, letterSpacing: '-0.01em' }}>{i.val}</div>
              <div style={{ fontFamily: SW_MONO, fontSize: 11, fontWeight: 600, marginTop: 2,
                color: i.up ? t.up : t.down }}>{i.chg}</div>
            </Card>
          ))}
        </div>

        {/* Hero — Top of crowd today */}
        <div style={{ padding: '14px 16px 6px' }}>
          <div style={{ fontSize: 11, color: t.textDim, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>
            Top of the crowd · This week
          </div>
          <Card t={t} pad={18} radius={20} style={{ position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140,
              borderRadius: 999, background: t.upSoft, filter: 'blur(36px)', opacity: 0.7 }} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <Ticker symbol="AMZN" size={44} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>Amazon.com</div>
                  <div style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim, marginTop: 2 }}>AMZN · NASDAQ</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: SW_MONO, fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>€227.35</div>
                  <div style={{ fontFamily: SW_MONO, fontSize: 11, color: t.down, fontWeight: 600, marginTop: 1 }}>−1.50%</div>
                </div>
              </div>
              {/* Spark with prediction dots — the dots ARE the sentiment indicator */}
              <div style={{ marginLeft: -4, marginRight: -4, marginBottom: 10 }}>
                <MiniChart data={SAMPLE.amzn} w={310} h={56} color={t.up} stroke={1.8} fillOpacity={0.10}
                  markers={PREDICTIONS_AMZN.filter((_, i) => i % 2 === 0)} markerSize={3.5}
                  upColor={t.up} downColor={t.down} bgColor={t.surface} />
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 11, color: t.textDim, fontFamily: SW_MONO, letterSpacing: '0.02em' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: t.up, display: 'inline-block' }} />
                    232 Einschätzungen
                  </span>
                </span>
                <UpsidePotential t={t} current={227.35} target={253.48} size="md" barWidth={42} />
              </div>
            </div>
          </Card>
        </div>

        {/* Top Buy this week */}
        <SectionHeader t={t} label="Top Buy · This week" cta="See all" />
        <HorizScroll>
          {[
            { sym: 'NVDA', name: 'NVIDIA', price: 193.88, chg: -0.4, tp: 211.48, votes: 178, dir: 'up' },
            { sym: 'GOOGL', name: 'Alphabet', price: 341.45, chg: 1.2, tp: 339.04, votes: 142, dir: 'down' },
            { sym: 'AMZN', name: 'Amazon', price: 227.35, chg: -1.5, tp: 253.48, votes: 214, dir: 'up' },
            { sym: 'AAPL', name: 'Apple', price: 198.20, chg: 0.6, tp: 215.00, votes: 156, dir: 'up' },
          ].map(s => (
            <PickCard key={s.sym} t={t} stock={s} kind="buy" />
          ))}
        </HorizScroll>

        {/* Top Sell this week */}
        <SectionHeader t={t} label="Top Sell · This week" cta="See all" />
        <HorizScroll>
          {[
            { sym: 'PFI', name: 'Prudential', price: 87.70, chg: -2.1, tp: 79.37, votes: 41, dir: 'down' },
            { sym: 'WHR', name: 'Whirlpool', price: 34.42, chg: -1.4, tp: 28.04, votes: 38, dir: 'down' },
            { sym: 'SCCO', name: 'Southern Cu', price: 152.10, chg: -0.8, tp: 129.26, votes: 35, dir: 'down' },
          ].map(s => (
            <PickCard key={s.sym} t={t} stock={s} kind="sell" />
          ))}
        </HorizScroll>

        {/* Top predictors leaderboard */}
        <SectionHeader t={t} label="Top predictors" cta="Leaderboard" />
        <div style={{ padding: '0 16px' }}>
          <Card t={t} pad={0} radius={16}>
            {[
              { rank: 1, name: 'PapaSmurf', acc: 78.2, badge: '🏆', streak: 7 },
              { rank: 2, name: 'djuddi888', acc: 72.2, streak: 5 },
              { rank: 3, name: 'fenjal', acc: 71.6, streak: 4 },
              { rank: 4, name: 'Melius', acc: 71.4, streak: 3 },
            ].map((u, i) => (
              <div key={u.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 13, color: t.textDim, width: 18,
                  fontWeight: 700, textAlign: 'center' }}>{u.rank}</span>
                <Avatar name={u.name} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600 }}>{u.name}</span>
                    {u.badge && <span style={{ fontSize: 11 }}>{u.badge}</span>}
                  </div>
                  <div style={{ fontSize: 11, color: t.textDim, marginTop: 1, display: 'flex', gap: 8 }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                      {Icon.flame(t.down, 10)}
                      <span style={{ fontFamily: SW_MONO, fontWeight: 600 }}>{u.streak} streak</span>
                    </span>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: SW_MONO, fontSize: 14, fontWeight: 700, color: t.up }}>{u.acc}%</div>
                  <div style={{ fontSize: 10, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 1 }}>Accuracy</div>
                </div>
              </div>
            ))}
          </Card>
        </div>

        {/* Banner */}
        <div style={{ padding: '16px 16px 0' }}>
          <Card t={t} pad={18} radius={16} style={{
            background: dark ? '#0f1820' : '#0a0f15', color: '#fff',
            border: 'none', display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>
                Many tell you what to buy.
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', color: '#00D26A', marginTop: 2 }}>
                We measure who is right.
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
                Sharewise tracks 2.4M predictions since 2007.
              </div>
            </div>
            <div style={{ padding: '8px 14px', borderRadius: 10, background: '#00D26A', color: '#0a0a0a',
              fontWeight: 700, fontSize: 12 }}>Join Club</div>
          </Card>
        </div>
      </div>

      <BottomTabs t={t} active="markets" />
    </div>
  );
}

function SectionHeader({ t, label, cta }) {
  return (
    <div style={{ padding: '20px 16px 10px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
      <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{label}</span>
      {cta && <span style={{ fontSize: 12, color: t.accent, fontWeight: 600 }}>{cta} →</span>}
    </div>
  );
}

function HorizScroll({ children }) {
  return (
    <div style={{ display: 'flex', gap: 10, padding: '0 16px', overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
      {children}
    </div>
  );
}

function PickCard({ t, stock, kind }) {
  const dayUp = stock.chg > 0;
  return (
    <div style={{
      minWidth: 168, padding: '14px 14px', borderRadius: 14, background: t.surface,
      border: `0.5px solid ${t.border}`, scrollSnapAlign: 'start',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      {/* Just ticker + sym */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Ticker symbol={stock.sym} size={28} />
        <span style={{ fontFamily: SW_MONO, fontSize: 12.5, fontWeight: 700, letterSpacing: '0.02em' }}>{stock.sym}</span>
      </div>
      {/* Price + chg */}
      <div>
        <div style={{ fontFamily: SW_MONO, fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
          €{stock.price.toFixed(2)}
        </div>
        <div style={{ fontFamily: SW_MONO, fontSize: 11.5, color: dayUp ? t.up : t.down, fontWeight: 600, marginTop: 4 }}>
          {dayUp ? '+' : ''}{stock.chg}%
        </div>
      </div>
      {/* Upside bar + % */}
      <UpsidePotential t={t} current={stock.price} target={stock.tp} size="sm" barWidth={50} />
    </div>
  );
}

// ╔══════════════════════════════════════════════════════════════╗
// ║  MARKETS B — Dense pro layout (TradingView vibes)            ║
// ╚══════════════════════════════════════════════════════════════╝
function MarketsB({ dark }) {
  const t = useTheme(dark);
  const stocks = [
    { sym: 'AMZN', name: 'Amazon.com', price: 227.35, chg: -1.50, sent: 97, dir: 'buy', tp: 253.48 },
    { sym: 'NVDA', name: 'NVIDIA', price: 193.88, chg: -0.42, sent: 89, dir: 'buy', tp: 211.48 },
    { sym: 'GOOGL', name: 'Alphabet A', price: 341.45, chg: 1.21, sent: 84, dir: 'buy', tp: 339.04 },
    { sym: 'AAPL', name: 'Apple', price: 198.20, chg: 0.58, sent: 76, dir: 'buy', tp: 215.00 },
    { sym: 'MSFT', name: 'Microsoft', price: 422.10, chg: -0.32, sent: 91, dir: 'buy', tp: 460.00 },
    { sym: 'GILD', name: 'Gilead', price: 78.45, chg: 0.84, sent: 68, dir: 'buy', tp: 92.00 },
    { sym: 'PFI', name: 'Prudential', price: 87.70, chg: -2.10, sent: 18, dir: 'sell', tp: 79.37 },
    { sym: 'WHR', name: 'Whirlpool', price: 34.42, chg: -1.40, sent: 22, dir: 'sell', tp: 28.04 },
  ];
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      <TopAppBar t={t} hasNotifications={true} />
      <div style={{ padding: '6px 16px 10px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Markets</span>
        <Chip t={t} size="xs" color={t.textDim} bg={t.chip} style={{ marginLeft: 6 }}>
          LIVE
        </Chip>
      </div>

      {/* Segmented */}
      <div style={{ padding: '6px 16px 12px', display: 'flex', gap: 16, borderBottom: `0.5px solid ${t.border}` }}>
        {['For you', 'Top Buy', 'Top Sell', 'Trending', 'Earnings'].map((s, i) => (
          <span key={s} style={{
            paddingBottom: 8, fontSize: 13, fontWeight: i === 1 ? 700 : 500,
            color: i === 1 ? t.text : t.textMuted, letterSpacing: '-0.005em',
            borderBottom: i === 1 ? `2px solid ${t.up}` : '2px solid transparent',
            marginBottom: -0.5,
          }}>{s}</span>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Time filter */}
        <div style={{ padding: '14px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 4, fontFamily: SW_MONO, fontSize: 11 }}>
            {['1D','1W','1M','3M','1Y','ALL'].map((p, i) => (
              <span key={p} style={{
                padding: '5px 10px', borderRadius: 6, fontWeight: 600,
                background: i === 1 ? t.chip : 'transparent',
                color: i === 1 ? t.text : t.textDim,
              }}>{p}</span>
            ))}
          </div>
          <span style={{ fontSize: 11, color: t.textDim, fontWeight: 500 }}>Sort: Sentiment ↓</span>
        </div>

        {/* Column header */}
        <div style={{
          padding: '8px 16px', display: 'grid',
          gridTemplateColumns: '1.2fr 0.9fr 0.7fr 1fr',
          fontSize: 10, color: t.textDim, letterSpacing: '0.06em',
          textTransform: 'uppercase', fontWeight: 600,
          borderTop: `0.5px solid ${t.border}`,
          borderBottom: `0.5px solid ${t.border}`,
          background: t.bgSubtle,
        }}>
          <span>Ticker</span>
          <span style={{ textAlign: 'right' }}>Preis</span>
          <span style={{ textAlign: 'right' }}>Change</span>
          <span style={{ textAlign: 'right' }}>Potenzial</span>
        </div>

        {/* Rows */}
        {stocks.map((s, i) => {
          const dayUp = s.chg > 0;
          return (
            <div key={s.sym} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 0.9fr 0.7fr 1fr',
              alignItems: 'center', padding: '14px 16px',
              borderBottom: `0.5px solid ${t.border}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                <Ticker symbol={s.sym} size={30} />
                <span style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 700, letterSpacing: '0.02em' }}>{s.sym}</span>
              </div>
              <div style={{ textAlign: 'right' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.01em' }}>€{s.price.toFixed(2)}</span>
              </div>
              <div style={{ textAlign: 'right' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 12.5, fontWeight: 700,
                  color: dayUp ? t.up : t.down }}>{dayUp ? '+' : ''}{s.chg}%</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <UpsidePotential t={t} current={s.price} target={s.tp} size="sm" barWidth={36} />
              </div>
            </div>
          );
        })}
      </div>

      <BottomTabs t={t} active="markets" />
    </div>
  );
}

Object.assign(window, { MarketsA, MarketsB });