// borsenspiel.jsx — "Catch the Monkey" weekly stock-picking contest.
// A separate, gamified mini-experience: 5 predictions per week, best return wins.
// Distinct visual identity (playful, energetic) vs the rest of the app.

function CatchTheMonkey({ dark }) {
  const t = useTheme(dark);

  // Contest accent — use brand green but with a playful banana-yellow as the contest theme color
  const contestBg = dark ? '#1A1408' : '#FFF8E6'; // warm cream
  const contestInk = dark ? '#FFD66B' : '#8B6914';
  const yellow = '#FFC93C';

  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Header */}
      <div style={{ padding: '54px 16px 8px', display: 'flex', alignItems: 'center', gap: 12 }}>
        {Icon.back(t.text, 22)}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 11, color: t.textDim, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
            Börsenspiel · KW 20–21/2026 · 2 Wochen
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 20 }}>🐵</span>
            <span style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em' }}>Catch the Monkey</span>
          </div>
        </div>
        <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {ActIcon.more(t.text, 20)}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 130 }}>
        {/* HERO — countdown + prize */}
        <div style={{ padding: '6px 16px 0' }}>
          <div style={{
            background: contestBg, color: t.name === 'dark' ? '#FFEBA8' : '#3a2c00',
            borderRadius: 22, padding: '20px 18px',
            position: 'relative', overflow: 'hidden',
            border: `0.5px solid ${t.name === 'dark' ? 'rgba(255,201,60,0.18)' : 'rgba(255,201,60,0.35)'}`,
          }}>
            {/* big banana / monkey decoration */}
            <div style={{
              position: 'absolute', top: -30, right: -10, fontSize: 130, opacity: 0.10,
              transform: 'rotate(15deg)', userSelect: 'none', pointerEvents: 'none',
            }}>🍌</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: t.name === 'dark' ? '#FFD66B' : '#8B6914', opacity: 0.85 }}>
                Endet in
              </span>
              <span style={{ marginLeft: 'auto', padding: '3px 8px', borderRadius: 999,
                background: t.name === 'dark' ? 'rgba(255,201,60,0.18)' : 'rgba(255,201,60,0.25)',
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                color: t.name === 'dark' ? '#FFD66B' : '#8B6914' }}>LIVE</span>
            </div>

            {/* Countdown digits — days for a 2-week contest */}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18, fontFamily: SW_MONO }}>
              {[
                { v: '03', l: 'Tage' },
                { v: '06', l: 'Std' },
                { v: '59', l: 'Min' },
              ].map((u, i) => (
                <React.Fragment key={i}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <span style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>{u.v}</span>
                    <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', opacity: 0.6, marginTop: 4, textTransform: 'uppercase' }}>{u.l}</span>
                  </div>
                  {i < 2 && <span style={{ fontSize: 36, fontWeight: 700, opacity: 0.4, lineHeight: 1, alignSelf: 'flex-start', marginTop: -4 }}>:</span>}
                </React.Fragment>
              ))}
            </div>

            {/* Prizes — real prize on top, virtual points below, visually distinct */}
            <div style={{
              paddingTop: 14,
              borderTop: t.name === 'dark' ? '1px dashed rgba(255,201,60,0.25)' : '1px dashed rgba(139,105,20,0.25)',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                  opacity: 0.6 }}>Real-Preis</span>
                <div style={{ flex: 1, height: 0.5, background: 'currentColor', opacity: 0.18 }} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 22 }}>🥈</span>
                <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.005em' }}>½ Unze Silber für Platz 1</span>
              </div>
            </div>
          </div>
        </div>

        {/* MY STANDING — what's in it for me */}
        <div style={{ padding: '14px 16px 0' }}>
          <Card t={t} pad={0} radius={16} style={{ overflow: 'hidden' }}>
            <div style={{ padding: '14px 16px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <Avatar name="St" size={42} color={t.accent} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.005em' }}>Dein Stand</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
                  <span style={{ fontFamily: SW_MONO, fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>#142</span>
                  <span style={{ fontFamily: SW_MONO, fontSize: 12, color: t.textMuted }}>von 1,247</span>
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: SW_MONO, fontSize: 16, fontWeight: 700,
                  color: t.up, letterSpacing: '-0.01em' }}>+3.42%</div>
                <div style={{ fontSize: 10, color: t.textDim, marginTop: 1, letterSpacing: '0.02em' }}>diese Woche</div>
              </div>
            </div>

            {/* Progress: 5 predictions needed */}
            <div style={{
              padding: '12px 16px', background: t.bgSubtle,
              borderTop: `0.5px solid ${t.border}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{ fontSize: 12, fontWeight: 600 }}>
                  Du brauchst noch <span style={{ color: t.up, fontFamily: SW_MONO, fontWeight: 700 }}>2</span> Einschätzungen
                </span>
                <span style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim, fontWeight: 600 }}>3/5</span>
              </div>
              <div style={{ display: 'flex', gap: 4 }}>
                {[1,1,1,0,0].map((on, i) => (
                  <div key={i} style={{
                    flex: 1, height: 6, borderRadius: 3,
                    background: on ? t.up : t.chip,
                  }} />
                ))}
              </div>
              {/* Existing 3 picks */}
              <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
                {[
                  { sym: 'NVDA', dir: 'buy', pl: '+4.2%' },
                  { sym: 'GOOGL', dir: 'buy', pl: '+1.4%' },
                  { sym: 'AMZN', dir: 'buy', pl: '−1.5%' },
                ].map((p, i) => (
                  <div key={i} style={{
                    flex: 1, padding: '8px 6px', borderRadius: 8,
                    background: t.surface, border: `0.5px solid ${t.border}`,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                  }}>
                    <span style={{ fontFamily: SW_MONO, fontSize: 11, fontWeight: 700 }}>{p.sym}</span>
                    <span style={{ fontFamily: SW_MONO, fontSize: 11, fontWeight: 700,
                      color: p.pl.startsWith('+') ? t.up : t.down }}>{p.pl}</span>
                  </div>
                ))}
                {/* empty slots */}
                {[0,1].map(i => (
                  <div key={'e'+i} style={{
                    flex: 1, padding: '8px 6px', borderRadius: 8,
                    background: 'transparent', border: `1px dashed ${t.borderStrong}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: t.textDim, fontSize: 16, fontWeight: 600,
                  }}>+</div>
                ))}
              </div>
              <div style={{
                marginTop: 12, padding: '11px 0', borderRadius: 10,
                background: t.text, color: t.bg,
                textAlign: 'center', fontWeight: 700, fontSize: 13, letterSpacing: '0.01em',
              }}>2 Einschätzungen abgeben</div>
            </div>
          </Card>
        </div>

        {/* PODIUM — top 3 leaderboard, hero-style */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 12, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <span>Bestenliste · Live</span>
            <span style={{ fontSize: 11, fontWeight: 500, color: t.textDim, fontFamily: SW_MONO }}>1,247 Spieler</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr 1fr', gap: 6, alignItems: 'end' }}>
            {/* #2 */}
            <PodiumStep t={t} rank={2} name="PapaSmurf" rend="+19.89%" avatar="P"
              height={108} color="#C0C0C0" />
            {/* #1 */}
            <PodiumStep t={t} rank={1} name="geldnutzer" rend="+20.82%" avatar="G" badge="🏆"
              height={130} color={yellow} />
            {/* #3 */}
            <PodiumStep t={t} rank={3} name="Kryptonit" rend="+13.75%" avatar="K"
              height={92} color="#CD7F32" />
          </div>
        </div>

        {/* LEADERBOARD list */}
        <div style={{ padding: '20px 12px 0' }}>
          <Card t={t} pad={0} radius={14} style={{ overflow: 'hidden' }}>
            {[
              { r: 4, name: 'WatchMen', rend: '+13.72%' },
              { r: 5, name: 'B. Riley Financial', rend: '+11.55%' },
              { r: 6, name: 'Bankster', rend: '+11.01%' },
              { r: 7, name: 'Vassago8', rend: '+10.57%' },
              { r: 8, name: 'Lekrim', rend: '+10.08%' },
              { r: 142, name: 'Stefan', rend: '+3.42%', isYou: true },
            ].map((u, i) => (
              <div key={u.name} style={{
                padding: '11px 14px', display: 'flex', alignItems: 'center', gap: 12,
                background: u.isYou ? t.accentSoft : 'transparent',
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 12, color: u.isYou ? t.accent : t.textDim,
                  fontWeight: 700, minWidth: 32, textAlign: 'center' }}>#{u.r}</span>
                <Avatar name={u.name} size={28} />
                <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em',
                  color: u.isYou ? t.accent : t.text, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {u.name}{u.isYou && <span style={{ marginLeft: 6, fontSize: 10, fontWeight: 700, letterSpacing: '0.04em' }}>· DU</span>}
                </span>
                <span style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 700,
                  color: u.rend.startsWith('+') ? t.up : t.down }}>{u.rend}</span>
              </div>
            ))}
            <div style={{ padding: '12px 14px', textAlign: 'center', fontSize: 12, fontWeight: 600,
              color: t.accent, borderTop: `0.5px solid ${t.border}` }}>
              Alle 1,247 anzeigen →
            </div>
          </Card>
        </div>

        {/* TOP PICKS — best & worst predictions this week */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>Top Picks der Woche</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <Card t={t} pad={0} radius={12} style={{ overflow: 'hidden' }}>
              <div style={{ padding: '8px 10px', background: t.upSoft, color: t.up,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                🚀 Best
              </div>
              {[
                { sym: 'FUEL', name: 'Fuel Energy', by: 'PapaSmurf', rend: '+63.4%' },
                { sym: 'D-WV', name: 'D-wave Q.', by: 'geldnutzer', rend: '+46.0%' },
                { sym: 'CSL', name: 'Coinbase E.', by: 'geldnutzer', rend: '+47.0%' },
              ].map((p, i) => (
                <div key={p.sym} style={{ padding: '8px 10px',
                  borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <Ticker symbol={p.sym} size={18} />
                    <span style={{ fontSize: 11, fontWeight: 600 }}>{p.sym}</span>
                    <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11, fontWeight: 700, color: t.up }}>
                      {p.rend}
                    </span>
                  </div>
                  <div style={{ fontSize: 10.5, color: t.textDim, marginTop: 3, marginLeft: 23 }}>von {p.by}</div>
                </div>
              ))}
            </Card>
            <Card t={t} pad={0} radius={12} style={{ overflow: 'hidden' }}>
              <div style={{ padding: '8px 10px', background: t.downSoft, color: t.down,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                💀 Worst
              </div>
              {[
                { sym: 'RGNX', name: 'Regenix.', by: 'Bankster', rend: '−5.6%' },
                { sym: 'BIQ', name: 'Bioxcel', by: 'Lekrim', rend: '−3.9%' },
                { sym: 'RGCT', name: 'RGC Tech', by: 'Vassago8', rend: '−21.7%' },
              ].map((p, i) => (
                <div key={p.sym} style={{ padding: '8px 10px',
                  borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <Ticker symbol={p.sym} size={18} />
                    <span style={{ fontSize: 11, fontWeight: 600 }}>{p.sym}</span>
                    <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11, fontWeight: 700, color: t.down }}>
                      {p.rend}
                    </span>
                  </div>
                  <div style={{ fontSize: 10.5, color: t.textDim, marginTop: 3, marginLeft: 23 }}>von {p.by}</div>
                </div>
              ))}
            </Card>
          </div>
        </div>

        {/* Rules collapsed */}
        <div style={{ padding: '20px 16px 0' }}>
          <Card t={t} pad={14} radius={12} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8,
              background: contestBg, color: contestInk,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              fontSize: 18 }}>?</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em' }}>Wie funktioniert es?</div>
              <div style={{ fontSize: 11, color: t.textDim, marginTop: 2 }}>Regeln in 30 Sekunden</div>
            </div>
            {Icon.chevR(t.textDim, 14)}
          </Card>
        </div>

        {/* Comments thread peek */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em' }}>Diskussion</span>
            <span style={{ fontSize: 11, color: t.accent, fontWeight: 600 }}>Alle 28 →</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { name: 'PapaSmurf', when: '12m', body: 'Wer hat noch NVDA für diese Woche? Bin gespannt auf den Q3-Setup.' },
              { name: 'Kryptonit', when: '1h', body: 'Catch the Monkey ist eine Sucht. Schon wieder #3, aber #1 ist heute weit weg.' },
            ].map((c, i) => (
              <div key={i} style={{
                padding: 12, borderRadius: 12,
                background: t.surface, border: `0.5px solid ${t.border}`,
                display: 'flex', gap: 10,
              }}>
                <Avatar name={c.name} size={28} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 600 }}>{c.name}</span>
                    <span style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim }}>{c.when}</span>
                  </div>
                  <div style={{ fontSize: 12.5, color: t.text, marginTop: 4, lineHeight: 1.45, letterSpacing: '-0.005em' }}>
                    {c.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Past contests */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>Vergangene Wochen</div>
          <Card t={t} pad={0} radius={12} style={{ overflow: 'hidden' }}>
            {[
              { week: 'KW 18–19', date: '02.05', winner: 'DerAlmanach', rend: '+12.10%' },
              { week: 'KW 16–17', date: '18.04', winner: 'fenjal', rend: '+6.42%' },
              { week: 'KW 14–15', date: '04.04', winner: 'WatchMen', rend: '+18.88%' },
              { week: 'KW 12–13', date: '21.03', winner: 'Kryptonit', rend: '+3.55%' },
            ].map((w, i) => (
              <div key={w.week} style={{
                padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10,
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim, fontWeight: 600, minWidth: 48 }}>
                  {w.week}
                </span>
                <Avatar name={w.winner} size={22} />
                <span style={{ fontSize: 12.5, fontWeight: 600, flex: 1 }}>{w.winner}</span>
                <span style={{ fontFamily: SW_MONO, fontSize: 11.5, fontWeight: 700, color: t.up }}>
                  {w.rend}
                </span>
                {Icon.chevR(t.textDim, 12)}
              </div>
            ))}
          </Card>
        </div>
      </div>

      <BottomTabs t={t} active="profile" userInitial="St" userColor={t.accent} />
    </div>
  );
}

// ───────────────────────── Podium step ─────────────────────────
function PodiumStep({ t, rank, name, rend, avatar, height, color, badge }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      {/* Avatar */}
      <div style={{ position: 'relative' }}>
        <Avatar name={name} size={rank === 1 ? 52 : 42} color={t.name === 'dark' ? '#525252' : '#404040'} />
        {badge && (
          <div style={{
            position: 'absolute', top: -6, right: -8, fontSize: 22,
            transform: 'rotate(15deg)',
          }}>{badge}</div>
        )}
      </div>
      {/* Name + return */}
      <div style={{ textAlign: 'center', maxWidth: '100%' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-0.005em',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 100 }}>{name}</div>
        <div style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 700, color: t.up, marginTop: 2 }}>{rend}</div>
      </div>
      {/* Bar */}
      <div style={{
        width: '100%', height, borderRadius: '10px 10px 0 0',
        background: `linear-gradient(180deg, ${color} 0%, ${color}88 100%)`,
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        paddingTop: 8,
        boxShadow: `inset 0 -2px 0 ${color}44`,
      }}>
        <span style={{ fontFamily: SW_MONO, fontSize: 24, fontWeight: 800,
          color: t.name === 'dark' ? '#0a0a0a' : '#0a0a0a',
          letterSpacing: '-0.04em', textShadow: '0 1px 0 rgba(255,255,255,0.2)' }}>{rank}</span>
      </div>
    </div>
  );
}

Object.assign(window, { CatchTheMonkey });