// stock-detail.jsx — 3 mobile variants of the Stock Detail screen + 1 desktop

// ╔══════════════════════════════════════════════════════════════╗
// ║  VARIANT A — Community-Hero                                  ║
// ║  Sentiment bar massive; price + chart secondary.             ║
// ║  Sharewise USP front-and-center.                             ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailA({ 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 bar — minimal: back + ticker + kebab */}
      <div style={{ padding: '54px 16px 8px', display: 'flex', alignItems: 'center', gap: 12 }}>
        {Icon.back(t.text, 22)}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1 }}>
          <Ticker symbol="AMZN" size={28} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>Amazon.com</div>
            <div style={{ fontSize: 10.5, color: t.textDim, fontFamily: SW_MONO, letterSpacing: '0.02em' }}>AMZN · NASDAQ</div>
          </div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 18, display: 'flex',
          alignItems: 'center', justifyContent: 'center' }}>
          {ActIcon.more(t.text, 20)}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Price */}
        <div style={{ padding: '12px 20px 14px' }}>
          <div style={{ fontFamily: SW_MONO, fontSize: 40, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>
            €227.35
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <span style={{ color: t.down, fontFamily: SW_MONO, fontSize: 13, fontWeight: 600 }}>−€3.45</span>
            <Chip t={t} color={t.down} bg={t.downSoft} size="sm">
              {Icon.arrowDown(t.down, 10)}1.50%
            </Chip>
            <span style={{ color: t.textDim, fontSize: 11, marginLeft: 'auto' }}>Today · 17:32 CET</span>
          </div>
        </div>

        {/* ────────  COMMUNITY HERO  ──────── */}
        <div style={{ margin: '8px 16px 0', padding: 18, borderRadius: 22,
          background: t.surface, border: `0.5px solid ${t.border}`,
          position: 'relative', overflow: 'hidden' }}>
          {/* glow */}
          <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180,
            borderRadius: 999, background: t.upSoft, filter: 'blur(40px)', opacity: 0.6 }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 14 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: t.up }} />
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em',
                color: t.textMuted, textTransform: 'uppercase' }}>Community Verdict</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 56, fontWeight: 700,
                letterSpacing: '-0.04em', color: t.up, lineHeight: 1 }}>97%</span>
              <span style={{ fontSize: 18, fontWeight: 600, color: t.up, letterSpacing: '-0.01em' }}>Buy</span>
            </div>
            <div style={{ fontSize: 13, color: t.textMuted, marginBottom: 16, letterSpacing: '-0.005em' }}>
              from <span style={{ color: t.text, fontWeight: 600 }}>232 investors</span> in the last 30 days
            </div>

            <SentimentBar buy={214} sell={6} t={t} height={10} />

            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11 }}>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600, color: t.up }}>214</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Buy</span></span>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600, color: t.textMuted }}>12</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Hold</span></span>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600, color: t.down }}>6</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Sell</span></span>
            </div>

            {/* Inline Predict CTAs — lives inside the community card, where it belongs */}
            <div style={{ display: 'flex', gap: 8, marginTop: 16, paddingTop: 16,
              borderTop: `0.5px solid ${t.border}` }}>
              <div style={{
                flex: 1, padding: '11px 0', borderRadius: 10,
                background: t.up, color: '#fff', fontWeight: 700, fontSize: 13, letterSpacing: '0.01em',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>{Icon.arrowUp('#fff', 13)}Predict Buy</div>
              <div style={{
                flex: 1, padding: '11px 0', borderRadius: 10,
                background: 'transparent', color: t.text, fontWeight: 600, fontSize: 13, letterSpacing: '0.01em',
                border: `0.5px solid ${t.borderStrong}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>{Icon.arrowDown(t.text, 13)}Predict Sell</div>
            </div>
          </div>
        </div>

        {/* Target price callout */}
        <div style={{ margin: '12px 16px 0', display: 'flex', gap: 8 }}>
          <Card t={t} pad={14} radius={14} style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>Target</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>€253.48</div>
            <div style={{ fontSize: 11, color: t.up, fontWeight: 600, marginTop: 2 }}>+11.28% upside</div>
          </Card>
          <Card t={t} pad={14} radius={14} style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>Confidence</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>8.4<span style={{ color: t.textDim, fontSize: 13 }}>/10</span></div>
            <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>Top 5% of all stocks</div>
          </Card>
        </div>

        {/* Mini chart */}
        <div style={{ padding: '18px 16px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Price · 1Y</span>
            <div style={{ display: 'flex', gap: 4, fontSize: 11, fontFamily: SW_MONO }}>
              {['1D','1W','1M','1Y','MAX'].map((p, i) => (
                <span key={p} style={{
                  padding: '4px 8px', borderRadius: 6,
                  background: i === 3 ? t.chip : 'transparent',
                  color: i === 3 ? t.text : t.textDim, fontWeight: 600,
                }}>{p}</span>
              ))}
            </div>
          </div>
          <Card t={t} pad={12} radius={14}>
            <MiniChart data={SAMPLE.amzn} w={310} h={120} color={t.up} stroke={2} fillOpacity={0.12}
              markers={PREDICTIONS_AMZN.filter(p => p.i >= 35)} markerSize={4.5}
              upColor={t.up} downColor={t.down} bgColor={t.surface} />
          </Card>
        </div>

        {/* Top contributors */}
        <div style={{ padding: '20px 16px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Top predictors on AMZN</span>
            <span style={{ fontSize: 11, color: t.accent, fontWeight: 600 }}>See all →</span>
          </div>
          <Card t={t} pad={0} radius={14}>
            {[
              { name: 'PapaSmurf', accuracy: '78%', tp: 268, pos: 'Buy', up: true, badge: '🏆' },
              { name: 'fenjal', accuracy: '71%', tp: 255, pos: 'Buy', up: true },
              { name: 'Melius', accuracy: '71%', tp: 248, pos: 'Buy', up: true },
            ].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' }}>
                <Avatar name={u.name} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{u.name}</span>
                    {u.badge && <span style={{ fontSize: 11 }}>{u.badge}</span>}
                  </div>
                  <div style={{ fontSize: 11, color: t.textDim, fontFamily: SW_MONO, letterSpacing: '0.01em', marginTop: 1 }}>
                    {u.accuracy} accuracy · 4y track
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <Chip t={t} color={t.up} bg={t.upSoft} size="xs">BUY</Chip>
                  <div style={{ fontFamily: SW_MONO, fontSize: 12, fontWeight: 600, marginTop: 4 }}>€{u.tp}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>

        {/* Pro & Kontra split card */}
        <div style={{ padding: '20px 16px 0' }}>
          <ProKontraCard t={t}
            ticker="AMZN"
            totalRatings={PROKONTRA_AMZN.totalRatings}
            pros={PROKONTRA_AMZN.pros}
            kontras={PROKONTRA_AMZN.kontras}
          />
        </div>
      </div>

      {/* No floating bar — actions live in header (⋯) + inside the community card */}

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

// ╔══════════════════════════════════════════════════════════════╗
// ║  VARIANT B — Chart-Hero with Sentiment Band                  ║
// ║  Robinhood-style: chart dominates, sentiment fused under it. ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailB({ 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' }}>
      <div style={{ padding: '54px 16px 6px', display: 'flex', alignItems: 'center', gap: 12 }}>
        {Icon.back(t.text, 22)}
        <span style={{ fontFamily: SW_MONO, fontSize: 12.5, fontWeight: 600, letterSpacing: '0.04em', color: t.textMuted }}>AMZN</span>
        <div style={{ flex: 1 }} />
        <div style={{ width: 36, height: 36, borderRadius: 18, display: 'flex',
          alignItems: 'center', justifyContent: 'center' }}>
          {ActIcon.more(t.text, 20)}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Hero name + price */}
        <div style={{ padding: '6px 20px 12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <Ticker symbol="AMZN" size={26} />
            <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em', color: t.textMuted }}>Amazon.com Inc.</span>
          </div>
          <div style={{ fontFamily: SW_MONO, fontSize: 48, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>
            €227<span style={{ color: t.textDim, fontWeight: 500 }}>.35</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
            <span style={{ color: t.down, fontFamily: SW_MONO, fontSize: 14, fontWeight: 600 }}>−€3.45 (1.50%)</span>
            <span style={{ color: t.textDim, fontSize: 12 }}>Today</span>
          </div>
        </div>

        {/* Big chart */}
        <div style={{ marginTop: 4, position: 'relative' }}>
          <MiniChart data={SAMPLE.amzn} w={370} h={170} color={t.down} stroke={2.2} fillOpacity={0.10}
            markers={PREDICTIONS_AMZN} markerSize={5}
            upColor={t.up} downColor={t.down} bgColor={t.bg} />
          {/* X-axis labels */}
          <div style={{ position: 'absolute', bottom: 6, left: 18, right: 18, display: 'flex',
            justifyContent: 'space-between', fontSize: 9.5, color: t.textDim, fontFamily: SW_MONO }}>
            <span>JUN</span><span>SEP</span><span>DEC</span><span>MAR</span><span>MAY</span>
          </div>
        </div>

        {/* time tabs */}
        <div style={{ padding: '8px 16px 0', display: 'flex', gap: 4, fontSize: 11, fontFamily: SW_MONO }}>
          {['1D','1W','1M','3M','1Y','MAX'].map((p, i) => (
            <div key={p} style={{
              flex: 1, padding: '6px 0', textAlign: 'center', borderRadius: 7,
              background: i === 4 ? t.chip : 'transparent',
              color: i === 4 ? t.text : t.textDim, fontWeight: 600, letterSpacing: '0.02em',
            }}>{p}</div>
          ))}
        </div>

        {/* Sentiment band — FUSED, full-width */}
        <div style={{ margin: '20px 16px 0', borderRadius: 18, overflow: 'hidden',
          border: `0.5px solid ${t.border}`, background: t.surface }}>
          {/* sentiment header strip */}
          <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ position: 'relative', width: 56, height: 56, flexShrink: 0 }}>
              {/* donut */}
              <svg viewBox="0 0 36 36" width="56" height="56">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none" stroke={t.downSoft} strokeWidth="3.5" />
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none" stroke={t.up} strokeWidth="3.5" strokeDasharray="97 100" strokeLinecap="round" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexDirection: 'column' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 14, fontWeight: 700, color: t.up }}>97%</span>
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>Crowd says <span style={{ color: t.up }}>Buy</span></div>
              <div style={{ fontSize: 11.5, color: t.textMuted, marginTop: 2 }}>232 predictions · Target €253.48</div>
            </div>
            <Chip t={t} color={t.up} bg={t.upSoft} size="md">+11.3%</Chip>
          </div>

          {/* avatar stack */}
          <div style={{ padding: '0 16px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ display: 'flex' }}>
              {['PapaSmurf','fenjal','Melius','djuddi','Alex'].map((n, i) => (
                <div key={n} style={{ marginLeft: i === 0 ? 0 : -8 }}>
                  <Avatar name={n} size={26} />
                </div>
              ))}
            </div>
            <span style={{ fontSize: 11.5, color: t.textMuted }}>
              <span style={{ color: t.text, fontWeight: 600 }}>PapaSmurf</span> and 213 others predict a rise
            </span>
          </div>

          {/* Inline Predict CTAs inside the sentiment band */}
          <div style={{ display: 'flex', gap: 0, borderTop: `0.5px solid ${t.border}` }}>
            <div style={{
              flex: 1, padding: '14px 0', textAlign: 'center',
              fontWeight: 700, fontSize: 13.5, color: t.up, letterSpacing: '0.01em',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>{Icon.arrowUp(t.up, 14)}Predict Buy</div>
            <div style={{ width: '0.5px', background: t.border }} />
            <div style={{
              flex: 1, padding: '14px 0', textAlign: 'center',
              fontWeight: 600, fontSize: 13.5, color: t.textMuted, letterSpacing: '0.01em',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>{Icon.arrowDown(t.textMuted, 14)}Predict Sell</div>
          </div>
        </div>

        {/* Metrics row */}
        <div style={{ padding: '16px 16px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {[
              { l: 'Mkt Cap', v: '€2.41T' },
              { l: 'P/E', v: '38.2' },
              { l: 'Div Yield', v: '0.00%' },
              { l: 'Day High', v: '€228.50' },
              { l: 'Day Low', v: '€224.45' },
              { l: '52W High', v: '€242.10' },
            ].map(m => (
              <div key={m.l} style={{ padding: '10px 12px', borderRadius: 10, background: t.surface,
                border: `0.5px solid ${t.border}` }}>
                <div style={{ fontSize: 10, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{m.l}</div>
                <div style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 600, marginTop: 3, letterSpacing: '-0.01em' }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* About */}
        <div style={{ padding: '20px 16px 0' }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>About Amazon</div>
          <div style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.55, letterSpacing: '-0.005em' }}>
            Amazon.com is one of the world's largest online retailers and cloud-computing providers.
            Founded 1994 by Jeff Bezos. <span style={{ color: t.accent, fontWeight: 500 }}>Read more</span>
          </div>
        </div>
      </div>

      {/* No floating bar — actions in header (⋯) + Predict CTAs in the sentiment band */}

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

// ╔══════════════════════════════════════════════════════════════╗
// ║  VARIANT C — Social Feed                                     ║
// ║  Each prediction is a card with rationale, like Public.com.  ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailC({ 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' }}>
      <div style={{ padding: '54px 16px 6px', display: 'flex', alignItems: 'center', gap: 12 }}>
        {Icon.back(t.text, 22)}
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Ticker symbol="AMZN" size={26} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.01em' }}>Amazon.com</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim, letterSpacing: '0.02em' }}>AMZN</div>
          </div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 18, display: 'flex',
          alignItems: 'center', justifyContent: 'center' }}>
          {ActIcon.more(t.text, 20)}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Compact price + sparkline */}
        <div style={{ padding: '10px 20px 16px', display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div>
            <div style={{ fontFamily: SW_MONO, fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>
              €227.35
            </div>
            <div style={{ marginTop: 4, color: t.down, fontFamily: SW_MONO, fontSize: 12, fontWeight: 600 }}>
              −€3.45 · 1.50%
            </div>
          </div>
          <div style={{ flex: 1, opacity: 0.85 }}>
            <Spark data={SAMPLE.amzn} w={140} h={50} color={t.down} />
          </div>
        </div>

        {/* Segmented switch — Posts = predictions + discussions merged */}
        <div style={{ padding: '0 16px 12px', display: 'flex', gap: 6 }}>
          {[
            { label: 'Posts', count: 232, active: true },
            { label: 'News', count: 48 },
            { label: 'About' },
          ].map((s, i) => (
            <div key={s.label} style={{
              padding: '7px 14px', borderRadius: 999,
              background: s.active ? t.text : 'transparent',
              color: s.active ? t.bg : t.textMuted,
              border: s.active ? 'none' : `0.5px solid ${t.border}`,
              fontSize: 12, fontWeight: 600, letterSpacing: '0.01em',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span>{s.label}</span>
              {s.count && <span style={{ fontFamily: SW_MONO, opacity: 0.6, fontSize: 11 }}>{s.count}</span>}
            </div>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{
            padding: '7px 12px', borderRadius: 999,
            border: `0.5px solid ${t.border}`,
            fontSize: 11, fontWeight: 600, color: t.textMuted,
            display: 'flex', alignItems: 'center', gap: 5,
          }}>
            <span style={{ width: 4, height: 4, borderRadius: 2, background: t.up }} />
            <span>Top</span>
          </div>
        </div>

        {/* Filter chips for Posts */}
        <div style={{ padding: '0 16px 10px', display: 'flex', gap: 6, overflowX: 'auto' }}>
          {['All', 'With prediction', 'Buy only', 'Sell only', 'Top predictors'].map((f, i) => (
            <span key={f} style={{
              padding: '5px 10px', borderRadius: 7,
              background: i === 0 ? t.chip : 'transparent',
              border: i === 0 ? 'none' : `0.5px solid ${t.border}`,
              fontSize: 11, fontWeight: 600,
              color: i === 0 ? t.text : t.textDim,
              whiteSpace: 'nowrap', flexShrink: 0,
            }}>{f}</span>
          ))}
        </div>

        {/* Compose strip — like a tweet composer, with optional prediction attach */}
        <div style={{ padding: '4px 12px 12px' }}>
          <div style={{
            padding: '10px 12px', borderRadius: 14, background: t.surface,
            border: `0.5px solid ${t.border}`,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <Avatar name="St" size={32} color={t.accent} />
            <div style={{ flex: 1, fontSize: 13, color: t.textDim, letterSpacing: '-0.005em' }}>
              Share your view on AMZN…
            </div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '5px 9px', borderRadius: 999,
              background: t.text, color: t.bg,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.02em',
            }}>{Icon.plus(t.bg, 11)}Predict</span>
          </div>
        </div>

        {/* Posts feed — top-level only. Replies live inside the thread view. */}
        <div style={{ padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {POSTS.filter(p => !p.replyTo).map((p, i) => (
            <PostCard key={i} t={t} post={p} />
          ))}
        </div>
      </div>

      {/* No floating bar */}

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

// ───────────────────────── Shared Desktop top nav ─────────────────────────
// Used by all three Desktop variants so the chrome is consistent.
function DesktopTopNav({ t, dark, active = 'Markets' }) {
  return (
    <div style={{
      height: 60, borderBottom: `0.5px solid ${t.border}`, background: t.bg,
      display: 'flex', alignItems: 'center', padding: '0 24px', gap: 28,
    }}>
      <SwLogo size={22} dark={dark} />
      <div style={{ display: 'flex', gap: 22, marginLeft: 18 }}>
        {['Markets','Community','News','Academy','Club'].map((n) => (
          <span key={n} style={{
            fontSize: 13.5, fontWeight: n === active ? 600 : 500,
            color: n === active ? t.text : t.textMuted, letterSpacing: '-0.005em',
          }}>{n}</span>
        ))}
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 12px', borderRadius: 10, background: t.surface,
        border: `0.5px solid ${t.border}`, width: 280 }}>
        {Icon.search(t.textDim, 14)}
        <span style={{ fontSize: 12.5, color: t.textDim }}>Search stocks, predictors…</span>
        <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim,
          padding: '2px 6px', borderRadius: 4, background: t.chip }}>⌘K</span>
      </div>
      {Icon.bell(t.textMuted, 18)}
      <Avatar name="St" size={30} color="#3B82F6" />
    </div>
  );
}

// Reusable price header (ticker + name + price + change + actions)
function DesktopPriceHeader({ t, showActions = true }) {
  return (
    <React.Fragment>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 18 }}>
        <Ticker symbol="AMZN" size={48} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Amazon.com, Inc.</div>
          <div style={{ fontFamily: SW_MONO, fontSize: 12, color: t.textDim, letterSpacing: '0.02em', marginTop: 3 }}>
            AMZN · NASDAQ · Diversified Retail · Large Cap
          </div>
        </div>
        {showActions && (
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
              border: `0.5px solid ${t.borderStrong}`, color: t.text }}>＋ Watchlist</div>
            <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
              background: t.text, color: t.bg }}>Trade</div>
          </div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
        <span style={{ fontFamily: SW_MONO, fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>
          €227.35
        </span>
        <Chip t={t} color={t.down} bg={t.downSoft} size="md">{Icon.arrowDown(t.down, 11)}1.50%</Chip>
        <span style={{ fontFamily: SW_MONO, fontSize: 14, color: t.down, fontWeight: 600 }}>−€3.45</span>
        <span style={{ marginLeft: 'auto', fontSize: 12, color: t.textDim }}>Tradegate · 15:05:26 CET</span>
      </div>
    </React.Fragment>
  );
}

// ╔══════════════════════════════════════════════════════════════╗
// ║  DESKTOP A — Community-Hero                                  ║
// ║  Massive Community Verdict block left, predictions in side.  ║
// ║  Desktop translation of mobile Variant A.                    ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailDesktopA({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, fontFamily: SW_FONT, minHeight: '100%' }}>
      <DesktopTopNav t={t} dark={dark} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 20, padding: 24, maxWidth: 1280, margin: '0 auto' }}>
        {/* Left column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Header card — price recap, no chart hero */}
          <Card t={t} pad={28} radius={20}>
            <DesktopPriceHeader t={t} />
          </Card>

          {/* COMMUNITY VERDICT — the hero on Variant A */}
          <Card t={t} pad={28} radius={20} style={{ position: 'relative', overflow: 'hidden' }}>
            {/* glow */}
            <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280,
              borderRadius: 999, background: t.upSoft, filter: 'blur(50px)', opacity: 0.6, pointerEvents: 'none' }} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                <div style={{ width: 8, height: 8, borderRadius: 4, background: t.up }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.08em',
                  color: t.textMuted, textTransform: 'uppercase' }}>Community Verdict</span>
                <span style={{ marginLeft: 'auto', fontSize: 12, color: t.textDim, fontFamily: SW_MONO }}>
                  letzte 30 Tage
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 96, fontWeight: 700,
                  letterSpacing: '-0.05em', color: t.up, lineHeight: 0.95 }}>97%</span>
                <span style={{ fontSize: 32, fontWeight: 600, color: t.up, letterSpacing: '-0.02em' }}>Buy</span>
              </div>
              <div style={{ fontSize: 15, color: t.textMuted, marginBottom: 22, letterSpacing: '-0.005em' }}>
                aus <span style={{ color: t.text, fontWeight: 600 }}>232 Einschätzungen</span> ·
                Kursziel <span style={{ color: t.text, fontWeight: 600, fontFamily: SW_MONO }}>€253.48</span>
                <span style={{ color: t.up, fontWeight: 600, fontFamily: SW_MONO, marginLeft: 6 }}>(+11.3%)</span>
              </div>

              <SentimentBar buy={214} sell={6} t={t} height={14} />

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', marginTop: 14, gap: 12 }}>
                {[
                  { n: 214, label: 'Buy', color: t.up },
                  { n: 12, label: 'Hold', color: t.textMuted },
                  { n: 6, label: 'Sell', color: t.down },
                ].map(s => (
                  <div key={s.label} style={{
                    padding: '12px 14px', borderRadius: 12,
                    background: t.bgSubtle, border: `0.5px solid ${t.border}`,
                  }}>
                    <div style={{ fontFamily: SW_MONO, fontSize: 22, fontWeight: 700, color: s.color, letterSpacing: '-0.02em' }}>
                      {s.n}
                    </div>
                    <div style={{ fontSize: 11.5, color: t.textDim, fontWeight: 600, letterSpacing: '0.02em', marginTop: 2 }}>
                      {s.label}
                    </div>
                  </div>
                ))}
              </div>

              {/* Predict CTAs inside the hero */}
              <div style={{ display: 'flex', gap: 10, marginTop: 20,
                paddingTop: 20, borderTop: `0.5px solid ${t.border}` }}>
                <div style={{
                  flex: 1, padding: '14px 0', borderRadius: 12,
                  background: t.up, color: '#fff', fontWeight: 700, fontSize: 14, letterSpacing: '0.01em',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                }}>{Icon.arrowUp('#fff', 14)}Predict Buy</div>
                <div style={{
                  flex: 1, padding: '14px 0', borderRadius: 12,
                  background: 'transparent', color: t.text, fontWeight: 600, fontSize: 14, letterSpacing: '0.01em',
                  border: `0.5px solid ${t.borderStrong}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                }}>{Icon.arrowDown(t.text, 14)}Predict Sell</div>
              </div>
            </div>
          </Card>

          {/* Chart — secondary on Variant A */}
          <Card t={t} pad={20} radius={16}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>Kursverlauf · 2 Jahre</span>
              <div style={{ display: 'flex', gap: 4, fontFamily: SW_MONO, fontSize: 11 }}>
                {['1D','1W','1M','3M','6M','1Y','2Y','5Y','MAX'].map((p, i) => (
                  <span key={p} style={{
                    padding: '5px 10px', borderRadius: 7,
                    background: i === 6 ? t.chip : 'transparent',
                    color: i === 6 ? t.text : t.textDim, fontWeight: 600,
                  }}>{p}</span>
                ))}
              </div>
            </div>
            <MiniChart data={SAMPLE.amzn} w={780} h={180} color={t.down} stroke={2} fillOpacity={0.10}
              markers={PREDICTIONS_AMZN} markerSize={5}
              upColor={t.up} downColor={t.down} bgColor={t.surface} />
          </Card>

          {/* Pro/Kontra — also a hero on Variant A */}
          <ProKontraCard t={t}
            ticker="AMZN"
            totalRatings={PROKONTRA_AMZN.totalRatings}
            pros={PROKONTRA_AMZN.pros}
            kontras={PROKONTRA_AMZN.kontras}
          />
        </div>

        {/* Right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Top predictors compact */}
          <Card t={t} pad={0} radius={16}>
            <div style={{ padding: '14px 16px', borderBottom: `0.5px solid ${t.border}` }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Top Predictors auf AMZN</div>
              <div style={{ fontSize: 11.5, color: t.textDim, marginTop: 2 }}>nach Trefferrate</div>
            </div>
            {[
              { name: 'PapaSmurf', acc: 78.2, dir: 'Buy', tp: 268, badge: '🏆' },
              { name: 'djuddi888', acc: 72.2, dir: 'Buy', tp: 261 },
              { name: 'fenjal', acc: 71.6, dir: 'Buy', tp: 255 },
              { name: 'Melius', acc: 71.4, dir: 'Buy', tp: 248 },
              { name: 'DerAlmanach', acc: 68.9, dir: 'Buy', tp: 244 },
            ].map((u, i) => {
              const up = u.dir === 'Buy';
              return (
                <div key={u.name} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '11px 16px',
                  borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
                }}>
                  <Avatar name={u.name} size={28} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ fontSize: 12.5, fontWeight: 600 }}>{u.name}</span>
                      {u.badge && <span style={{ fontSize: 11 }}>{u.badge}</span>}
                    </div>
                    <div style={{ fontSize: 10.5, color: t.textDim, fontFamily: SW_MONO, marginTop: 1 }}>
                      {u.acc}% Trefferrate
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <Chip t={t} color={t.up} bg={t.upSoft} size="xs">BUY</Chip>
                    <div style={{ fontFamily: SW_MONO, fontSize: 12, fontWeight: 600, marginTop: 3 }}>€{u.tp}</div>
                  </div>
                </div>
              );
            })}
          </Card>

          {/* Issue prediction widget */}
          <Card t={t} pad={18} radius={18}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: t.up }} />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: t.textMuted, textTransform: 'uppercase' }}>Deine Einschätzung</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 14 }}>
              <div style={{ padding: '12px 0', borderRadius: 10, background: t.up, color: '#fff',
                textAlign: 'center', fontWeight: 700, fontSize: 14 }}>↑ Buy</div>
              <div style={{ padding: '12px 0', borderRadius: 10, background: t.surface,
                border: `0.5px solid ${t.borderStrong}`,
                textAlign: 'center', fontWeight: 600, fontSize: 14, color: t.textMuted }}>↓ Sell</div>
            </div>
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 11, color: t.textDim, marginBottom: 6, letterSpacing: '0.02em' }}>KURSZIEL</div>
              <div style={{ padding: '10px 12px', borderRadius: 10, background: t.bgSubtle,
                border: `0.5px solid ${t.border}`, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 18, fontWeight: 600 }}>€253.48</span>
                <span style={{ color: t.up, fontFamily: SW_MONO, fontSize: 12, fontWeight: 600 }}>+11.28%</span>
              </div>
            </div>
            <div style={{ padding: '13px 16px', borderRadius: 12, background: t.text, color: t.bg,
              textAlign: 'center', fontWeight: 700, fontSize: 13.5, letterSpacing: '0.01em' }}>Einschätzung abgeben</div>
          </Card>
        </div>
      </div>
    </div>
  );
}

// Keep the old function name as alias for backward compatibility.
const StockDetailDesktop = StockDetailDesktopA;

// ╔══════════════════════════════════════════════════════════════╗
// ║  DESKTOP B — Chart-Hero (Robinhood-like)                     ║
// ║  Huge full-width chart, sentiment fused underneath.          ║
// ║  Desktop translation of mobile Variant B.                    ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailDesktopB({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, fontFamily: SW_FONT, minHeight: '100%' }}>
      <DesktopTopNav t={t} dark={dark} />

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Hero — Big chart with floating price */}
        <Card t={t} pad={0} radius={20} style={{ overflow: 'hidden' }}>
          {/* Header strip inside the hero card */}
          <div style={{ padding: '24px 28px 0', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
            <Ticker symbol="AMZN" size={48} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Amazon.com, Inc.</div>
              <div style={{ fontFamily: SW_MONO, fontSize: 12, color: t.textDim, letterSpacing: '0.02em', marginTop: 3 }}>
                AMZN · NASDAQ · Diversified Retail
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
                border: `0.5px solid ${t.borderStrong}`, color: t.text }}>＋ Watchlist</div>
              <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
                background: t.text, color: t.bg }}>Trade</div>
            </div>
          </div>

          {/* Massive price */}
          <div style={{ padding: '12px 28px 4px', display: 'flex', alignItems: 'baseline', gap: 16 }}>
            <span style={{ fontFamily: SW_MONO, fontSize: 88, fontWeight: 600, letterSpacing: '-0.05em', lineHeight: 0.95 }}>
              €227<span style={{ color: t.textDim, fontWeight: 500 }}>.35</span>
            </span>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 18, color: t.down, fontWeight: 600 }}>−€3.45 (1.50%)</span>
              <span style={{ fontSize: 12, color: t.textDim, marginTop: 2 }}>Heute · Tradegate · 15:05 CET</span>
            </div>
          </div>

          {/* HUGE CHART */}
          <div style={{ padding: '14px 8px 0' }}>
            <MiniChart data={SAMPLE.amzn} w={1216} h={360} color={t.down} stroke={2.4} fillOpacity={0.12}
              markers={PREDICTIONS_AMZN} markerSize={6}
              upColor={t.up} downColor={t.down} bgColor={t.surface} />
          </div>

          {/* Time tabs */}
          <div style={{ padding: '4px 28px 24px', display: 'flex', gap: 4, fontFamily: SW_MONO, fontSize: 12 }}>
            {['1D','1W','1M','3M','6M','1Y','2Y','5Y','MAX'].map((p, i) => (
              <span key={p} style={{
                flex: '0 0 auto', padding: '7px 14px', borderRadius: 8,
                background: i === 6 ? t.chip : 'transparent',
                color: i === 6 ? t.text : t.textDim, fontWeight: 600,
              }}>{p}</span>
            ))}
          </div>
        </Card>

        {/* Sentiment band — fused, full width */}
        <Card t={t} pad={0} radius={18} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 20 }}>
            {/* Donut */}
            <div style={{ position: 'relative', width: 96, height: 96, flexShrink: 0 }}>
              <svg viewBox="0 0 36 36" width="96" height="96">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none" stroke={t.downSoft} strokeWidth="3.5" />
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none" stroke={t.up} strokeWidth="3.5" strokeDasharray="97 100" strokeLinecap="round" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexDirection: 'column' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 22, fontWeight: 700, color: t.up, letterSpacing: '-0.02em' }}>97%</span>
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>
                Crowd sagt <span style={{ color: t.up }}>Buy</span>
              </div>
              <div style={{ fontSize: 13, color: t.textMuted, marginTop: 4 }}>
                232 Einschätzungen · Kursziel €253.48 (+11.3%)
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
                <div style={{ display: 'flex' }}>
                  {['PapaSmurf','fenjal','Melius','djuddi','Alex','DerAl'].map((n, i) => (
                    <div key={n} style={{ marginLeft: i === 0 ? 0 : -8 }}>
                      <Avatar name={n} size={26} />
                    </div>
                  ))}
                </div>
                <span style={{ fontSize: 12, color: t.textMuted }}>
                  <span style={{ color: t.text, fontWeight: 600 }}>PapaSmurf</span> und 213 andere erwarten einen Anstieg
                </span>
              </div>
            </div>
            {/* Predict CTAs */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0 }}>
              <div style={{
                padding: '11px 22px', borderRadius: 10,
                background: t.up, color: '#fff', fontWeight: 700, fontSize: 13.5, letterSpacing: '0.01em',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, minWidth: 160,
              }}>{Icon.arrowUp('#fff', 13)}Predict Buy</div>
              <div style={{
                padding: '11px 22px', borderRadius: 10,
                background: 'transparent', color: t.text, fontWeight: 600, fontSize: 13.5, letterSpacing: '0.01em',
                border: `0.5px solid ${t.borderStrong}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, minWidth: 160,
              }}>{Icon.arrowDown(t.text, 13)}Predict Sell</div>
            </div>
          </div>
        </Card>

        {/* Metrics grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {[
            { l: 'Mkt Cap', v: '€2.41T' },
            { l: 'P/E', v: '38.2' },
            { l: 'Div Yield', v: '0.00%' },
            { l: 'Day High', v: '€228.50' },
            { l: 'Day Low', v: '€224.45' },
            { l: '52W High', v: '€242.10' },
          ].map(m => (
            <div key={m.l} style={{ padding: '14px 16px', borderRadius: 12, background: t.surface,
              border: `0.5px solid ${t.border}` }}>
              <div style={{ fontSize: 10.5, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>{m.l}</div>
              <div style={{ fontFamily: SW_MONO, fontSize: 17, fontWeight: 600, marginTop: 5, letterSpacing: '-0.01em' }}>{m.v}</div>
            </div>
          ))}
        </div>

        {/* About Amazon */}
        <Card t={t} pad={24} radius={16}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>Über Amazon</div>
          <div style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.6, letterSpacing: '-0.005em', maxWidth: 800 }}>
            Amazon.com Inc. ist eines der weltweit größten Online-Handels- und Cloud-Computing-Unternehmen.
            Gegründet 1994 von Jeff Bezos in Seattle. Das Unternehmen betreibt den größten Online-Marktplatz
            der westlichen Welt sowie Amazon Web Services (AWS) als Cloud-Sparte mit hohen Margen.
            <span style={{ color: t.accent, fontWeight: 500, marginLeft: 4 }}>Mehr erfahren</span>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ╔══════════════════════════════════════════════════════════════╗
// ║  DESKTOP C — Posts-Feed (Twitter / Public.com)               ║
// ║  Feed dominates main column; stock context lives in sidebar. ║
// ║  Desktop translation of mobile Variant C.                    ║
// ╚══════════════════════════════════════════════════════════════╝
function StockDetailDesktopC({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, fontFamily: SW_FONT, minHeight: '100%' }}>
      <DesktopTopNav t={t} dark={dark} active="Community" />

      {/* Slim sticky stock-header strip — keeps ticker context while scrolling */}
      <div style={{
        borderBottom: `0.5px solid ${t.border}`, background: t.bg,
        padding: '14px 24px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 16 }}>
          <Ticker symbol="AMZN" size={36} />
          <div>
            <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>Amazon.com, Inc.</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim }}>AMZN · NASDAQ</div>
          </div>
          <div style={{ marginLeft: 22, display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ fontFamily: SW_MONO, fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>€227.35</span>
            <span style={{ fontFamily: SW_MONO, fontSize: 13, color: t.down, fontWeight: 600 }}>−1.50%</span>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600,
              border: `0.5px solid ${t.borderStrong}`, color: t.text }}>＋ Watchlist</div>
            <div style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600,
              background: t.text, color: t.bg }}>Trade</div>
          </div>
        </div>
      </div>

      {/* Tabs row */}
      <div style={{
        borderBottom: `0.5px solid ${t.border}`, padding: '0 24px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', gap: 28 }}>
          {[
            { l: 'Posts', count: 232, active: true },
            { l: 'News', count: 48 },
            { l: 'Financials' },
            { l: 'About' },
          ].map((tab, i) => (
            <div key={tab.l} style={{
              padding: '14px 0', fontSize: 13.5, fontWeight: tab.active ? 600 : 500,
              color: tab.active ? t.text : t.textMuted,
              borderBottom: tab.active ? `2px solid ${t.text}` : '2px solid transparent',
              marginBottom: -0.5,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span>{tab.l}</span>
              {tab.count && <span style={{ color: t.textDim, fontFamily: SW_MONO, fontSize: 11.5, fontWeight: 500 }}>{tab.count}</span>}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 720px) 360px',
        gap: 24, padding: 24, maxWidth: 1280, margin: '0 auto', justifyContent: 'center' }}>
        {/* Main column — feed */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Filter chips */}
          <div style={{ display: 'flex', gap: 6, paddingBottom: 4 }}>
            {['Alle', 'Mit Einschätzung', 'Nur Buy', 'Nur Sell', 'Top Predictors'].map((f, i) => (
              <span key={f} style={{
                padding: '7px 14px', borderRadius: 999,
                background: i === 0 ? t.chip : 'transparent',
                border: i === 0 ? 'none' : `0.5px solid ${t.border}`,
                fontSize: 12, fontWeight: 600,
                color: i === 0 ? t.text : t.textDim,
                whiteSpace: 'nowrap',
              }}>{f}</span>
            ))}
            <div style={{ flex: 1 }} />
            <span style={{
              padding: '7px 12px', borderRadius: 999,
              border: `0.5px solid ${t.border}`,
              fontSize: 11.5, fontWeight: 600, color: t.textMuted,
              display: 'flex', alignItems: 'center', gap: 5,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: t.up }} />
              <span>Sortierung: Top</span>
            </span>
          </div>

          {/* Compose strip */}
          <Card t={t} pad={14} radius={14} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Avatar name="St" size={38} color={t.accent} />
            <div style={{ flex: 1, fontSize: 14, color: t.textDim, letterSpacing: '-0.005em' }}>
              Was meinst du zu AMZN?
            </div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '8px 14px', borderRadius: 999,
              background: 'transparent', color: t.text,
              border: `0.5px solid ${t.borderStrong}`,
              fontSize: 12.5, fontWeight: 600,
            }}>+ Einschätzung anhängen</span>
            <span style={{
              padding: '8px 18px', borderRadius: 999,
              background: t.text, color: t.bg,
              fontSize: 12.5, fontWeight: 700, letterSpacing: '0.02em',
            }}>Posten</span>
          </Card>

          {/* Posts feed — reuse mobile PostCard */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {POSTS.filter(p => !p.replyTo).map((p, i) => (
              <PostCard key={i} t={t} post={p} />
            ))}
          </div>
        </div>

        {/* Sidebar — stock at a glance */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Mini chart card */}
          <Card t={t} pad={16} radius={16}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em',
              textTransform: 'uppercase', color: t.textMuted, marginBottom: 10 }}>
              Kursverlauf · 1J
            </div>
            <MiniChart data={SAMPLE.amzn} w={320} h={120} color={t.down} stroke={2} fillOpacity={0.10}
              markers={PREDICTIONS_AMZN.filter((_, i) => i % 2 === 0)} markerSize={4.5}
              upColor={t.up} downColor={t.down} bgColor={t.surface} />
            <div style={{ display: 'flex', gap: 3, marginTop: 10, fontFamily: SW_MONO, fontSize: 10.5 }}>
              {['1D','1W','1M','3M','1Y','MAX'].map((p, i) => (
                <span key={p} style={{
                  flex: 1, padding: '5px 0', textAlign: 'center', borderRadius: 6,
                  background: i === 4 ? t.chip : 'transparent',
                  color: i === 4 ? t.text : t.textDim, fontWeight: 600,
                }}>{p}</span>
              ))}
            </div>
          </Card>

          {/* Sentiment pill compact */}
          <Card t={t} pad={16} radius={16}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10 }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 32, fontWeight: 700, color: t.up, letterSpacing: '-0.03em', lineHeight: 1 }}>97%</span>
              <span style={{ fontSize: 13, color: t.up, fontWeight: 600 }}>Buy</span>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: t.textDim }}>n = 232</span>
            </div>
            <SentimentBar buy={214} sell={6} t={t} height={7} />
            <div style={{ marginTop: 12, padding: '11px 14px', borderRadius: 10,
              background: t.text, color: t.bg,
              textAlign: 'center', fontWeight: 700, fontSize: 13, letterSpacing: '0.01em' }}>
              Einschätzung abgeben
            </div>
          </Card>

          {/* Top 3 predictors */}
          <Card t={t} pad={0} radius={16}>
            <div style={{ padding: '12px 16px', borderBottom: `0.5px solid ${t.border}` }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Top Predictors</div>
              <div style={{ fontSize: 11, color: t.textDim, marginTop: 2 }}>auf AMZN</div>
            </div>
            {[
              { name: 'PapaSmurf', acc: 78.2, badge: '🏆' },
              { name: 'djuddi888', acc: 72.2 },
              { name: 'fenjal', acc: 71.6 },
            ].map((u, i) => (
              <div key={u.name} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px',
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <Avatar name={u.name} size={26} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 600 }}>{u.name}</span>
                    {u.badge && <span style={{ fontSize: 11 }}>{u.badge}</span>}
                  </div>
                  <div style={{ fontSize: 10.5, color: t.textDim, fontFamily: SW_MONO }}>
                    {u.acc}% Trefferrate
                  </div>
                </div>
                <span style={{ color: t.accent, fontSize: 11.5, fontWeight: 600 }}>＋</span>
              </div>
            ))}
          </Card>

          {/* Key metrics compact */}
          <Card t={t} pad={16} radius={16}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em',
              textTransform: 'uppercase', color: t.textMuted, marginBottom: 10 }}>
              Kennzahlen
            </div>
            {[
              { l: 'Marktkapitalisierung', v: '€2.41T' },
              { l: 'KGV', v: '38.2' },
              { l: 'Dividendenrendite', v: '0.00%' },
              { l: '52W Hoch', v: '€242.10' },
            ].map((m, i) => (
              <div key={m.l} style={{
                display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                padding: '8px 0',
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <span style={{ fontSize: 12, color: t.textMuted }}>{m.l}</span>
                <span style={{ fontFamily: SW_MONO, fontSize: 12.5, fontWeight: 600 }}>{m.v}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

// ╔══════════════════════════════════════════════════════════════╗
// ║  Legacy alias — earlier monolithic Desktop layout. Kept under║
// ║  this name only so old code paths don't error if they import ║
// ║  it. NOT referenced in the preview. Safe to delete once no   ║
// ║  external caller uses it.                                    ║
// ╚══════════════════════════════════════════════════════════════╝
function _StockDetailDesktopLegacyUnused({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, fontFamily: SW_FONT, minHeight: '100%' }}>
      {/* Top nav */}
      <div style={{
        height: 60, borderBottom: `0.5px solid ${t.border}`, background: t.bg,
        display: 'flex', alignItems: 'center', padding: '0 24px', gap: 28,
      }}>
        <SwLogo size={22} dark={dark} />
        <div style={{ display: 'flex', gap: 22, marginLeft: 18 }}>
          {['Markets','Community','News','Academy','Club'].map((n, i) => (
            <span key={n} style={{
              fontSize: 13.5, fontWeight: i === 0 ? 600 : 500,
              color: i === 0 ? t.text : t.textMuted, letterSpacing: '-0.005em',
            }}>{n}</span>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 12px', borderRadius: 10, background: t.surface,
          border: `0.5px solid ${t.border}`, width: 280 }}>
          {Icon.search(t.textDim, 14)}
          <span style={{ fontSize: 12.5, color: t.textDim }}>Search stocks, predictors…</span>
          <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim,
            padding: '2px 6px', borderRadius: 4, background: t.chip }}>⌘K</span>
        </div>
        {Icon.bell(t.textMuted, 18)}
        <Avatar name="St" size={30} color="#3B82F6" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 20, padding: 24, maxWidth: 1280, margin: '0 auto' }}>
        {/* Left column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Hero card */}
          <Card t={t} pad={28} radius={20}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 18 }}>
              <Ticker symbol="AMZN" size={48} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Amazon.com, Inc.</div>
                <div style={{ fontFamily: SW_MONO, fontSize: 12, color: t.textDim, letterSpacing: '0.02em', marginTop: 3 }}>
                  AMZN · NASDAQ · Diversified Retail · Large Cap
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
                  border: `0.5px solid ${t.borderStrong}`, color: t.text }}>＋ Watchlist</div>
                <div style={{ padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 600,
                  background: t.text, color: t.bg }}>Trade</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>
                €227.35
              </span>
              <Chip t={t} color={t.down} bg={t.downSoft} size="md">{Icon.arrowDown(t.down, 11)}1.50%</Chip>
              <span style={{ fontFamily: SW_MONO, fontSize: 14, color: t.down, fontWeight: 600 }}>−€3.45</span>
              <span style={{ marginLeft: 'auto', fontSize: 12, color: t.textDim }}>Tradegate · 15:05:26 CET</span>
            </div>

            {/* Big chart */}
            <div style={{ marginTop: 12 }}>
              <MiniChart data={SAMPLE.amzn} w={780} h={220} color={t.down} stroke={2} fillOpacity={0.10}
                markers={PREDICTIONS_AMZN} markerSize={6}
                upColor={t.up} downColor={t.down} bgColor={t.surface} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12,
              padding: '0 4px', fontSize: 11, color: t.textDim, fontFamily: SW_MONO }}>
              <span>JUL'24</span><span>OCT'24</span><span>JAN'25</span><span>APR'25</span><span>JUL'25</span><span>OCT'25</span><span>JAN'26</span><span>APR'26</span>
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 4, fontSize: 11.5, fontFamily: SW_MONO }}>
              {['1D','1W','1M','3M','6M','1Y','2Y','5Y','MAX'].map((p, i) => (
                <span key={p} style={{
                  padding: '6px 12px', borderRadius: 7,
                  background: i === 6 ? t.chip : 'transparent',
                  color: i === 6 ? t.text : t.textDim, fontWeight: 600,
                }}>{p}</span>
              ))}
            </div>
          </Card>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 24, borderBottom: `0.5px solid ${t.border}`, padding: '0 8px' }}>
            {['Posts','Financials','News','About'].map((s, i) => (
              <div key={s} style={{
                padding: '12px 0', fontSize: 13, fontWeight: i === 0 ? 600 : 500,
                color: i === 0 ? t.text : t.textMuted,
                borderBottom: i === 0 ? `2px solid ${t.text}` : '2px solid transparent',
                marginBottom: -0.5,
              }}>{s}{i === 0 && <span style={{ marginLeft: 6, color: t.textDim, fontFamily: SW_MONO, fontWeight: 500 }}>232</span>}</div>
            ))}
          </div>

          {/* Top predictors table */}
          <Card t={t} pad={0} radius={16}>
            <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Top predictors</div>
                <div style={{ fontSize: 12, color: t.textDim, marginTop: 2 }}>Members with the best track record on AMZN</div>
              </div>
              <div style={{ display: 'flex', gap: 6, fontFamily: SW_MONO, fontSize: 11 }}>
                {['1W','1M','3M','1Y','ALL'].map((p, i) => (
                  <span key={p} style={{
                    padding: '5px 10px', borderRadius: 7,
                    background: i === 3 ? t.chip : 'transparent',
                    color: i === 3 ? t.text : t.textDim, fontWeight: 600,
                  }}>{p}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr 90px 80px 100px 80px 70px',
              padding: '0 20px 8px', fontSize: 10.5, color: t.textDim,
              letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
              <span>#</span><span>Predictor</span><span>Accuracy</span><span>Position</span><span>Target</span><span>Δ</span><span style={{ textAlign: 'right' }}>Follow</span>
            </div>
            {[
              { n: 1, name: 'PapaSmurf', acc: 78.2, dir: 'Buy', tp: 268, badge: '🏆' },
              { n: 2, name: 'fenjal', acc: 71.6, dir: 'Buy', tp: 255 },
              { n: 3, name: 'Melius', acc: 71.4, dir: 'Buy', tp: 248 },
              { n: 4, name: 'djuddi888', acc: 72.2, dir: 'Buy', tp: 261 },
              { n: 5, name: 'DerAlmanach', acc: 68.9, dir: 'Buy', tp: 244 },
              { n: 6, name: 'WatchMen', acc: 65.1, dir: 'Hold', tp: 230 },
              { n: 7, name: 'Bankster', acc: 64.0, dir: 'Sell', tp: 195 },
            ].map(u => {
              const up = u.dir === 'Buy', dn = u.dir === 'Sell';
              const c = up ? t.up : dn ? t.down : t.textMuted;
              const delta = ((u.tp - 227.35) / 227.35 * 100).toFixed(1);
              return (
                <div key={u.name} style={{
                  display: 'grid', gridTemplateColumns: '24px 1fr 90px 80px 100px 80px 70px',
                  alignItems: 'center', padding: '12px 20px',
                  borderTop: `0.5px solid ${t.border}`, fontSize: 13,
                }}>
                  <span style={{ fontFamily: SW_MONO, color: t.textDim, fontSize: 12 }}>{u.n}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={u.name} size={28} />
                    <span style={{ fontWeight: 600 }}>{u.name}</span>
                    {u.badge && <span>{u.badge}</span>}
                  </span>
                  <span style={{ fontFamily: SW_MONO, fontWeight: 600 }}>{u.acc}%</span>
                  <Chip t={t} color={c} bg={up ? t.upSoft : dn ? t.downSoft : t.chip} size="xs">{u.dir.toUpperCase()}</Chip>
                  <span style={{ fontFamily: SW_MONO, fontWeight: 600 }}>€{u.tp}</span>
                  <span style={{ fontFamily: SW_MONO, color: c, fontWeight: 600 }}>{delta > 0 ? '+' : ''}{delta}%</span>
                  <span style={{ textAlign: 'right', color: t.accent, fontSize: 12, fontWeight: 600 }}>＋</span>
                </div>
              );
            })}
          </Card>
        </div>

        {/* Right column — prediction widget + crowd insights */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Issue prediction */}
          <Card t={t} pad={18} radius={18}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: t.up }} />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: t.textMuted, textTransform: 'uppercase' }}>Your prediction</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 14 }}>
              <div style={{ padding: '12px 0', borderRadius: 10, background: t.up, color: '#fff',
                textAlign: 'center', fontWeight: 700, fontSize: 14 }}>↑ Buy</div>
              <div style={{ padding: '12px 0', borderRadius: 10, background: t.surface,
                border: `0.5px solid ${t.borderStrong}`,
                textAlign: 'center', fontWeight: 600, fontSize: 14, color: t.textMuted }}>↓ Sell</div>
            </div>
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 11, color: t.textDim, marginBottom: 6, letterSpacing: '0.02em' }}>TARGET PRICE</div>
              <div style={{ padding: '10px 12px', borderRadius: 10, background: t.bgSubtle,
                border: `0.5px solid ${t.border}`, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 18, fontWeight: 600 }}>€253.48</span>
                <span style={{ color: t.up, fontFamily: SW_MONO, fontSize: 12, fontWeight: 600 }}>+11.28%</span>
              </div>
            </div>
            <div style={{ marginBottom: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: t.textDim, marginBottom: 6 }}>
                <span>CONFIDENCE</span>
                <span style={{ fontFamily: SW_MONO, color: t.text, fontWeight: 600 }}>8/10</span>
              </div>
              <div style={{ height: 6, background: t.chip, borderRadius: 3, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '80%',
                  background: t.up, borderRadius: 3 }} />
              </div>
            </div>
            <div style={{ padding: '13px 16px', borderRadius: 12, background: t.text, color: t.bg,
              textAlign: 'center', fontWeight: 700, fontSize: 13.5, letterSpacing: '0.01em' }}>Issue prediction</div>
          </Card>

          {/* Crowd verdict */}
          <Card t={t} pad={18} radius={18}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, letterSpacing: '-0.005em' }}>Crowd verdict</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
              <span style={{ fontFamily: SW_MONO, fontSize: 40, fontWeight: 700,
                color: t.up, letterSpacing: '-0.03em', lineHeight: 1 }}>97%</span>
              <span style={{ fontSize: 13, color: t.up, fontWeight: 600 }}>Buy</span>
              <span style={{ marginLeft: 'auto', fontSize: 11.5, color: t.textDim }}>n = 232</span>
            </div>
            <SentimentBar buy={214} sell={6} t={t} height={8} />
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11.5 }}>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600, color: t.up }}>214</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Buy</span></span>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600 }}>12</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Hold</span></span>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 600, color: t.down }}>6</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Sell</span></span>
            </div>
          </Card>

          {/* Pro & Kontra */}
          <ProKontraCard t={t}
            ticker="AMZN"
            totalRatings={PROKONTRA_AMZN.totalRatings}
            pros={PROKONTRA_AMZN.pros}
            kontras={PROKONTRA_AMZN.kontras}
          />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  StockDetailA, StockDetailB, StockDetailC,
  StockDetailDesktop, StockDetailDesktopA, StockDetailDesktopB, StockDetailDesktopC,
  MoreActionsSheet,
});

// ╔══════════════════════════════════════════════════════════════╗
// ║  MORE ACTIONS SHEET — mobile equivalent of the desktop modal ║
// ║  All secondary actions surfaced in a clean bottom-sheet.     ║
// ╚══════════════════════════════════════════════════════════════╝
function MoreActionsSheet({ dark }) {
  const t = useTheme(dark);
  const rowStyle = {
    display: 'flex', alignItems: 'center', gap: 14,
    padding: '14px 16px',
    borderTop: `0.5px solid ${t.border}`,
    fontFamily: SW_FONT,
  };
  const iconCircle = (color, icon) => (
    <div style={{
      width: 34, height: 34, borderRadius: 10,
      background: color + (t.name === 'dark' ? '22' : '14'),
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>{icon}</div>
  );
  const SocialIcon = ({ kind, c }) => {
    const sz = 16;
    const props = { width: sz, height: sz, viewBox: '0 0 24 24', fill: c };
    if (kind === 'fb') return <svg {...props}><path d="M9 8H6v4h3v12h5V12h3.6l.4-4H14V6c0-1 .3-2 2-2h2V0h-3c-3.5 0-5 2-5 5v3z"/></svg>;
    if (kind === 'x') return <svg {...props}><path d="M18 2h3l-7 8 8 12h-6l-5-7-5 7H3l7-9-7-11h6l4 6 5-6z"/></svg>;
    if (kind === 'wa') return <svg {...props}><path d="M12 0a12 12 0 0 0-10 18l-2 6 6-2a12 12 0 1 0 6-22zm6 17c-1 2-3 2-4 2-2 0-4-1-6-3s-3-4-3-6c0-1 0-3 2-4 1 0 1 0 2 1l1 2c0 1 0 1-1 2 1 1 2 3 4 3l1-1c1-1 1-1 2-1l2 1c1 1 1 1 0 4z"/></svg>;
    if (kind === 'li') return <svg {...props}><path d="M5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 9h4v15H3zM10 9h4v2c1-1 2-2 4-2 4 0 5 2 5 6v10h-4V16c0-2 0-4-3-4s-3 2-3 4v8h-3z"/></svg>;
    if (kind === 'mail') return <svg {...props}><path d="M2 5h20v14H2zM2 5l10 8 10-8" stroke={c} strokeWidth="1.6" fill="none" strokeLinejoin="round"/></svg>;
    return null;
  };
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Backdrop: stock detail blurred */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
        <div style={{ padding: '54px 16px 6px', display: 'flex', alignItems: 'center', gap: 12 }}>
          {Icon.back(t.text, 22)}
          <Ticker symbol="AMZN" size={26} />
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Amazon.com</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim }}>AMZN</div>
          </div>
        </div>
        <div style={{ padding: '10px 20px' }}>
          <div style={{ fontFamily: SW_MONO, fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em' }}>€227.35</div>
        </div>
        <div style={{ padding: '0 8px' }}>
          <MiniChart data={SAMPLE.amzn} w={370} h={120} color={t.up} stroke={2} fillOpacity={0.1} />
        </div>
      </div>

      {/* Dimmer */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)',
        backdropFilter: 'blur(3px)', WebkitBackdropFilter: 'blur(3px)' }} />

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: t.surface,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        paddingTop: 12, paddingBottom: 40,
        boxShadow: '0 -20px 60px rgba(0,0,0,0.3)',
        maxHeight: '90%',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* drag handle */}
        <div style={{ width: 38, height: 4, borderRadius: 2, background: t.borderStrong,
          alignSelf: 'center', marginBottom: 14 }} />

        {/* Ticker recap header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px 14px' }}>
          <Ticker symbol="AMZN" size={32} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>Amazon.com Inc.</div>
            <div style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim, marginTop: 1 }}>AMZN · €227.35 · −1.50%</div>
          </div>
          <div style={{ width: 26, height: 26, borderRadius: 13, background: t.chip,
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: t.textMuted, fontWeight: 600 }}>×</div>
        </div>

        {/* Primary actions row — quick grid */}
        <div style={{ padding: '0 16px 4px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8 }}>
          {[
            { label: 'Trade', sub: 'Musterdepot', icon: ActIcon.trade(t.bg, 18), bg: t.text, fg: t.bg, primary: true },
            { label: 'Predict', icon: ActIcon.predict(t.text, 18), bg: t.bgSubtle, fg: t.text },
            { label: 'Watchlist', icon: ActIcon.watch(t.text, 18), bg: t.bgSubtle, fg: t.text },
            { label: 'Alert', icon: ActIcon.alert(t.text, 18), bg: t.bgSubtle, fg: t.text },
          ].map(a => (
            <div key={a.label} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
              padding: '12px 4px', borderRadius: 12,
              background: a.bg, color: a.fg,
              border: a.primary ? 'none' : `0.5px solid ${t.border}`,
            }}>
              {a.icon}
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.01em' }}>{a.label}</span>
              {a.sub && <span style={{ fontSize: 9.5, fontWeight: 500, opacity: 0.7, letterSpacing: '0.02em' }}>{a.sub}</span>}
            </div>
          ))}
        </div>

        <div style={{ overflow: 'auto', flex: 1 }}>
          {/* Section: Pages */}
          <div style={{ padding: '20px 16px 6px', fontSize: 10.5, color: t.textDim,
            letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>Sections</div>
          <div>
            {[
              { label: 'Posts · Predictions & Discussions', icon: '💬', clr: '#10B981', meta: '232' },
              { label: 'Financials & Earnings', icon: '📈', clr: '#A855F7' },
              { label: 'News', icon: '📰', clr: '#3B82F6', meta: '48' },
            ].map((r, i) => (
              <div key={r.label} style={{ ...rowStyle, borderTop: i === 0 ? 'none' : rowStyle.borderTop }}>
                {iconCircle(r.clr, typeof r.icon === 'string'
                  ? <span style={{ fontSize: 16, fontWeight: 700, color: r.clr }}>{r.icon}</span>
                  : r.icon)}
                <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>{r.label}</span>
                {r.meta && <span style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim }}>{r.meta}</span>}
                {Icon.chevR(t.textDim, 14)}
              </div>
            ))}
          </div>

          {/* Section: External links */}
          <div style={{ padding: '20px 16px 6px', fontSize: 10.5, color: t.textDim,
            letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>Open externally</div>
          <div>
            {[
              { label: 'Flatex · Real trade', clr: '#2563EB', mark: 'F' },
              { label: 'Yahoo Finance', clr: '#7B1FA2', mark: 'Y!' },
              { label: 'Google News', clr: '#4285F4', mark: 'G' },
            ].map((r, i) => (
              <div key={r.label} style={{ ...rowStyle, borderTop: i === 0 ? 'none' : rowStyle.borderTop }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 10, background: r.clr, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: SW_FONT, fontWeight: 700, fontSize: 13, flexShrink: 0,
                }}>{r.mark}</div>
                <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>{r.label}</span>
                {ActIcon.external(t.textDim, 14)}
              </div>
            ))}
          </div>

          {/* Section: Share */}
          <div style={{ padding: '20px 16px 10px', fontSize: 10.5, color: t.textDim,
            letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>Share</div>
          <div style={{ padding: '0 16px', display: 'flex', gap: 10 }}>
            {[
              { kind: 'fb', clr: '#1877F2' },
              { kind: 'x', clr: t.text },
              { kind: 'wa', clr: '#25D366' },
              { kind: 'li', clr: '#0A66C2' },
              { kind: 'mail', clr: t.textMuted },
            ].map(s => (
              <div key={s.kind} style={{
                flex: 1, aspectRatio: '1', borderRadius: 12,
                background: s.clr + (t.name === 'dark' ? '22' : '12'),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <SocialIcon kind={s.kind} c={s.clr} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}