// screens-today.jsx — Today (home) & Onboarding & First-run empty

const SectionHeader = ({ overline, action }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 18px', marginBottom: 12 }}>
    <span className="rv-overline">{overline}</span>
    {action && <span style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 500 }}>{action}</span>}
  </div>
);

// ─────────────────────────────────────────────────────────────
// TODAY — home
// ─────────────────────────────────────────────────────────────
function ScreenToday() {
  return (
    <div className="rv-screen rv">
      <StatusBar time="7:24" />
      {/* Top bar */}
      <div style={{ position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <RvWordmark size={16}/>
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={iconBtn}><IcSearch s={18} stroke="var(--text-2)"/></button>
        </div>
      </div>

      <div style={{ position: 'absolute', top: 102, left: 0, right: 0, bottom: 0, overflow: 'auto', paddingBottom: 200 }}>
        {/* Greeting with FA-style icon stack accent */}
        <div style={{ position: 'relative', padding: '6px 22px 14px', overflow: 'visible' }}>
          <div style={{ position: 'absolute', top: -2, right: -8, pointerEvents: 'none' }}>
            <IconStack size={150}/>
          </div>
          <div className="rv-overline" style={{ marginBottom: 10 }}>WED · MAR 14</div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 40, color: 'var(--text)', textWrap: 'balance',
            position: 'relative',
          }}>
            Morning,<br/>Niraj.
          </h1>
          <p style={{ margin: '12px 0 0', fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5, maxWidth: 260, position: 'relative' }}>
            Today's brief is hot off the wire — <span style={{ color: 'var(--accent)', fontWeight: 600 }}>7 minutes</span>. Two custom briefs still building.
          </p>

          {/* Streak strip — yellow star badge, FA energy */}
          <div style={{
            marginTop: 18, padding: '10px 14px 10px 10px',
            background: 'var(--bg-1)',
            border: '0.5px solid var(--line)',
            borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12,
            boxShadow: '0 1px 0 rgba(24,30,50,0.04), 0 4px 12px rgba(24,30,50,0.04)',
          }}>
            <AwesomeBadge count={42}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, color: 'var(--text)', fontWeight: 600 }}>
                42-day streak
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 1 }}>5 of 7 days this week · keep it up</div>
            </div>
            <div style={{ display: 'flex', gap: 3 }}>
              {['M','T','W','T','F','S','S'].map((d, i) => (
                <div key={i} style={{
                  width: 14, height: 14, borderRadius: 4,
                  background: i <= 2 ? 'var(--accent)' : i === 3 ? 'var(--accent-tint-2)' : 'var(--bg-3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 8, fontWeight: 800, color: i <= 2 ? '#fff' : 'var(--text-4)',
                }}>{d}</div>
              ))}
            </div>
          </div>
        </div>

        {/* Hero brief card */}
        <div style={{ padding: '4px 18px 24px' }}>
          <div style={{
            position: 'relative',
            borderRadius: 26, overflow: 'hidden',
            border: '0.5px solid var(--line-strong)',
            background: 'var(--bg-1)',
            boxShadow: '0 2px 0 rgba(24,30,50,0.04), 0 18px 40px rgba(24,30,50,0.08)',
          }}>
            <div style={{ padding: 14 }}>
              <CoverArt title="The Wednesday Brief" kicker="Mar 14 · 7 min" size={326} radius={20} variant="sky"/>
            </div>
            <div style={{ padding: '4px 18px 18px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <StatusPill kind="new"/>
                <span style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>NPR-style · 7 min · 6 segments</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5, marginBottom: 14 }}>
                Nvidia's HBM-supply scramble, India's Q4 earnings setup, what just happened in the AI export rule, and the Wemby return that broke West-conference math.
              </div>

              {/* Source dot row */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <SourceDotRow srcs={['bloomberg','semianalysis','ft','livemint','nba']}/>
                <span style={{ fontSize: 12, color: 'var(--text-3)' }}>+ 7 sources</span>
              </div>

              {/* CTAs */}
              <div style={{ display: 'flex', gap: 10 }}>
                <button style={{
                  flex: 1, height: 50, borderRadius: 14, border: 0,
                  background: 'var(--accent)', color: '#fff',
                  fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  boxShadow: '0 10px 22px rgba(61,143,224,0.32), 0 2px 0 rgba(24,30,50,0.18)',
                }}>
                  <IcPlay s={16}/> Play brief
                </button>
                <button style={{
                  width: 50, height: 50, borderRadius: 14, border: '0.5px solid var(--line-strong)',
                  background: 'transparent', color: 'var(--text-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <IcMore s={18}/>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Custom-brief suggestions — things Reverb noticed worth bundling */}
        <SectionHeader overline="WHILE YOU WERE OUT" action="See all"/>
        <div style={{ display: 'flex', gap: 12, padding: '0 18px 22px', overflowX: 'auto' }}>
          <SuggestionCard
            variant="plum"
            tag="5 tabs you saved"
            title="The Anthropic agent post & 4 replies"
            meta="9 min · Tonight Show"
            srcs={['anthropic','stratechery','theverge','github','arxiv']}
          />
          <SuggestionCard
            variant="teal"
            tag="HBM supply"
            title="Catch me up on HBM3E & SK Hynix vs Micron"
            meta="11 min · Deep dive"
            srcs={['semianalysis','ft','bloomberg']}
          />
          <SuggestionCard
            variant="rose"
            tag="Your reading list"
            title="2 long-reads on AI policy"
            meta="14 min · Two-host"
            srcs={['economist','axios']}
          />
        </div>

        {/* Daily Reverb — FA-style sticker callout */}
        <div style={{ padding: '4px 18px 22px' }}>
          <div style={{
            position: 'relative',
            padding: '16px 18px 18px',
            background: 'var(--text)',
            color: '#fff',
            borderRadius: 18,
            overflow: 'visible',
            boxShadow: '0 2px 0 rgba(24,30,50,0.20), 0 12px 28px rgba(24,30,50,0.18)',
          }}>
            {/* Today-only tag */}
            <div style={{ position: 'absolute', top: 14, right: 16 }}>
              <span style={{
                padding: '4px 9px', borderRadius: 6,
                background: 'rgba(255,255,255,0.10)',
                color: 'var(--yellow)',
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase',
                border: '0.5px solid rgba(249,197,87,0.30)',
              }}>Today only</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ flexShrink: 0 }}>
                <ColorChip size={56} kind="chat" bg="var(--magenta)" fg="#fff" rotate={-6} radius={14}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="rv-overline" style={{ fontSize: 10, color: 'var(--accent-soft)', marginBottom: 5 }}>A LITTLE EXTRA</div>
                <div style={{
                  fontFamily: 'var(--display)', fontWeight: 700,
                  fontSize: 16, lineHeight: 1.25, color: '#fff',
                  letterSpacing: '-0.025em', textWrap: 'balance',
                }}>
                  Margin call, explained in 90 seconds.
                </div>
                <div style={{ marginTop: 6, fontSize: 11.5, color: 'rgba(255,255,255,0.55)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  Quick curio · listen later
                </div>
              </div>
              <button style={{
                width: 38, height: 38, borderRadius: 999, border: 0,
                background: 'var(--accent)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                boxShadow: '0 4px 14px rgba(61,143,224,0.45)',
              }}>
                <IcPlay s={14}/>
              </button>
            </div>
          </div>
        </div>

        {/* Quick action */}
        <div style={{ padding: '0 18px 22px' }}>
          <button style={{
            width: '100%', padding: '14px 16px', borderRadius: 18,
            background: 'var(--bg-1)', border: '0.5px dashed var(--line-strong)',
            display: 'flex', alignItems: 'center', gap: 12, color: 'var(--text-2)',
            fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500, textAlign: 'left',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--accent-tint)', color: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <IcPlus s={18} w={2}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ color: 'var(--text)', fontWeight: 500, fontSize: 14 }}>Build a brief</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 1 }}>Pick cards in Feed, or paste URLs</div>
            </div>
            <IcChevR s={16} stroke="var(--text-3)"/>
          </button>
        </div>

        {/* Recent listens */}
        <SectionHeader overline="LATELY"/>
        <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <RecentRow title="The Tuesday Brief"      meta="Yesterday · 6m"      variant="midnight" finished/>
          <RecentRow title="What's next for HBM"    meta="Mon · custom · 9m" variant="teal"     finished/>
          <RecentRow title="NBA: Wemby return"      meta="Sun · 4m"            variant="rose"     finished/>
        </div>
      </div>

      <MiniPlayer title="The Tuesday Brief" variant="amber" progress={0.62}/>
      <TabBar active="today"/>
      <HomeIndicator/>
    </div>
  );
}

function SuggestionCard({ tag, title, meta, srcs = [], variant = 'plum' }) {
  return (
    <div style={{
      flexShrink: 0, width: 230,
      borderRadius: 20, overflow: 'hidden',
      background: 'var(--bg-1)', border: '0.5px solid var(--line)',
    }}>
      <CoverArt size={230} radius={0} showTitle={false} variant={variant}/>
      <div style={{ padding: '12px 14px 14px' }}>
        <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--accent-soft)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>{tag}</div>
        <div style={{
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 17, lineHeight: 1.18, color: 'var(--text)',
          textWrap: 'balance', marginBottom: 8,
        }}>{title}</div>
        <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginBottom: 10 }}>{meta}</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <SourceDotRow srcs={srcs}/>
          <div style={{
            width: 32, height: 32, borderRadius: 999, color: '#fff',
            background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <IcPlay s={13}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function RecentRow({ title, meta, variant, finished }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 4px' }}>
      <CoverArt size={48} radius={10} variant={variant} showTitle={false}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 1 }}>{meta}</div>
      </div>
      {finished && <IcCheck s={14} stroke="var(--text-3)" w={2}/>}
      <button style={iconBtn}><IcMore s={16} stroke="var(--text-3)"/></button>
    </div>
  );
}

