// Full-bleed hero — looping farm video, serif overlay, scroll cue.
const Hero = ({ openBooking }) => (
  <section className="slf-hero" style={{
    position: 'relative', height: '100vh',
    minHeight: 640, overflow: 'hidden',
    background: 'var(--bg-inverse)',
    marginTop: -68, // pull under the transparent nav so it fills the viewport
  }}>
    <video
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
      src="assets/hero-video.mp4"
      autoPlay loop muted playsInline
      poster="assets/farm/hills.jpg"
    />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(to top, rgba(46,42,38,0.72) 0%, rgba(46,42,38,0.28) 45%, rgba(46,42,38,0.16) 100%)',
    }}/>

    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      padding: '0 56px 88px',
      color: 'var(--cream)',
    }}>
      <div className="slf-rise slf-hero-meta" style={{
        fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--cream)', opacity: 0.86, marginBottom: 22,
      }}>
        Luxborough · Somerset · Edge of Exmoor
      </div>
      <h1 className="slf-rise slf-hero-title" style={{
        fontFamily: 'var(--font-serif)',
        fontSize: 'clamp(48px, 7vw, 96px)',
        fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.015em',
        margin: 0, color: 'var(--cream)',
        textWrap: 'balance', maxWidth: '16ch',
        animationDelay: '120ms',
      }}>
        Two cottages.<br/>One working farm.
      </h1>
      <p className="slf-rise slf-hero-sub" style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 'clamp(20px, 1.8vw, 26px)', lineHeight: 1.5,
        color: 'var(--cream)', opacity: 0.92,
        marginTop: 18, maxWidth: '46ch',
        animationDelay: '240ms',
      }}>
        Slow down. Stay a while.
      </p>

      <div className="slf-rise slf-hero-ctas" style={{
        marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap',
        animationDelay: '360ms',
      }}>
        <button className="slf-btn slf-btn-terra" onClick={() => openBooking()}>
          Check availability
        </button>
        <a href="#cottages" className="slf-btn" style={{
          background: 'rgba(245,239,226,0.10)',
          color: 'var(--cream)',
          border: '1px solid rgba(245,239,226,0.45)',
          padding: '12px 22px', fontSize: 14, fontWeight: 600,
          textDecoration: 'none',
        }}>
          See both cottages →
        </a>
      </div>
    </div>

    {/* Tiny scroll-cue at bottom */}
    <div className="slf-hero-scrollcue" style={{
      position: 'absolute', left: '50%', bottom: 18,
      transform: 'translateX(-50%)',
      fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600,
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color: 'rgba(245,239,226,0.7)',
    }}>
      ✦ &nbsp;&nbsp;Scroll&nbsp;&nbsp; ✦
    </div>
  </section>
);

window.Hero = Hero;