// screens-getstarted.jsx — Education flow after sign-up.
// Concept → How it works → Voice & length → Schedule → Generating

// ─────────────────────────────────────────────────────────────
// Shared chrome: top bar with back + step pip + skip
// ─────────────────────────────────────────────────────────────
function GsTopBar({ step = 1, total = 5, showBack = true, showSkip = true }) {
  return (
    <div style={{
      position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 18px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5,
    }}>
      {showBack ? (
        <button style={{
          width: 38, height: 38, borderRadius: 12, border: 0,
          background: 'var(--bg-1)', color: 'var(--text-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 1px 0 rgba(24,30,50,0.04)',
        }}>
          <IcChevL s={18}/>
        </button>
      ) : <div style={{ width: 38 }}/>}

      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        {Array.from({ length: total }).map((_, i) => (
          <span key={i} style={{
            width: i + 1 === step ? 22 : 6, height: 6, borderRadius: 999,
            background: i + 1 <= step ? 'var(--accent)' : 'var(--bg-3)',
            transition: 'all 200ms ease',
          }}/>
        ))}
      </div>

      {showSkip ? (
        <button style={{
          padding: '8px 12px', height: 38, borderRadius: 12, border: 0,
          background: 'transparent', color: 'var(--text-3)',
          fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 13,
        }}>Skip</button>
      ) : <div style={{ width: 38 }}/>}
    </div>
  );
}

const gsCtaPrimary = {
  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)',
};

// ─────────────────────────────────────────────────────────────
// 00d · CONCEPT — "Meet Reverb"
// ─────────────────────────────────────────────────────────────
function ScreenGsConcept() {
  const props = [
    { kind: 'sparks',     bg: 'var(--magenta)', label: 'Personal',       sub: 'Built around what you follow — not what\u2019s trending.' },
    { kind: 'globe',      bg: 'var(--accent)',  label: 'With sources',   sub: 'Every claim is a tap away from the original.' },
    { kind: 'headphones', bg: 'var(--yellow)',  fg: 'var(--text)', label: 'Built for ears', sub: 'Short segments. A voice that knows where to pause.' },
  ];
  return (
    <div className="rv-screen rv" style={{ background: 'var(--bg-1)' }}>
      <StatusBar time="9:42"/>
      <GsTopBar step={1} showBack={false}/>

      {/* Soft sky wash */}
      <div style={{
        position: 'absolute', top: -140, left: -160, width: 420, height: 420,
        borderRadius: '50%', background: 'var(--accent-tint)', filter: 'blur(40px)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Hero icon stack */}
        <div style={{
          marginTop: 4, position: 'relative', height: 178,
          display: 'flex', justifyContent: 'center', alignItems: 'center',
        }}>
          <IconStack size={220}/>
        </div>

        {/* Headline */}
        <div style={{ marginTop: 10 }}>
          <div className="rv-overline" style={{ color: 'var(--accent-deep)', marginBottom: 10 }}>
            HERE'S THE IDEA
          </div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 38, color: 'var(--text)', textWrap: 'balance',
          }}>
            Your morning,{' '}
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.025em' }}>
              in your ears.
            </span>
          </h1>
          <p style={{
            marginTop: 12, fontSize: 14.5, color: 'var(--text-2)',
            lineHeight: 1.5, maxWidth: 330,
          }}>
            A fresh ~7-minute brief on the things <em>you</em> follow. Built by AI from the
            web, with citations you can tap. That's it.
          </p>
        </div>

        {/* Value props */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {props.map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 14px',
              background: 'var(--bg)', border: '0.5px solid var(--line)',
              borderRadius: 14,
              boxShadow: '0 1px 0 rgba(24,30,50,0.03)',
            }}>
              <ColorChip size={40} kind={p.kind} bg={p.bg} fg={p.fg || '#fff'} radius={11} rotate={i === 1 ? 4 : -4}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14.5, color: 'var(--text)' }}>{p.label}</div>
                <div style={{ marginTop: 2, fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.35 }}>{p.sub}</div>
              </div>
            </div>
          ))}
        </div>

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

        <button style={gsCtaPrimary}>
          Show me how
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 00e · HOW IT WORKS — 3-step pipeline
// ─────────────────────────────────────────────────────────────
function ScreenGsHowItWorks() {
  const steps = [
    {
      n: '01', kind: 'sparks', bg: 'var(--magenta)',
      title: 'You tell us what you follow',
      sub: 'Topics, sources, even pasted URLs. Add or drop them anytime.',
    },
    {
      n: '02', kind: 'globe', bg: 'var(--accent)',
      title: 'We read the web overnight',
      sub: 'Cross-source, deduped, weighted by what changed. No filler.',
    },
    {
      n: '03', kind: 'headphones', bg: 'var(--text)',
      title: 'You wake up to a brief',
      sub: 'Real voices, real citations. Tap any chip to read the source.',
    },
  ];
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:43"/>
      <GsTopBar step={2}/>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Headline */}
        <div>
          <div className="rv-overline" style={{ marginBottom: 10 }}>HOW REVERB WORKS</div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 34, color: 'var(--text)', textWrap: 'balance',
          }}>
            Three steps.{' '}
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.025em' }}>
              That's the whole thing.
            </span>
          </h1>
        </div>

        {/* Steps — vertical with connector spine */}
        <div style={{ marginTop: 26, position: 'relative' }}>
          {/* Dotted spine */}
          <div style={{
            position: 'absolute', left: 27, top: 28, bottom: 28,
            width: 0, borderLeft: '1.5px dashed var(--line-strong)',
            zIndex: 0,
          }}/>

          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 14,
              padding: '10px 0', position: 'relative', zIndex: 1,
            }}>
              {/* Chip + step number stamp */}
              <div style={{ position: 'relative', flexShrink: 0 }}>
                <ColorChip size={56} kind={s.kind} bg={s.bg} fg="#fff" radius={14} rotate={i % 2 === 0 ? -6 : 5}/>
                <div style={{
                  position: 'absolute', top: -6, right: -6,
                  width: 22, height: 22, borderRadius: 999,
                  background: 'var(--bg)', border: '0.5px solid var(--line-strong)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 9.5,
                  color: 'var(--text-2)', letterSpacing: '0.04em',
                }}>{s.n}</div>
              </div>

              <div style={{ flex: 1, minWidth: 0, paddingTop: 4 }}>
                <div style={{
                  fontFamily: 'var(--display)', fontWeight: 700,
                  fontSize: 17, lineHeight: 1.2, color: 'var(--text)',
                  letterSpacing: '-0.02em',
                }}>{s.title}</div>
                <div style={{ marginTop: 5, fontSize: 13, color: 'var(--text-2)', lineHeight: 1.45 }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Sample brief preview tease */}
        <div style={{ marginTop: 16 }}>
          <div className="rv-overline" style={{ marginBottom: 8 }}>WHAT IT FEELS LIKE</div>
          <div style={{
            padding: 12, borderRadius: 14,
            background: 'var(--bg-1)', border: '0.5px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <CoverArt size={56} radius={10} variant="sky" showTitle={false}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text)' }}>Sample · The Wednesday Brief</div>
              <div style={{ marginTop: 2, fontSize: 11, color: 'var(--text-3)' }}>7 min · 6 segments · 12 sources</div>
            </div>
            <button style={{
              width: 36, height: 36, borderRadius: 999, border: 0,
              background: 'var(--accent)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 12px rgba(61,143,224,0.35)',
            }}>
              <IcPlay s={13}/>
            </button>
          </div>
        </div>

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

        <button style={gsCtaPrimary}>
          Got it — let's set up
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 00f · VOICE & LENGTH — pick a host style + brief length
// ─────────────────────────────────────────────────────────────
function ScreenGsVoice() {
  const voices = [
    {
      name: 'Maya', tag: 'Solo · warm', selected: true,
      desc: 'Calm, measured. One voice, like a friend with a coffee.',
      kind: 'mic', bg: 'var(--accent)',
    },
    {
      name: 'Maya & Theo', tag: 'Two-host · conversational',
      desc: 'A back-and-forth. Different angles per story.',
      kind: 'chat', bg: 'var(--magenta)',
    },
    {
      name: 'Newsroom', tag: 'NPR-style · segmented',
      desc: 'Multi-voice. Field tape, music transitions.',
      kind: 'headphones', bg: 'var(--text)',
    },
  ];
  const lengths = [
    { label: '5 min', sub: 'Quick' },
    { label: '7 min', sub: 'Default', active: true },
    { label: '12 min', sub: 'Deep' },
  ];
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:44"/>
      <GsTopBar step={3}/>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Headline */}
        <div>
          <div className="rv-overline" style={{ marginBottom: 10 }}>WHO READS IT TO YOU</div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 34, color: 'var(--text)', textWrap: 'balance',
          }}>
            Pick a voice.
          </h1>
          <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.45 }}>
            You can change this anytime. Tap <IcPlay s={11} stroke="var(--text-2)" w={2}/> to hear a sample.
          </p>
        </div>

        {/* Voice options */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 9 }}>
          {voices.map((v, i) => (
            <div key={i} style={{
              padding: '12px 14px 12px 12px', borderRadius: 14,
              background: v.selected ? 'var(--accent-tint)' : 'var(--bg-1)',
              border: v.selected ? '1.5px solid var(--accent)' : '0.5px solid var(--line)',
              boxShadow: v.selected ? '0 0 0 4px rgba(61,143,224,0.10)' : '0 1px 0 rgba(24,30,50,0.03)',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <ColorChip size={44} kind={v.kind} bg={v.bg} fg="#fff" radius={12} rotate={i % 2 === 0 ? -5 : 5}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15, color: 'var(--text)', letterSpacing: '-0.015em' }}>{v.name}</div>
                  <div style={{ fontSize: 10.5, color: v.selected ? 'var(--accent-deep)' : 'var(--text-3)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{v.tag}</div>
                </div>
                <div style={{ marginTop: 3, fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.35 }}>{v.desc}</div>
              </div>
              {/* Play sample */}
              <button style={{
                width: 36, height: 36, borderRadius: 999, border: 0,
                background: v.selected ? 'var(--accent)' : 'var(--bg)',
                color: v.selected ? '#fff' : 'var(--text-2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                boxShadow: v.selected
                  ? '0 4px 12px rgba(61,143,224,0.35)'
                  : '0 1px 0 rgba(24,30,50,0.06), inset 0 0 0 0.5px var(--line-strong)',
              }}>
                <IcPlay s={13}/>
              </button>
            </div>
          ))}
        </div>

        {/* Length picker */}
        <div style={{ marginTop: 22 }}>
          <div className="rv-overline" style={{ marginBottom: 10 }}>HOW LONG, ON AVERAGE</div>
          <div style={{
            padding: 5, borderRadius: 14,
            background: 'var(--bg-1)', border: '0.5px solid var(--line)',
            display: 'flex', gap: 5,
          }}>
            {lengths.map((l, i) => (
              <div key={i} style={{
                flex: 1, padding: '11px 8px 10px', borderRadius: 10,
                background: l.active ? 'var(--text)' : 'transparent',
                color: l.active ? '#fff' : 'var(--text-2)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1,
                boxShadow: l.active ? '0 2px 0 rgba(24,30,50,0.18), 0 6px 14px rgba(24,30,50,0.10)' : 'none',
              }}>
                <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.02em' }}>{l.label}</div>
                <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', opacity: l.active ? 0.7 : 1 }}>{l.sub}</div>
              </div>
            ))}
          </div>
        </div>

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

        <button style={gsCtaPrimary}>
          Continue
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 00g · SCHEDULE — when should it land
// ─────────────────────────────────────────────────────────────
function ScreenGsSchedule() {
  const days = [
    { d: 'M', active: true },
    { d: 'T', active: true },
    { d: 'W', active: true },
    { d: 'T', active: true },
    { d: 'F', active: true },
    { d: 'S', active: false },
    { d: 'S', active: false },
  ];
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:45"/>
      <GsTopBar step={4}/>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Headline */}
        <div>
          <div className="rv-overline" style={{ marginBottom: 10 }}>YOUR MORNING DROP</div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 34, color: 'var(--text)', textWrap: 'balance',
          }}>
            When should I{' '}
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.025em' }}>
              land?
            </span>
          </h1>
          <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.45 }}>
            We'll have your brief ready by this time, every chosen day.
          </p>
        </div>

        {/* Time display — big editorial */}
        <div style={{
          marginTop: 22, padding: '24px 18px 20px',
          background: 'var(--text)', borderRadius: 22,
          color: '#fff', position: 'relative', overflow: 'hidden',
          boxShadow: '0 2px 0 rgba(24,30,50,0.18), 0 16px 30px rgba(24,30,50,0.18)',
        }}>
          {/* Decorative star */}
          <div style={{ position: 'absolute', top: -16, right: -10, transform: 'rotate(12deg)', opacity: 0.18 }}>
            <AwesomeStar size={120} color="var(--yellow)"/>
          </div>

          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6, position: 'relative' }}>
            <div style={{
              fontFamily: 'var(--display)', fontWeight: 800,
              fontSize: 76, lineHeight: 0.92, letterSpacing: '-0.05em',
              color: '#fff', fontVariantNumeric: 'tabular-nums',
            }}>7:00</div>
            <div style={{
              fontFamily: 'var(--display)', fontWeight: 700,
              fontSize: 22, color: 'var(--accent-soft)',
              letterSpacing: '-0.01em',
            }}>AM</div>
          </div>

          {/* Quick presets */}
          <div style={{ marginTop: 14, display: 'flex', justifyContent: 'center', gap: 6 }}>
            {[
              { label: '6:00', active: false },
              { label: '6:30', active: false },
              { label: '7:00', active: true },
              { label: '7:30', active: false },
              { label: '8:00', active: false },
            ].map((t, i) => (
              <div key={i} style={{
                padding: '6px 11px', borderRadius: 999,
                background: t.active ? '#fff' : 'rgba(255,255,255,0.10)',
                color: t.active ? 'var(--text)' : 'rgba(255,255,255,0.7)',
                fontFamily: 'var(--mono)', fontSize: 11.5, fontWeight: 600,
                letterSpacing: '-0.005em',
              }}>{t.label}</div>
            ))}
          </div>
        </div>

        {/* Day picker */}
        <div style={{ marginTop: 22 }}>
          <div className="rv-overline" style={{ marginBottom: 10 }}>ON THESE DAYS</div>
          <div style={{ display: 'flex', gap: 7 }}>
            {days.map((day, i) => (
              <div key={i} style={{
                flex: 1, aspectRatio: '1', borderRadius: 12,
                background: day.active ? 'var(--accent)' : 'var(--bg-1)',
                border: day.active ? 0 : '0.5px solid var(--line)',
                color: day.active ? '#fff' : 'var(--text-3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14,
                letterSpacing: '-0.01em',
                boxShadow: day.active ? '0 2px 0 rgba(24,30,50,0.12), 0 4px 10px rgba(61,143,224,0.18)' : 'none',
              }}>{day.d}</div>
            ))}
          </div>
          <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--text-3)' }}>
            Weekdays only. Tap any day to toggle.
          </div>
        </div>

        {/* Notify toggle */}
        <div style={{
          marginTop: 18, padding: '12px 14px',
          background: 'var(--bg-1)', border: '0.5px solid var(--line)',
          borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <ColorChip size={34} kind="bolt" bg="var(--yellow)" fg="var(--text)" radius={10} rotate={-4}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text)' }}>Ping me when it's ready</div>
            <div style={{ marginTop: 1, fontSize: 11.5, color: 'var(--text-3)' }}>Silent notification only · no sound</div>
          </div>
          {/* Toggle */}
          <div style={{
            width: 42, height: 24, borderRadius: 999,
            background: 'var(--accent)', padding: 2, display: 'flex', alignItems: 'center',
            justifyContent: 'flex-end', flexShrink: 0,
            boxShadow: 'inset 0 0 0 0.5px rgba(24,30,50,0.10)',
          }}>
            <div style={{
              width: 20, height: 20, borderRadius: 999,
              background: '#fff', boxShadow: '0 1px 2px rgba(24,30,50,0.18)',
            }}/>
          </div>
        </div>

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

        <button style={gsCtaPrimary}>
          Lock it in
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 00h · GENERATING — first brief is being built
// ─────────────────────────────────────────────────────────────
function ScreenGsGenerating() {
  const stages = [
    { label: 'Scanning your sources',     meta: '12 found',           state: 'done' },
    { label: 'Picking 6 stories',         meta: 'worth your morning', state: 'done' },
    { label: 'Writing segments',          meta: '~40 seconds',        state: 'active' },
    { label: 'Mixing the audio',          meta: 'with Maya',          state: 'pending' },
  ];
  return (
    <div className="rv-screen rv" style={{ background: 'var(--bg-1)' }}>
      <StatusBar time="9:46"/>
      <GsTopBar step={5} showBack={false} showSkip={false}/>

      {/* Magenta wash top-right */}
      <div style={{
        position: 'absolute', top: -100, right: -120, width: 360, height: 360,
        borderRadius: '50%', background: 'var(--magenta-tint)', filter: 'blur(40px)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Hero — pulsing glyph cluster */}
        <div style={{
          marginTop: 4, position: 'relative', height: 170,
          display: 'flex', justifyContent: 'center', alignItems: 'center',
        }}>
          <div className="rv-pulse" style={{
            position: 'absolute', width: 170, height: 170, borderRadius: '50%',
            background: 'radial-gradient(circle, var(--accent-tint) 0%, transparent 65%)',
          }}/>
          <div style={{ position: 'relative' }}>
            <ColorChip size={92} kind="mic" bg="var(--accent)" fg="#fff" radius={22} rotate={-6}/>
            <div style={{
              position: 'absolute', top: -18, right: -22,
            }}>
              <ColorChip size={48} kind="sparks" bg="var(--magenta)" fg="#fff" radius={12} rotate={12}/>
            </div>
            <div style={{
              position: 'absolute', bottom: -10, left: -22,
            }}>
              <ColorChip size={36} kind="wave" bg="var(--yellow)" fg="var(--text)" radius={10} rotate={-4}/>
            </div>
          </div>
        </div>

        {/* Headline */}
        <div style={{ marginTop: 22 }}>
          <div className="rv-overline" style={{ color: 'var(--accent-deep)', marginBottom: 10 }}>
            BUILDING YOUR FIRST BRIEF
          </div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 32, color: 'var(--text)', textWrap: 'balance',
          }}>
            Sit tight —{' '}
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.025em' }}>
              tuning the room.
            </span>
          </h1>
          <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.45 }}>
            About 90 seconds. After this, your brief lands every morning automatically.
          </p>
        </div>

        {/* Stage list */}
        <div style={{
          marginTop: 20, padding: '6px 14px',
          background: 'var(--bg)', border: '0.5px solid var(--line)',
          borderRadius: 16,
          boxShadow: '0 1px 0 rgba(24,30,50,0.03)',
        }}>
          {stages.map((s, i) => {
            const last = i === stages.length - 1;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 0',
                borderBottom: last ? 0 : '0.5px solid var(--line)',
              }}>
                {/* Status indicator */}
                <div style={{
                  width: 26, height: 26, borderRadius: 999, flexShrink: 0,
                  background: s.state === 'done' ? 'var(--accent)'
                    : s.state === 'active' ? 'var(--accent-tint)'
                    : 'var(--bg-2)',
                  color: s.state === 'done' ? '#fff' : 'var(--accent-deep)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: s.state === 'pending' ? '0.5px solid var(--line-strong)' : 0,
                }}>
                  {s.state === 'done' ? (
                    <IcCheck s={14} stroke="#fff" w={2.6}/>
                  ) : s.state === 'active' ? (
                    <div style={{
                      width: 9, height: 9, borderRadius: 999, background: 'var(--accent)',
                      animation: 'rv-pulse 1.2s ease-in-out infinite',
                    }}/>
                  ) : null}
                </div>

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 13.5, fontWeight: 600,
                    color: s.state === 'pending' ? 'var(--text-3)' : 'var(--text)',
                  }}>{s.label}</div>
                  <div style={{ marginTop: 1, fontSize: 11.5, color: 'var(--text-3)' }}>{s.meta}</div>
                </div>

                {s.state === 'active' && (
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600,
                    color: 'var(--accent-deep)',
                    padding: '3px 8px', borderRadius: 999,
                    background: 'var(--accent-tint)', letterSpacing: '0.04em',
                  }}>NOW</span>
                )}
              </div>
            );
          })}
        </div>

        {/* Did you know */}
        <div style={{
          marginTop: 16, padding: '12px 14px 12px 12px',
          background: 'var(--bg)', border: '0.5px dashed var(--line-strong)',
          borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <AwesomeStar size={28} color="var(--yellow)"/>
          <div style={{ flex: 1, minWidth: 0, fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.4 }}>
            <span style={{ color: 'var(--text)', fontWeight: 600 }}>Tip · </span>
            Tap any source chip in a brief to jump to the original article — like footnotes for your ears.
          </div>
        </div>

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

        {/* Secondary action while waiting */}
        <button style={{
          width: '100%', height: 50, borderRadius: 14,
          border: '0.5px solid var(--line-strong)',
          background: 'var(--bg)', color: 'var(--text)',
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Notify me when it's ready
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

Object.assign(window, {
  ScreenGsConcept, ScreenGsHowItWorks, ScreenGsVoice, ScreenGsSchedule, ScreenGsGenerating,
});