/* OVM AboutScreen */
const _DSab = window.OgdenVictoryMindsetDesignSystem_d92c3e;

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

  const timeline = [
    { yr: 'NFL', t: 'The League', d: 'Offensive lineman — Jaguars, Ravens, and beyond. The locker room becomes the first leadership lab.' },
    { yr: '2013', t: 'The $2M Loss', d: 'A construction venture collapses. Bankruptcy. Rock bottom — and the start of the real curriculum.' },
    { yr: 'Now', t: 'The Platform', d: '50+ stages a year, a top-0.5% podcast, a high-trust mastermind, and five bestselling books.' },
  ];

  return (
    <div>
      {/* HERO */}
      <VideoBackground src="../../assets/video/business-meeting-2.mp4" poster="../../assets/posters/business-meeting-2.jpg" scrim="left" tint={0.3} edge grain minHeight="80vh" objectPosition="center 25%">
        <div className="ovm-container ovm-container--wide" style={{ minHeight: '80vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: '120px 70px' }}>
          <div className="ovm-reveal" style={{ maxWidth: 820 }}>
            <Badge tone="blue" dot style={{ marginBottom: 20 }}>About</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)' }}>
              Marques <span style={{ color: 'var(--blue-400)' }}>Ogden</span>
            </h1>
            <p style={{ marginTop: 22, fontSize: 'clamp(1.05rem, 1rem + 0.5vw, 1.3rem)', color: 'var(--steel-200)', maxWidth: 620, lineHeight: 1.55 }}>
              Former NFL offensive lineman. Five-time bestselling author. Top-0.5% podcast host. One of the most in-demand corporate keynote speakers in America.
            </p>
          </div>
        </div>
      </VideoBackground>

      {/* BIO */}
      <section className="ovm-container ovm-section" style={{ maxWidth: 820 }}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.2rem, 1rem + 0.8vw, 1.6rem)', lineHeight: 1.5, color: 'var(--text-body)', fontWeight: 500, textWrap: 'pretty' }}>
          Marques's career arc — from the league, through bankruptcy, to building a multi-vertical leadership business — <span style={{ color: 'var(--blue-300)' }}>is the curriculum</span>. He doesn't teach theory. He teaches the road he actually walked.
        </p>
        <p style={{ marginTop: 24, fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-muted)' }}>
          Today he speaks on 50+ stages a year, hosts 1,000+ guests on his podcast, runs a high-trust mastermind for second-half-of-life leaders, and coaches founders, athletes, and executives navigating their own pivots. Ogden Victory Mindset is the platform that ties all of it together — for anyone betting on what comes next.
        </p>
      </section>

      {/* TIMELINE */}
      <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">
          <Eyebrow>The Journey</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 12, marginBottom: 'var(--space-7)' }}>Three chapters, one throughline</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--space-5)' }}>
            {timeline.map((c, i) => (
              <Card key={i} hover={false} style={{ padding: 'var(--space-6)', position: 'relative', overflow: 'hidden' }}>
                <span style={{ position: 'absolute', top: 0, left: 0, width: 3, height: '100%', background: 'var(--grad-blue)' }} />
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 30, color: 'var(--blue-400)', letterSpacing: '-0.02em' }}>{c.yr}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)', marginTop: 8, marginBottom: 8 }}>{c.t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{c.d}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="ovm-container ovm-section" style={{ textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--fs-h1)', textTransform: 'uppercase', letterSpacing: '-0.025em', color: 'var(--text-strong)', lineHeight: 1, textWrap: 'balance' }}>Bring the story to your stage</h2>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
          <Button variant="gradient" size="lg" iconRight={<window.ArrowRight size={18} />} onClick={() => onNav && onNav('speaking')}>Book Marques</Button>
          <Button variant="outline" size="lg" onClick={() => onNav && onNav('podcast')}>Hear the podcast</Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutScreen });