/* Hero — full-bleed ambient video/image with protection gradient */
function Hero({ onBook }) {
  return (
    <section id="top" style={{ position: 'relative', minHeight: 660, display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      {/* media */}
      <video
        autoPlay muted loop playsInline poster="assets/images/hero.png"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
      >
        <source src="assets/images/hero.mp4" type="video/mp4" />
      </video>
      {/* protection gradient bottom-left */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(10,48,47,0.80) 0%, rgba(10,48,47,0.44) 42%, rgba(10,48,47,0.06) 72%, transparent 100%)' }}></div>

      <Container style={{ position: 'relative', paddingBottom: 76, paddingTop: 68, width: '100%' }}>
        <div style={{ maxWidth: 640 }}>
          <div style={{ marginBottom: 22 }}>
            <Overline style={{ color: 'var(--teal-200)', textShadow: '0 1px 6px rgba(10,48,47,0.4)' }}>Walk-in and family medicine in Vancouver</Overline>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 66, lineHeight: 1.03, letterSpacing: '-0.02em', color: '#fff', margin: 0 }}>
            Care that fits your life.
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.93)', margin: '22px 0 0', maxWidth: 520 }}>
            Same-day when you are unwell. Here for the long run when you are not. Walk in, or book a spot online and see the wait before you arrive.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap' }}>
            <Button size="lg" icon="calendar-check" onClick={onBook}>Book a same-day visit</Button>
            <Button size="lg" variant="white" iconRight="clock">See today's estimated wait</Button>
          </div>
          <div style={{ marginTop: 28, display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap', color: 'rgba(255,255,255,0.92)', fontSize: 14.5, fontWeight: 500 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={16} color="var(--teal-200)" /> Open 7 days</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={16} color="var(--teal-200)" /> Walk-ins welcome</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={16} color="var(--teal-200)" /> Most visits covered by MSP</span>
          </div>
        </div>
      </Container>
    </section>
  );
}
window.Hero = Hero;