// HERO. 100vh cinematic. Dragon wings, parallax bg.

function Hero({ onBook }) {
  const y = useScrollY();
  const parallax = Math.min(y * 0.4, 360);

  return (
    <section className="hero scales" id="top">
      <div className="hero__inner-glow" style={{ transform: `translate(-50%, -50%) translateY(${parallax * 0.5}px)` }}/>
      <div className="hero__wings-wrap" style={{ transform: `translate(-50%, -50%) translateY(${parallax}px)` }}>
        <img className="hero__wings" src="assets/dragon-wings.svg" alt="" />
      </div>

      <div className="hero__content">
        <p className="eyebrow eyebrow--cream hero__fade hero__fade--1" style={{ color: '#C9951A' }}>
          <span className="rule"/>
          <span>Sydney · Australia · Healing Worldwide</span>
          <span className="rule"/>
        </p>
        <h1 className="h-display hero__title hero__fade hero__fade--2">
          The Cosmic<br/>Healer
        </h1>
        <div className="hero__roar-row hero__fade hero__fade--3">
          <p className="hero__roar">
            I came to <span className="hero__roar-word">ROAR</span>.
          </p>
        </div>
        <p className="hero__sub hero__fade hero__fade--4">
          Healing Humanity. Awakening What Was Forgotten.
        </p>
        <p className="hero__body hero__fade hero__fade--5">
          A multidimensional guide, Yidaki frequency practitioner, and children's
          author working at the intersection of sound, consciousness, energy, and
          remembrance helping souls reconnect with their original essence while
          guiding the next generation toward a more awakened future.
        </p>

        <div className="hero__ctas hero__fade hero__fade--6">
          <Button onClick={onBook}>Book a Healing Session</Button>
          <Button variant="ghost" onClick={()=>smoothScrollTo('services')}>Explore the Work</Button>
        </div>
      </div>

    </section>
  );
}

window.Hero = Hero;