// news.jsx — News feed mobile (modern editorial)

function NewsFeed({ 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 }}>
          May 17 · 18:42
        </div>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>News</div>
      </div>

      {/* Topic chips */}
      <div style={{ padding: '4px 16px 8px', display: 'flex', gap: 6, overflowX: 'auto' }}>
        {[
          { label: 'For you', active: true },
          { label: 'Watchlist · 12' },
          { label: 'US' }, { label: 'DAX' }, { label: 'AI' }, { label: 'Earnings' }, { label: 'Crypto' },
        ].map((c, i) => (
          <span key={c.label} style={{
            padding: '6px 12px', borderRadius: 999,
            background: c.active ? t.text : 'transparent',
            color: c.active ? t.bg : t.textMuted,
            border: c.active ? 'none' : `0.5px solid ${t.border}`,
            fontSize: 12, fontWeight: 600, letterSpacing: '0.01em',
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>{c.label}</span>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Lead story */}
        <div style={{ padding: '12px 16px 4px' }}>
          <Card t={t} pad={0} radius={18} style={{ overflow: 'hidden' }}>
            <div style={{
              height: 180,
              background: `linear-gradient(135deg, #1a3a52 0%, #0b1929 50%, #061018 100%)`,
              position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 14,
            }}>
              {/* Faux chart graphic */}
              <svg viewBox="0 0 300 180" width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.35 }}>
                <path d="M0 130 L40 110 L80 120 L120 90 L160 100 L200 70 L240 80 L280 50 L300 60"
                  stroke="#00D26A" strokeWidth="2" fill="none" />
                <path d="M0 130 L40 110 L80 120 L120 90 L160 100 L200 70 L240 80 L280 50 L300 60 L300 180 L0 180 Z"
                  fill="url(#newsg)" />
                <defs>
                  <linearGradient id="newsg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#00D26A" stopOpacity="0.5" />
                    <stop offset="100%" stopColor="#00D26A" stopOpacity="0" />
                  </linearGradient>
                </defs>
              </svg>
              <Chip t={t} color="#0a0a0a" bg="#00D26A" size="xs" style={{ position: 'absolute', top: 12, left: 12 }}>
                {Icon.flame('#0a0a0a', 10)}TRENDING
              </Chip>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Ticker symbol="GRAL" size={20} />
                <span style={{ fontFamily: SW_MONO, fontSize: 11, color: t.textDim, fontWeight: 600 }}>GRAIL · NASDAQ</span>
                <span style={{ fontFamily: SW_MONO, fontSize: 11, color: t.up, fontWeight: 600 }}>+4.2%</span>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: t.textDim }}>2h · MarketBeat</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: 8, textWrap: 'pretty' }}>
                GRAIL says Galleri demand is rising as NHS talks, FDA review move ahead
              </div>
              <div style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.5, letterSpacing: '-0.005em' }}>
                GRAIL (NASDAQ:GRAL) said demand for its Galleri multi-cancer early detection test has continued to grow despite recent headlines.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14,
                paddingTop: 12, borderTop: `0.5px solid ${t.border}` }}>
                <div style={{ display: 'flex' }}>
                  {['Anna','Jonas','Kim'].map((n, i) => (
                    <div key={n} style={{ marginLeft: i === 0 ? 0 : -6 }}>
                      <Avatar name={n} size={20} />
                    </div>
                  ))}
                </div>
                <span style={{ fontSize: 11.5, color: t.textMuted }}>
                  <span style={{ color: t.text, fontWeight: 600 }}>14</span> from crowd discussing
                </span>
                <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, color: t.textDim, fontSize: 11.5 }}>
                  {Icon.bookmark(t.textDim, 14)}
                </span>
              </div>
            </div>
          </Card>
        </div>

        {/* Feed items */}
        <div style={{ padding: '8px 16px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            {
              sym: 'GPRE', name: 'Green Plains', src: 'MarketBeat', time: '17:04', chg: 2.1,
              title: 'Green Plains touts operational gains, carbon capture upside at conference',
              body: 'Executives said the company\'s performance has been driven by tighter operating discipline.',
              kind: 'energy', color: '#10b981',
            },
            {
              sym: 'GOOG', name: 'Alphabet', src: 'MarketBeat', time: '16:04', chg: 1.4,
              title: 'Alphabet\'s YouTube CEO touts AI, creators and TV as growth flywheel',
              body: 'YouTube CEO Neal Mohan said the video platform is continuing to lean on creators, subscriptions, connected TV.',
              kind: 'tech', color: '#3b82f6',
            },
            {
              sym: 'GILD', name: 'Gilead', src: 'MarketBeat', time: '15:03', chg: 0.8,
              title: 'Gilead Sciences leans on HIV growth as deals build oncology pipeline',
              body: 'Gilead Chief Commercial Officer said the company is leaning on its HIV business while building inflammation pipeline.',
              kind: 'biotech', color: '#8b5cf6',
            },
            {
              sym: 'NVDA', name: 'NVIDIA', src: 'Bloomberg', time: '14:12', chg: 3.2,
              title: 'NVIDIA Blackwell shipments set Q3 revenue bar 18% above estimates',
              body: 'Supply chain checks show Q3 Blackwell GPU shipments materially above consensus, setting the stage for another beat.',
              kind: 'tech', color: '#76b900',
            },
          ].map((n, i) => (
            <div key={i} style={{ padding: '14px 0',
              borderBottom: i < 3 ? `0.5px solid ${t.border}` : 'none',
              display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                  <Ticker symbol={n.sym} size={16} />
                  <span style={{ fontFamily: SW_MONO, fontSize: 10.5, fontWeight: 600, color: t.text }}>{n.sym}</span>
                  <span style={{ fontFamily: SW_MONO, fontSize: 10.5, color: n.chg > 0 ? t.up : t.down, fontWeight: 600 }}>
                    {n.chg > 0 ? '+' : ''}{n.chg}%
                  </span>
                  <span style={{ fontSize: 10.5, color: t.textDim, marginLeft: 'auto' }}>{n.src} · {n.time}</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.3, marginBottom: 5, textWrap: 'pretty' }}>
                  {n.title}
                </div>
                <div style={{ fontSize: 12, color: t.textMuted, lineHeight: 1.45, letterSpacing: '-0.005em',
                  display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                  {n.body}
                </div>
              </div>
              <div style={{
                width: 64, height: 64, borderRadius: 10, flexShrink: 0,
                background: `linear-gradient(135deg, ${n.color}33, ${n.color}11)`,
                border: `0.5px solid ${n.color}33`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Spark data={n.chg > 0 ? SAMPLE.amzn.slice(-15) : SAMPLE.amznDown} w={48} h={28} color={n.color} />
              </div>
            </div>
          ))}
        </div>
      </div>

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

Object.assign(window, { NewsFeed });