// Hero — full-bleed image header with the brand name as the only typography.
// Scroll-driven cascade: as the hero scrolls past, the background photo
// shrinks, slides down, and gains a 74px corner radius (ease-in / ease-out).
function Hero({ heroImg, layout = "right", accent = "orange" }) {
  // Scroll-driven morph: pin the hero photo to the viewport and lerp it from
  // full-bleed (hero state) to the pitch-media card's live rect as the user
  // scrolls from hero into pitch. Reverse scroll reverses naturally.
  React.useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const photo = document.querySelector(".hero-bg-photo");
    const pitchMedia = document.querySelector(".pitch-media");
    const hero = document.getElementById("top");
    if (!photo || !pitchMedia || !hero) return;

    const pitchImg = pitchMedia.querySelector("img");
    if (pitchImg) pitchImg.style.opacity = "0";
    const heroCopy = hero.querySelector(".hero-copy");

    // Pin the photo to the viewport. Clear the CSS `inset: 0` (right/bottom)
    // so the inline top/left/width/height aren't over-constrained.
    Object.assign(photo.style, {
      position: "fixed",
      inset: "auto",
      right: "auto",
      bottom: "auto",
      zIndex: "0",
      transform: "none",
    });

    let rafId = null;
    const update = () => {
      rafId = null;
      const heroH = hero.offsetHeight || window.innerHeight;
      const p = Math.max(0, Math.min(1, window.scrollY / heroH));
      const t = pitchMedia.getBoundingClientRect();
      const vw = window.innerWidth;
      const vh = window.innerHeight;

      photo.style.top = `${p * t.top}px`;
      photo.style.left = `${p * t.left}px`;
      photo.style.width = `${(1 - p) * vw + p * t.width}px`;
      photo.style.height = `${(1 - p) * vh + p * t.height}px`;
      photo.style.borderRadius = `${p * 32}px`;

      if (heroCopy) heroCopy.style.opacity = (1 - p).toFixed(3);
    };
    const onScroll = () => { if (rafId == null) rafId = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", update);
    // Other sections' ScrollTriggers can reflow the page; recompute after refresh.
    if (window.ScrollTrigger) window.ScrollTrigger.addEventListener("refresh", update);

    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", update);
      if (window.ScrollTrigger) window.ScrollTrigger.removeEventListener("refresh", update);
      if (rafId != null) cancelAnimationFrame(rafId);
      if (pitchImg) pitchImg.style.opacity = "";
      Object.assign(photo.style, {
        position: "", inset: "", right: "", bottom: "",
        top: "", left: "", width: "", height: "",
        borderRadius: "", transform: "", zIndex: "",
      });
    };
  }, []);

  // Onload intro: image expands from 20% → full, then text settles down from left-middle.
  React.useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if (!window.gsap) return;
    const tl = window.gsap.timeline({ defaults: { ease: "power3.out" } });
    tl.from(".hero-bg-photo", {
      scale: 0.2,
      opacity: 0,
      transformOrigin: "50% 50%",
      duration: 1.1,
      clearProps: "scale,opacity,transformOrigin",
    });
    tl.fromTo(".hero-copy",
      { x: "-40vw", y: "-30vh", opacity: 0 },
      { x: 0, opacity: 1, duration: 0.7 },
      "-=0.15"
    );
    tl.to(".hero-copy", {
      y: 0,
      duration: 0.6,
      clearProps: "x,y,opacity",
    });
    return () => tl.kill();
  }, []);

  return (
    <section id="top" className={"hero layout-" + layout}>
      <div className="hero-bg-photo">
        <img src={heroImg} alt=""/>
        <div className="hero-bg-wash"/>
      </div>
      <div className="hero-bg"/>
      <div className="hero-grid">
        <div className="hero-copy">
          <h1>
            Build lasting wealth with intention.
          </h1>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;