const iconBtn = {
  width: 36, height: 36, borderRadius: 12, border: 0, background: 'transparent',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

// ─────────────────────────────────────────────────────────────
// ONBOARDING — first-run
// ─────────────────────────────────────────────────────────────
function ScreenOnboarding() {
  const suggestions = [
    { label: 'AI coding agents',          kind: 'bolt',  bg: 'var(--accent)' },
    { label: 'Semis & HBM supply',        kind: 'chip',  bg: 'var(--text)' },
    { label: 'AI policy & geopolitics',   kind: 'globe', bg: 'var(--magenta)' },
    { label: 'Climate',                   kind: 'leaf',  bg: 'var(--good)' },
    { label: 'Indian equity markets',     kind: 'chart', bg: 'var(--yellow)' },
    { label: 'NBA & player development',  kind: 'basket',bg: 'var(--accent-deep)' },
    { label: 'Founder essays',            kind: 'sparks',bg: 'var(--text)' },
  ];
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:41"/>
      <div style={{
        position: 'absolute', inset: 0, padding: '70px 22px 30px',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Brand + step */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
          <RvWordmark size={16}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            {[1,2,3,4].map(i => (
              <span key={i} style={{
                width: i === 2 ? 18 : 6, height: 6, borderRadius: 999,
                background: i <= 2 ? 'var(--accent)' : 'var(--bg-3)',
              }}/>
            ))}
          </div>
        </div>

        {/* Hero — FA icon stack */}
        <div style={{ marginTop: 30, position: 'relative', height: 180, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <IconStack size={210}/>
        </div>

        {/* Hero copy */}
        <div style={{ marginTop: 8 }}>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 38, color: 'var(--text)', textWrap: 'balance',
          }}>
            What should we<br/>
            <span style={{ color: 'var(--accent)' }}>echo back</span> to you?
          </h1>
          <p style={{ marginTop: 12, fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5, maxWidth: 320 }}>
            One thing per line. Specific beats broad — we'll bring it to you each morning.
          </p>
        </div>

        {/* Big input */}
        <div style={{
          marginTop: 18, padding: '14px 16px 16px',
          background: 'var(--bg-1)', border: '0.5px solid var(--line-strong)',
          borderRadius: 16, position: 'relative',
          boxShadow: '0 1px 0 rgba(24,30,50,0.04), 0 8px 22px rgba(24,30,50,0.05)',
        }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500, lineHeight: 1.45, color: 'var(--text)' }}>
            AI coding agents — capability, not benchmarks<br/>
            <span style={{ color: 'var(--text-3)' }}>HBM &amp; semis supply chain</span>
            <span style={{
              display: 'inline-block', width: 2, height: 16, background: 'var(--accent)',
              marginLeft: 2, verticalAlign: 'text-bottom',
              animation: 'rv-pulse 1.1s ease-in-out infinite',
            }}/>
          </div>
        </div>

        {/* Suggestions as icon chips */}
        <div style={{ marginTop: 18 }}>
          <div className="rv-overline" style={{ marginBottom: 10 }}>OR PICK ONE</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
            {suggestions.map(s => (
              <span key={s.label} style={{
                display: 'inline-flex', alignItems: 'center', gap: 7,
                padding: '5px 12px 5px 5px', borderRadius: 999,
                background: 'var(--bg-1)', border: '0.5px solid var(--line-strong)',
                fontSize: 12.5, color: 'var(--text)', fontWeight: 500,
              }}>
                <ColorChip size={22} kind={s.kind} bg={s.bg} fg={s.bg === 'var(--yellow)' ? 'var(--text)' : '#fff'} radius={6}/>
                {s.label}
              </span>
            ))}
          </div>
        </div>

        <div style={{ flex: 1 }}/>

        {/* CTA */}
        <button style={{
          width: '100%', height: 54, borderRadius: 14, border: 0,
          background: 'var(--accent)', color: '#fff',
          fontFamily: 'var(--display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          boxShadow: '0 4px 0 rgba(24,30,50,0.18), 0 14px 28px rgba(61,143,224,0.30)',
        }}>
          Sounds good
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

Object.assign(window, { ScreenToday, ScreenOnboarding });