// home.jsx — Home / Community landing page (mobile)
// The "what's hot in the Sharewise community right now" feed.
// 6 modules, ordered by signal value. Original page has ~12; we reduce.

function HomeScreen({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Top app bar */}
      <TopAppBar t={t} hasNotifications={true} />

      {/* Screen title block */}
      <div style={{ padding: '6px 16px 8px' }}>
        <div style={{ fontSize: 11, color: t.textDim, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
          Sun, May 23
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>
          Home
        </div>
      </div>

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

        {/* ─── MODULE 1: Was spricht für & gegen ─── */}
        <SectionH t={t} label="Was spricht für & gegen" cta="Mehr Aktien" subtitle="Neue Bewertungen aus der Community" />
        <div style={{
          display: 'flex', gap: 10, padding: '0 16px',
          overflowX: 'auto', scrollSnapType: 'x mandatory',
        }}>
          {[
            { sym: 'FDR', name: 'flatexDEGIRO', price: 22.40, chg: 1.1, ratings: 18,
              pros: [
                { label: 'Top Banken', n: 3 },
                { label: 'Positiver Cash Flow', n: 3 },
                { label: 'Marktführer Top 3', n: 4 },
              ],
              kontras: [
                { label: 'Niedrige Dividende erwartet', n: 3 },
                { label: 'Deutliche zyklische Abh.', n: 5 },
              ],
            },
            { sym: 'CAT', name: 'Caterpillar', price: 326.90, chg: -0.6, ratings: 24,
              pros: [
                { label: 'Hohe Dividende', n: 2 },
                { label: 'Sehr bekannte Marke', n: 3 },
                { label: 'Marktführer Top 3', n: 4 },
              ],
              kontras: [
                { label: 'EBIT-Rückgang erwartet', n: 1 },
                { label: 'Umsatzrückgang erwartet', n: 1 },
              ],
            },
            { sym: 'DELL', name: 'Dell Technologies', price: 142.10, chg: 2.4, ratings: 32,
              pros: [
                { label: 'Wächst stärker als Konkurrenz', n: 5 },
                { label: 'Differenziertes Portfolio', n: 4 },
                { label: 'Investition > 20%/Jahr', n: 3 },
              ],
              kontras: [
                { label: 'Bewertung zu hoch', n: 1 },
              ],
            },
          ].map(s => (
            <CompactProKontraCard key={s.sym} t={t} stock={s} />
          ))}
        </div>

        {/* ─── MODULE 2: Catch the Monkey · live ─── */}
        <div style={{ padding: '20px 16px 0' }}>
          <div style={{
            background: dark ? '#1A1408' : '#FFF8E6',
            color: dark ? '#FFEBA8' : '#3a2c00',
            borderRadius: 18, padding: '16px 18px',
            border: `0.5px solid ${dark ? 'rgba(255,201,60,0.18)' : 'rgba(255,201,60,0.35)'}`,
            position: 'relative', overflow: 'hidden',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{ position: 'absolute', top: -10, right: -10, fontSize: 80, opacity: 0.10,
              transform: 'rotate(15deg)', pointerEvents: 'none' }}>🍌</div>
            <div style={{ position: 'relative', fontSize: 32, lineHeight: 1 }}>🐵</div>
            <div style={{ flex: 1, position: 'relative' }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.005em' }}>Catch the Monkey · KW 20–21</div>
              <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2, fontFamily: SW_MONO }}>
                Du: #142 von 1,247 · +3.42%
              </div>
              <div style={{ display: 'flex', gap: 2, marginTop: 8, alignItems: 'center' }}>
                {[1,1,1,0,0].map((on, i) => (
                  <div key={i} style={{
                    width: 18, height: 4, borderRadius: 2, marginRight: 2,
                    background: on
                      ? (dark ? '#FFD66B' : '#8B6914')
                      : (dark ? 'rgba(255,201,60,0.18)' : 'rgba(139,105,20,0.18)'),
                  }} />
                ))}
                <span style={{ fontSize: 10.5, fontWeight: 600, marginLeft: 4, opacity: 0.85 }}>
                  3/5 Picks
                </span>
              </div>
            </div>
            <div style={{
              position: 'relative',
              padding: '8px 12px', borderRadius: 999,
              background: dark ? 'rgba(255,201,60,0.18)' : 'rgba(255,201,60,0.35)',
              color: dark ? '#FFD66B' : '#8B6914',
              fontSize: 11, fontWeight: 700, letterSpacing: '0.02em',
              display: 'flex', alignItems: 'center', gap: 4,
            }}>
              <span style={{ fontFamily: SW_MONO }}>03d</span>
            </div>
          </div>
        </div>

        {/* ─── MODULE 3: Neue Top-Einschätzungen ─── */}
        <SectionH t={t} label="Neue Top-Einschätzungen" cta="Alle" subtitle="aus der letzten Woche" />
        <div style={{ padding: '0 16px' }}>
          <Card t={t} pad={0} radius={14} style={{ overflow: 'hidden' }}>
            {[
              { sym: 'NVDA', name: 'NVIDIA', by: 'DerAlmanach', acc: '69%', tp: 224, current: 193.88, dir: 'Buy' },
              { sym: 'GOOGL', name: 'Alphabet', by: 'Hovde Group', acc: '74%', tp: 380, current: 341.45, dir: 'Buy' },
              { sym: 'WHR', name: 'Whirlpool', by: 'djuddi888', acc: '72%', tp: 28, current: 34.42, dir: 'Sell' },
            ].map((e, i) => {
              const up = e.dir === 'Buy';
              return (
                <div key={i} style={{
                  padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10,
                  borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
                }}>
                  <Ticker symbol={e.sym} size={32} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ fontFamily: SW_MONO, fontSize: 12.5, fontWeight: 700 }}>{e.sym}</span>
                      <span style={{
                        padding: '1.5px 6px', borderRadius: 5, fontSize: 9.5, fontWeight: 700,
                        letterSpacing: '0.04em',
                        background: up ? t.upSoft : t.downSoft, color: up ? t.up : t.down,
                      }}>{e.dir.toUpperCase()}</span>
                    </div>
                    <div style={{ fontSize: 10.5, color: t.textDim, marginTop: 2, display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Avatar name={e.by} size={12} />
                      <span style={{ fontWeight: 600, color: t.textMuted }}>{e.by}</span>
                      <span>· {e.acc} Trefferrate</span>
                    </div>
                  </div>
                  <UpsidePotential t={t} current={e.current} target={e.tp} size="sm" barWidth={36} />
                </div>
              );
            })}
          </Card>
        </div>

        {/* ─── MODULE 4: Top Predictors · Aktueller Monat ─── */}
        <SectionH t={t} label="Top Predictors" cta="Bestenliste" subtitle="Aktueller Monat" />
        <div style={{ padding: '0 16px', display: 'flex', gap: 10, overflowX: 'auto' }}>
          {[
            { rank: 1, name: 'Hovde Group', trefferrate: 74.29, einsch: 17, badge: '🏆' },
            { rank: 2, name: 'djuddi888', trefferrate: 72.22, einsch: 14 },
            { rank: 3, name: 'PapaSmurf', trefferrate: 71.05, einsch: 22, badge: '🔥' },
          ].map(u => (
            <div key={u.name} style={{
              minWidth: 130, padding: '14px 12px', borderRadius: 14,
              background: t.surface, border: `0.5px solid ${t.border}`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              flexShrink: 0,
            }}>
              <div style={{ position: 'relative' }}>
                <Avatar name={u.name} size={48} />
                {u.badge && (
                  <div style={{ position: 'absolute', top: -4, right: -8, fontSize: 18,
                    transform: 'rotate(12deg)' }}>{u.badge}</div>
                )}
              </div>
              <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-0.005em',
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 105, textAlign: 'center' }}>
                {u.name}
              </span>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 16, fontWeight: 700, color: t.up, letterSpacing: '-0.01em' }}>
                  {u.trefferrate.toFixed(1)}%
                </span>
                <span style={{ fontSize: 9.5, color: t.textDim, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>
                  Trefferrate
                </span>
              </div>
              <span style={{ fontSize: 10.5, color: t.textMuted, fontFamily: SW_MONO, marginTop: -2 }}>
                {u.einsch} Einsch.
              </span>
            </div>
          ))}
        </div>

        {/* ─── MODULE 5: Beliebte Diskussionen ─── */}
        <SectionH t={t} label="Beliebte Diskussionen" cta="Alle" subtitle="diese Woche" />
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { sym: 'BTI', name: 'British American Tobacco', by: 'DrMabuse',
              body: 'Tabacco verkauft sich wie geschnittenes Brot. Die Aktie als Stabilizer im Portfolio, abzüglich ESG-Diskussionen, lese ich frühestens bei Marktbreite > €40 als Verkauf.',
              comments: 24, when: '2h' },
            { sym: 'DWAVE', name: 'D-wave Quantum', by: 'WatchMen',
              body: 'Buy. Bei dem Headcount-Anstieg geht da nichts mehr unter €18. Stop tight.',
              comments: 18, when: '4h' },
          ].map((c, i) => (
            <Card key={i} t={t} pad={12} radius={12}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Ticker symbol={c.sym} size={20} />
                <span style={{ fontFamily: SW_MONO, fontSize: 11, fontWeight: 700, letterSpacing: '0.02em' }}>{c.sym}</span>
                <span style={{ fontSize: 11, color: t.textDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  · {c.name}
                </span>
                <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim }}>{c.when}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <Avatar name={c.by} size={26} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>{c.by}</div>
                  <div style={{ fontSize: 12.5, color: t.textMuted, lineHeight: 1.45, letterSpacing: '-0.005em',
                    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                    {c.body}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 10,
                color: t.textDim, fontSize: 11.5 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  {ActIcon.reply(t.textDim, 12)}
                  <span style={{ fontFamily: SW_MONO, fontWeight: 600 }}>{c.comments}</span>
                  <span>Antworten</span>
                </span>
                <span style={{ marginLeft: 'auto', color: t.accent, fontWeight: 600 }}>Lesen →</span>
              </div>
            </Card>
          ))}
        </div>
      </div>

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

// Section header w/ subtitle
function SectionH({ t, label, cta, subtitle }) {
  return (
    <div style={{ padding: '20px 16px 10px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{label}</span>
        {cta && <span style={{ fontSize: 11.5, color: t.accent, fontWeight: 600 }}>{cta} →</span>}
      </div>
      {subtitle && (
        <div style={{ fontSize: 11, color: t.textDim, marginTop: 2, letterSpacing: '0.005em' }}>
          {subtitle}
        </div>
      )}
    </div>
  );
}

// Compact ProKontraCard — fits horizontal scroll, smaller items
function CompactProKontraCard({ t, stock: s }) {
  return (
    <div style={{
      minWidth: 268, scrollSnapAlign: 'start',
      background: t.surface, borderRadius: 14,
      border: `0.5px solid ${t.border}`, overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{ padding: '12px 14px 10px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Ticker symbol={s.sym} size={28} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.005em',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
          <div style={{ fontSize: 10.5, color: t.textDim, fontFamily: SW_MONO, marginTop: 1 }}>
            €{s.price.toFixed(2)} ·
            <span style={{ color: s.chg > 0 ? t.up : t.down, fontWeight: 700, marginLeft: 3 }}>
              {s.chg > 0 ? '+' : ''}{s.chg}%
            </span>
          </div>
        </div>
        <span style={{ fontSize: 10, color: t.textDim, fontFamily: SW_MONO }}>{s.ratings}</span>
      </div>

      {/* Split */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div style={{ background: t.upSoft, padding: '10px 12px' }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
            color: t.up, marginBottom: 7,
            display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 12, height: 12, borderRadius: 3, background: t.up,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12" />
              </svg>
            </span>
            Pro
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {s.pros.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 10, color: t.up, fontWeight: 700, minWidth: 14 }}>{p.n}</span>
                <span style={{ fontSize: 10.5, color: t.text, lineHeight: 1.3, letterSpacing: '-0.005em',
                  display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                  {p.label}
                </span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: t.downSoft, padding: '10px 12px', borderLeft: `0.5px solid ${t.border}` }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
            color: t.down, marginBottom: 7,
            display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 12, height: 12, borderRadius: 3, background: t.down,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
              <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="4" strokeLinecap="round">
                <path d="M6 6 L18 18 M18 6 L6 18" />
              </svg>
            </span>
            Kontra
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {s.kontras.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 10, color: t.down, fontWeight: 700, minWidth: 14 }}>{p.n}</span>
                <span style={{ fontSize: 10.5, color: t.text, lineHeight: 1.3, letterSpacing: '-0.005em',
                  display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                  {p.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen });