/* The Snowberry website — Hero (looping home video, photo fallback) */
function Hero({ onTour, onNav }) {
  const { Button, Badge } = window.TheSnowberryDesignSystem_ed783b;
  const [videoOk, setVideoOk] = React.useState(true);
  const reduceMotion = React.useMemo(() => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches, []);
  return (
    <section id="top" style={{ position: 'relative', minHeight: 'min(760px, 92vh)', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      <img src="assets/images/exterior-front.jpg" alt="The Snowberry home exterior"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      {videoOk && !reduceMotion && (
        <video autoPlay muted loop playsInline preload="metadata" aria-hidden="true" tabIndex={-1}
               onError={() => setVideoOk(false)}
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}>
          <source src="../../assets/videos/hero.mp4" type="video/mp4" onError={() => setVideoOk(false)} />
        </video>
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(36,58,32,0.45) 0%, rgba(36,58,32,0.20) 45%, rgba(36,58,32,0.82) 100%)' }}></div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(36,58,32,0.62) 0%, rgba(36,58,32,0.30) 42%, transparent 70%)' }}></div>
      <div className="sb-hero-pad" style={{ position: 'relative', maxWidth: 'var(--container-wide)', width: '100%', margin: '0 auto', padding: '0 40px 72px' }}>
        <div style={{ maxWidth: 720 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(253,251,248,0.85)', marginBottom: 22 }}>
            A small home in Denison, Texas
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(44px, 6.5vw, 84px)', lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--cream)', margin: 0, textWrap: 'balance' }}>
            A real home.<br /><em style={{ fontStyle: 'italic' }}>With room for twelve.</em>
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.5, color: 'rgba(253,251,248,0.92)', maxWidth: 520, margin: '26px 0 34px' }}>
            When Mom can’t live alone anymore, she deserves a real home with a seat at the table. Come see what small feels like.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button variant="onGreen" size="lg" onClick={onTour}>Schedule a quiet tour</Button>
            <Button variant="onGreenGhost" size="lg" onClick={()=>onNav&&onNav('care')}>How we care</Button>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 34 }}>
            <Badge tone="onGreen">HHSC Type A</Badge>
            <Badge tone="onGreen">12 Beds</Badge>
            <Badge tone="onGreen">1:5 Ratio</Badge>
            <Badge tone="onGreen">24/7 eMAR</Badge>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;