/* OVM HomeScreen */
const _DS = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function HomeScreen({ onNav }) {
  const { VideoBackground, Button, Eyebrow, Stat, ProgramCard, Badge } = _DS;
  const go = (id) => () => onNav && onNav(id);

  const programs = [
    { video: 'public-speaking-1', title: 'Keynote Speaking', blurb: 'Main-stage keynotes on leadership, resilience, and the comeback — for conferences and corporate events.', id: 'speaking' },
    { video: 'podcast-1', title: 'The Podcast', blurb: 'A top-0.5% US show. 1,000+ guests, 100+ Fortune 500 leaders. New episodes every week — free.', id: 'podcast' },
    { video: 'business-meeting-1', title: 'Mastermind 1.0', blurb: 'A 12-seat in-person founders’ cohort. Two retreat weekends, monthly calls, a year of mentorship.', id: 'home' },
    { video: 'podcast-2', title: 'Podcast Coaching', blurb: 'Launch a top-10% podcast with hands-on coaching from a top-0.5% host.', id: 'home' },
    { video: 'marques-stage', title: 'The Book', blurb: 'Built for the Storm — identity, execution, and second-half-of-life leadership. Signed editions.', id: 'book' },
    { video: 'business-meeting-2', title: 'For Teams', blurb: 'The full Ogden Academy library, white-labeled for your team. Per-seat pricing.', id: 'home' },
  ];

  // Video-backed program card — looping footage with scrim, lifts + glows on hover.
  function VideoProgramCard({ video, title, blurb, onClick }) {
    const [h, setH] = React.useState(false);
    const vref = React.useRef(null);
    React.useEffect(() => { const v = vref.current; if (v) { v.load(); v.play().catch(() => {}); } }, []);
    return (
      <a href="#" onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
        position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        minHeight: 380, borderRadius: 'var(--radius-lg)', overflow: 'hidden',
        border: '1px solid ' + (h ? 'var(--border-blue)' : 'var(--border-subtle)'),
        boxShadow: h ? 'var(--glow-blue)' : 'var(--shadow-card)',
        transform: h ? 'translateY(-4px)' : 'none', background: 'var(--ink-950)', isolation: 'isolate',
        transition: 'transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
      }}>
        <video ref={vref} muted loop playsInline autoPlay preload="auto"
          poster={'../../assets/posters/' + video + '.jpg'}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0,
            transform: h ? 'scale(1.07)' : 'scale(1.01)', transition: 'transform 1.2s var(--ease-out)', filter: 'saturate(1.05)' }}>
          <source src={'../../assets/video/' + video + '.mp4'} type="video/mp4" />
        </video>
        <span aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'var(--scrim-bottom)', pointerEvents: 'none' }} />
        <span aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'rgba(4,6,10,0.22)', pointerEvents: 'none' }} />
        <span aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'var(--grad-edge)', opacity: h ? 1 : 0, transition: 'opacity var(--dur-base) var(--ease-out)', zIndex: 2 }} />
        <span style={{ position: 'relative', zIndex: 2, padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h4)', letterSpacing: '-0.01em', color: 'var(--text-strong)' }}>{title}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', lineHeight: 1.55, color: 'var(--text-body)' }}>{blurb}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 6, fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: h ? 'var(--blue-300)' : 'var(--blue-400)', transition: 'color var(--dur-base)' }}>
            Explore <window.ArrowRight size={15} style={{ transform: h ? 'translateX(4px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }} />
          </span>
        </span>
      </a>
    );
  }

  return (
    <div>
      {/* HERO */}
      <VideoBackground src="../../assets/video/marques-stage.mp4" poster="../../assets/posters/marques-stage.jpg"
        scrim="left" tint={0.25} edge grain minHeight="92vh" objectPosition="center 25%">
        <div className="ovm-container ovm-container--wide" style={{ minHeight: '92vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: '120px 80px' }}>
          <div style={{ maxWidth: 820 }} className="ovm-reveal">
            <Badge tone="blue" dot variant="soft" style={{ marginBottom: 22 }}>Keynote Speaker · Author · Coach</Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(3rem, 1rem + 8vw, 7.2rem)', lineHeight: 0.92, letterSpacing: '-0.035em', textTransform: 'uppercase', color: '#fff', textShadow: '0 4px 40px rgba(0,0,0,0.5)' }}>
              Bet on what<br />comes <span style={{ background: 'var(--grad-blue)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>next</span>
            </h1>
            <p style={{ marginTop: 26, fontSize: 'clamp(1.05rem, 1rem + 0.5vw, 1.35rem)', lineHeight: 1.55, color: 'var(--steel-200)', maxWidth: 560 }}>
              From the NFL, through bankruptcy, to a multi-vertical leadership business. Marques Ogden turns the comeback into a curriculum for your stage, your team, and your second half.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
              <Button variant="gradient" size="lg" iconRight={<window.ArrowRight size={18} />} onClick={go('speaking')}>Book Marques</Button>
              <Button variant="glass" size="lg" iconLeft={<window.PlaySolid size={15} />} onClick={go('podcast')}>Watch the reel</Button>
            </div>
          </div>
        </div>
      </VideoBackground>

      {/* STATS BAR */}
      <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="100M+" label="Audience reached" size="lg" />
          <Stat value="0.5%" label="Top podcast (US)" size="lg" />
          <Stat value="5x" label="Bestselling author" size="lg" />
          <Stat value="500+" label="Stages spoken on" size="lg" />
          <Stat value="1,000+" label="Podcast guests" size="lg" />
        </div>
      </section>

      {/* PRESS ROW */}
      <section className="ovm-container ovm-container--wide" style={{ paddingBlock: 'var(--space-7)' }}>
        <div style={{ textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: 24 }}>As featured in</div>
        <div style={{ display: 'flex', gap: 'clamp(20px, 4vw, 56px)', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
          {['Forbes', 'AP News', 'USA Today', 'Yahoo', 'Authority', 'Benzinga', 'Google News'].map(n => (
            <span key={n} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(15px, 1.4vw, 21px)', color: 'var(--steel-500)', letterSpacing: '-0.01em', opacity: 0.85 }}>{n}</span>
          ))}
        </div>
      </section>

      {/* PROGRAMS */}
      <section className="ovm-container ovm-container--wide ovm-section">
        <div style={{ maxWidth: 680, marginBottom: 'var(--space-7)' }}>
          <Eyebrow>The Programs</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h1)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 16, textWrap: 'balance' }}>One mission. Six ways in.</h2>
          <p style={{ marginTop: 16, fontSize: 'var(--fs-lead)', color: 'var(--text-muted)', lineHeight: 1.55 }}>Every program serves a different audience. Every one funds the same mission: build leaders who bet on the future, not the past.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {programs.map((p, i) => (
            <VideoProgramCard key={i} video={p.video} title={p.title} blurb={p.blurb} onClick={(e) => { e.preventDefault(); onNav && onNav(p.id); }} />
          ))}
        </div>
      </section>

      {/* VIDEO QUOTE BAND */}
      <VideoBackground src="../../assets/video/business-meeting-1.mp4" poster="../../assets/posters/business-meeting-1.jpg" scrim="full" tint={0.35} minHeight="62vh" edge>
        <div className="ovm-container" style={{ minHeight: '62vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', paddingBlock: 80 }}>
          <window.Quote size={40} color="var(--blue-400)" style={{ marginBottom: 24 }} />
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.6rem, 1rem + 2.6vw, 3.2rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: '#fff', maxWidth: 1000, textWrap: 'balance', textShadow: '0 2px 30px rgba(0,0,0,0.5)' }}>
            “Marques didn’t give us a speech. He gave the room a new standard — and the language to hold each other to it.”
          </p>
          <div style={{ marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 12.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--blue-300)' }}>VP, Learning &amp; Development · Fortune 500</div>
        </div>
      </VideoBackground>

      {/* CTA */}
      <section className="ovm-container ovm-section" style={{ textAlign: 'center' }}>
        <Eyebrow>Ready when you are</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--fs-h1)', textTransform: 'uppercase', letterSpacing: '-0.025em', color: 'var(--text-strong)', marginTop: 16, lineHeight: 1, textWrap: 'balance' }}>Put Marques on your stage</h2>
        <p style={{ marginTop: 18, fontSize: 'var(--fs-lead)', color: 'var(--text-muted)', maxWidth: 560, marginInline: 'auto' }}>Tell us about your event and we’ll send availability and a custom plan within one business day.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
          <Button variant="gradient" size="lg" iconRight={<window.ArrowRight size={18} />} onClick={go('speaking')}>Check availability</Button>
          <Button variant="outline" size="lg" onClick={go('book')}>Get the book</Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen });