/* OVM BookScreen */
const _DSbk = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function BookScreen({ onNav }) {
  const { VideoBackground, Button, Eyebrow, Card, Badge } = _DSbk;
  const learn = [
    'The identity shift behind every real comeback',
    'How to execute when the stakes and the doubt both peak',
    'Building a second-half-of-life leadership operating system',
    'The exact roadmap from rock bottom back to the top',
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{ position: 'relative', background: 'var(--ink-900)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 75% 20%, rgba(0,168,240,0.16), transparent 60%)' }} />
        <div className="ovm-container ovm-container--wide" style={{ position: 'relative', paddingBlock: '140px 90px', display: 'grid', gridTemplateColumns: '1fr minmax(280px, 420px)', gap: 'var(--space-8)', alignItems: 'center' }} data-book-grid>
          <div className="ovm-reveal">
            <Badge tone="blue" dot style={{ marginBottom: 20 }}>New Book · Signed Editions</Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.6rem, 1rem + 6vw, 5.6rem)', lineHeight: 0.94, letterSpacing: '-0.035em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>
              Built for<br />the <span style={{ background: 'var(--grad-blue)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>storm</span>
            </h1>
            <p style={{ marginTop: 22, fontSize: 'clamp(1.05rem, 1rem + 0.5vw, 1.3rem)', color: 'var(--text-muted)', maxWidth: 520, lineHeight: 1.55 }}>
              Marques's playbook on identity, execution, and second-half-of-life leadership — the operating system he built after losing everything.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap', alignItems: 'center' }}>
              <Button variant="gradient" size="lg" iconRight={<window.ArrowRight size={18} />}>Buy signed — $28</Button>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-faint)' }}>5× bestselling author</span>
            </div>
          </div>
          {/* Book cover mock */}
          <div style={{ justifySelf: 'center', perspective: 1200 }}>
            <div style={{ width: 280, height: 400, borderRadius: '6px 12px 12px 6px', background: 'linear-gradient(135deg, #11161F, #070A10)', border: '1px solid var(--border-strong)', boxShadow: 'var(--glow-blue), -16px 24px 60px -20px rgba(0,0,0,0.9)', transform: 'rotateY(-16deg) rotateX(4deg)', position: 'relative', overflow: 'hidden', padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 14, background: 'linear-gradient(90deg, rgba(255,255,255,0.12), transparent)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 0%, rgba(0,168,240,0.22), transparent 55%)' }} />
              <img src="../../assets/logo-mark.png" alt="" style={{ width: 48, height: 48, position: 'relative' }} />
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--blue-400)', marginBottom: 12 }}>Marques Ogden</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 38, lineHeight: 0.92, letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#fff' }}>Built for the Storm</div>
                <div style={{ marginTop: 16, height: 2, width: 56, background: 'var(--grad-blue)' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT YOU'LL LEARN */}
      <section style={{ background: 'var(--ink-850)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div className="ovm-container ovm-container--wide ovm-section" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-7)' }}>
          <div>
            <Eyebrow>Inside the Book</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 12 }}>What you'll walk away with</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {learn.map((l, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ flex: 'none', width: 30, height: 30, borderRadius: '50%', background: 'rgba(0,168,240,0.12)', border: '1px solid var(--border-blue)', color: 'var(--blue-400)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}><window.Check size={16} /></span>
                <span style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 1.5 }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA VIDEO */}
      <VideoBackground src="../../assets/video/marques-stage.mp4" poster="../../assets/posters/marques-stage.jpg" scrim="full" tint={0.4} minHeight="52vh" edge objectPosition="center 25%">
        <div className="ovm-container" style={{ minHeight: '52vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', paddingBlock: 64 }}>
          <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, textShadow: '0 2px 30px rgba(0,0,0,0.5)' }}>Read it. Then live it.</h2>
          <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="gradient" size="lg">Buy the book</Button>
            <Button variant="glass" size="lg" onClick={() => onNav && onNav('speaking')}>Book the author</Button>
          </div>
        </div>
      </VideoBackground>
    </div>
  );
}

Object.assign(window, { BookScreen });