/* OVM SpeakingScreen */
const _DSsp = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function SpeakingScreen({ onNav }) {
  const { VideoBackground, Button, Eyebrow, Card, Input, Badge } = _DSsp;
  const [sent, setSent] = React.useState(false);

  const topics = [
    { icon: <window.Trophy size={22} />, t: 'Resilience & The Comeback', d: 'Losing $2M and rebuilding from rock bottom — the exact roadmap, told without the gloss.' },
    { icon: <window.Target size={22} />, t: 'Leadership Under Pressure', d: 'Real frameworks for decisions when the stakes, the clock, and the doubt are all at their peak.' },
    { icon: <window.Zap size={22} />, t: 'Sales Excellence', d: 'How a Fortune 500 org rebuilt pipeline discipline — and hit the number after a brutal quarter.' },
    { icon: <window.Activity size={22} />, t: 'Mindset & Transformation', d: 'The identity shift that lets second-half-of-life leaders bet on the future, not the past.' },
  ];
  const formats = ['Keynote (45–60 min)', 'Half-day workshop', 'Fireside / panel', 'Executive offsite', 'Virtual / hybrid'];

  return (
    <div>
      {/* HERO */}
      <VideoBackground src="../../assets/video/public-speaking-1.mp4" poster="../../assets/posters/public-speaking-1.jpg" scrim="bottom" tint={0.2} edge grain minHeight="86vh" objectPosition="center 20%">
        <div className="ovm-container ovm-container--wide" style={{ minHeight: '86vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBlock: '120px 64px' }}>
          <div className="ovm-reveal" style={{ maxWidth: 900 }}>
            <Badge tone="blue" dot style={{ marginBottom: 20 }}>Keynote Speaker</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)' }}>
              Own the room.<br /><span style={{ color: 'var(--blue-400)' }}>Move</span> the room.
            </h1>
            <p style={{ marginTop: 22, fontSize: 'clamp(1.05rem, 1rem + 0.5vw, 1.3rem)', color: 'var(--steel-200)', maxWidth: 600, lineHeight: 1.55 }}>
              One of the most in-demand corporate keynote speakers in America — booked for conferences, sales kickoffs, and executive training across 500+ stages.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <Button variant="gradient" size="lg" iconRight={<window.ArrowRight size={18} />} onClick={() => window.ovmScrollTo && window.ovmScrollTo('booking')}>Check availability</Button>
              <Button variant="glass" size="lg" iconLeft={<window.PlaySolid size={15} />}>Watch the reel</Button>
            </div>
          </div>
        </div>
      </VideoBackground>

      {/* TOPICS */}
      <section className="ovm-container ovm-container--wide ovm-section">
        <div style={{ maxWidth: 640, marginBottom: 'var(--space-7)' }}>
          <Eyebrow>Signature Talks</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 14, lineHeight: 1.08 }}>Four talks. One throughline.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-5)' }}>
          {topics.map((t, i) => (
            <Card key={i} hover={false} style={{ display: 'flex', gap: 18, padding: 'var(--space-6)' }}>
              <span style={{ flex: 'none', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'rgba(0,168,240,0.12)', border: '1px solid var(--border-blue)', color: 'var(--blue-400)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{t.icon}</span>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: 'var(--text-strong)', marginBottom: 8 }}>{t.t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{t.d}</p>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* BOOKING */}
      <section id="booking" 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: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 'var(--space-8)', alignItems: 'start' }} data-booking-grid>
          <div>
            <Eyebrow>Book Marques</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 14, lineHeight: 1.05 }}>Tell us about your event</h2>
            <p style={{ marginTop: 16, fontSize: 'var(--fs-lead)', color: 'var(--text-muted)', lineHeight: 1.55 }}>Share the basics and we’ll respond with availability and a custom plan within one business day.</p>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Custom-built for your audience and outcome', 'Pre-event strategy call included', 'Travels from Orlando, FL — books nationwide'].map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <span style={{ width: 26, height: 26, flex: 'none', borderRadius: '50%', background: 'var(--success-soft)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><window.Check size={15} /></span>
                  <span style={{ fontSize: 15, color: 'var(--text-body)' }}>{f}</span>
                </div>
              ))}
            </div>
          </div>

          <Card glow hover={false} style={{ padding: 'var(--space-7)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', paddingBlock: 40 }}>
                <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--success-soft)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><window.Check size={28} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-strong)' }}>Request received</h3>
                <p style={{ marginTop: 10, color: 'var(--text-muted)' }}>We’ll be in touch within one business day.</p>
                <div style={{ marginTop: 22 }}><Button variant="outline" onClick={() => setSent(false)}>Send another</Button></div>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Input label="Full name" placeholder="Jane Doe" required />
                <Input label="Work email" placeholder="you@company.com" required />
                <Input label="Organization" placeholder="Company / event" />
                <Input label="Event date" placeholder="MM / DD / YYYY" />
                <div style={{ gridColumn: '1 / -1' }}><Input label="Format" as="select" options={formats} /></div>
                <div style={{ gridColumn: '1 / -1' }}><Input label="About the event" as="textarea" placeholder="Audience, goals, location…" /></div>
                <div style={{ gridColumn: '1 / -1' }}><Button type="submit" variant="gradient" full size="lg" iconRight={<window.ArrowRight size={18} />}>Request availability</Button></div>
              </form>
            )}
          </Card>
        </div>
      </section>

      {/* SECONDARY VIDEO STRIP */}
      <VideoBackground src="../../assets/video/public-speaking-3.mp4" poster="../../assets/posters/public-speaking-3.jpg" scrim="full" tint={0.35} minHeight="52vh" edge>
        <div className="ovm-container" style={{ minHeight: '52vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', paddingBlock: 70 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(1.8rem, 1rem + 3vw, 3.4rem)', textTransform: 'uppercase', letterSpacing: '-0.025em', color: '#fff', lineHeight: 1, textShadow: '0 2px 30px rgba(0,0,0,0.5)' }}>Standing ovations,<br />not slide decks</h2>
          <div style={{ marginTop: 26 }}><Button variant="gradient" size="lg" onClick={() => window.ovmScrollTo && window.ovmScrollTo('booking')}>Book your date</Button></div>
        </div>
      </VideoBackground>
    </div>
  );
}

Object.assign(window, { SpeakingScreen });