/* OVM PodcastScreen */
const _DSpod = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function PodcastScreen({ onNav }) {
  const { VideoBackground, Button, Eyebrow, Card, Badge, Stat } = _DSpod;

  const episodes = [
    { n: '218', t: 'Rebuilding Pipeline Discipline After a Brutal Quarter', g: 'Fortune 500 Sales Leader', len: '52 min' },
    { n: '217', t: 'An Authentic Story of Strength and Resilience', g: 'Eric Price · Educator', len: '47 min' },
    { n: '216', t: 'From Rock Bottom to Comeback — The Roadmap', g: 'Marques Ogden (solo)', len: '38 min' },
    { n: '215', t: 'Leadership Under Pressure: Real Frameworks', g: 'Panel · 3 CROs', len: '61 min' },
  ];

  return (
    <div>
      {/* HERO */}
      <VideoBackground src="../../assets/video/podcast-1.mp4" poster="../../assets/posters/podcast-1.jpg" scrim="left" tint={0.28} edge grain minHeight="84vh" objectPosition="center 30%">
        <div className="ovm-container ovm-container--wide" style={{ minHeight: '84vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: '120px 70px' }}>
          <div className="ovm-reveal" style={{ maxWidth: 820 }}>
            <Badge tone="blue" dot style={{ marginBottom: 20 }}>Top 0.5% · US Podcast</Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.8rem, 1rem + 7vw, 6.4rem)', lineHeight: 0.94, letterSpacing: '-0.035em', textTransform: 'uppercase', color: '#fff', textShadow: '0 4px 40px rgba(0,0,0,0.55)' }}>
              The comeback,<br />on the record
            </h1>
            <p style={{ marginTop: 22, fontSize: 'clamp(1.05rem, 1rem + 0.5vw, 1.3rem)', color: 'var(--steel-200)', maxWidth: 580, lineHeight: 1.55 }}>
              1,000+ guests. 100+ Fortune 500 leaders. Honest conversations about resilience, leadership, and building what's next — new episodes every week, always free.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <Button variant="gradient" size="lg" iconLeft={<window.PlaySolid size={15} />}>Play latest</Button>
              <Button variant="glass" size="lg" iconLeft={<window.Headphones size={17} />}>Subscribe</Button>
            </div>
          </div>
        </div>
      </VideoBackground>

      {/* STATS */}
      <section style={{ background: 'var(--ink-850)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div className="ovm-container ovm-container--wide" style={{ paddingBlock: 'var(--space-7)', display: 'flex', gap: 'var(--space-7)', flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <Stat value="0.5%" label="Top podcast (US)" size="lg" />
          <Stat value="1,000+" label="Guests interviewed" size="lg" />
          <Stat value="100+" label="Fortune 500 leaders" size="lg" />
          <Stat value="Weekly" label="New episodes" size="lg" />
        </div>
      </section>

      {/* EPISODES */}
      <section className="ovm-container ovm-container--wide ovm-section">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 'var(--space-6)' }}>
          <div>
            <Eyebrow>Latest Episodes</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 12 }}>Press play</h2>
          </div>
          <Button variant="ghost" iconRight={<window.ArrowRight size={16} />}>All episodes</Button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {episodes.map((e, i) => (
            <Card key={i} onClick={() => {}} style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '18px 22px' }}>
              <span style={{ flex: 'none', width: 52, height: 52, borderRadius: '50%', background: 'var(--grad-blue)', color: 'var(--text-on-blue)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--glow-blue-sm)' }}><window.PlaySolid size={20} /></span>
              <span style={{ flex: 'none', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-faint)', width: 40 }}>#{e.n}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)', marginBottom: 4 }}>{e.t}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.04em', color: 'var(--text-muted)', textTransform: 'uppercase' }}>{e.g}</div>
              </div>
              <span style={{ flex: 'none', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>{e.len}</span>
            </Card>
          ))}
        </div>
      </section>

      {/* CTA VIDEO */}
      <VideoBackground src="../../assets/video/podcast-2.mp4" poster="../../assets/posters/podcast-2.jpg" scrim="full" tint={0.4} minHeight="50vh" edge>
        <div className="ovm-container" style={{ minHeight: '50vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', paddingBlock: 64 }}>
          <Eyebrow color="var(--blue-300)">Want to be a guest?</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(1.8rem, 1rem + 3vw, 3.2rem)', textTransform: 'uppercase', letterSpacing: '-0.025em', color: '#fff', lineHeight: 1, marginTop: 14, textShadow: '0 2px 30px rgba(0,0,0,0.5)' }}>Bring your comeback story</h2>
          <div style={{ marginTop: 24 }}><Button variant="gradient" size="lg" onClick={() => onNav && onNav('speaking')}>Pitch the show</Button></div>
        </div>
      </VideoBackground>
    </div>
  );
}

Object.assign(window, { PodcastScreen });