// Hero.jsx — the threshold. Full-bleed ambient video; the founding welcome
// in the upper sky, the voice memo waiting just below. Figures & doorway stay clear.
function Hero() {
  return (
    <header id="top" style={{
      position:'relative', minHeight:'100svh', display:'flex', flexDirection:'column',
      overflow:'hidden', background:'var(--tides-dark)',
    }}>
      {/* ambient scene — ping-pong loop baked in */}
      <video
        autoPlay loop muted playsInline
        style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', zIndex:0 }}>
        <source src="assets/hero.webm" type="video/webm" />
      </video>

      {/* soft dark veil at top only — enough to read text, never blocks the scene */}
      <div style={{
        position:'absolute', inset:0, zIndex:1, pointerEvents:'none',
        background:'linear-gradient(to bottom, rgba(40,26,15,0.52) 0%, rgba(40,26,15,0.22) 16%, rgba(40,26,15,0) 38%)',
      }} />
      {/* the faintest warm lift behind the lower card so it rests on the sand */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, height:'46%', zIndex:1, pointerEvents:'none',
        background:'linear-gradient(to top, rgba(40,26,15,0.30) 0%, rgba(40,26,15,0) 100%)',
      }} />

      <div style={{
        position:'relative', zIndex:2, flex:1, display:'flex', flexDirection:'column',
        justifyContent:'space-between', gap:40,
        padding:'clamp(120px,16vh,180px) clamp(24px,6vw,72px) clamp(40px,7vh,72px)',
      }}>
        {/* upper sky — welcome */}
        <div className="reveal in" style={{ textAlign:'center', maxWidth:1000, margin:'0 auto' }}>
          <h1 style={{
            fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400,
            fontSize:'clamp(34px, 5.6vw, 72px)', lineHeight:1.08, letterSpacing:'0.005em',
            color:'var(--on-dark)', margin:0, textWrap:'balance',
            textShadow:'0 2px 30px rgba(40,26,15,0.42)',
          }}>
            You're welcome, you are seen,<br className="hero-br" /> and you are supported.
          </h1>
          <p style={{
            fontFamily:'var(--sans-body)', fontWeight:400,
            fontSize:'clamp(11px,1.3vw,13.5px)', letterSpacing:'0.28em', textTransform:'uppercase',
            fontVariant:'all-small-caps', color:'var(--on-dark)', opacity:0.9,
            margin:'clamp(20px,3vh,30px) auto 0', maxWidth:560,
            textShadow:'0 1px 18px rgba(40,26,15,0.5)',
          }}>
            You've been walking toward something you can't yet name.
          </p>
        </div>

        {/* lower — the voice memo, the only call to action */}
        <div className="reveal in" data-d="2" id="voice-memo" style={{ width:'100%' }}>
          <VoiceMemo />
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;