// hero.jsx — cinematic hero with a full-bleed background video + parallax
const { useRef: useHeroRef, useEffect: useHeroEffect } = React;

function Hero({ treatment = "centered", onReserve, onFleet }) {
  const heroRef = useHeroRef(null);
  const vidRef = useHeroRef(null);
  const innerRef = useHeroRef(null);
  const scrimRef = useHeroRef(null);
  const cueRef = useHeroRef(null);

  // Keep the clip playing. Muted autoplay is usually allowed, but throttled /
  // gesture-gated contexts can defer it — so we retry on visibility + first
  // interaction. Honor a genuine reduced-motion preference by leaving it paused.
  useHeroEffect(() => {
    const v = vidRef.current;
    if (!v) return;
    const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) return;
    const tryPlay = () => { const p = v.play && v.play(); if (p && p.catch) p.catch(() => {}); };
    tryPlay();
    const io = "IntersectionObserver" in window
      ? new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && tryPlay()), { threshold: 0.05 })
      : null;
    if (io) io.observe(v);
    const onKick = () => tryPlay();
    window.addEventListener("pointerdown", onKick, { passive: true });
    window.addEventListener("scroll", onKick, { passive: true });
    document.addEventListener("visibilitychange", onKick);
    return () => {
      if (io) io.disconnect();
      window.removeEventListener("pointerdown", onKick);
      window.removeEventListener("scroll", onKick);
      document.removeEventListener("visibilitychange", onKick);
    };
  }, []);

  // Scroll-reactive parallax: the footage slowly zooms + drifts, the scrim
  // deepens, and the content rises and fades — one continuous move.
  useHeroEffect(() => {
    const hero = heroRef.current;
    if (!hero) return;
    if (document.documentElement.classList.contains("anim-off")) return;
    let raf = 0;
    const apply = () => {
      const h = hero.offsetHeight || window.innerHeight || 1;
      const y = window.scrollY || 0;
      const p = Math.max(0, Math.min(1, y / h));
      const strength = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--parallax")) || 0;
      if (vidRef.current)
        vidRef.current.style.transform = `scale(${(1.08 + 0.16 * p).toFixed(3)}) translateY(${(y * 0.12 * (strength || 1)).toFixed(1)}px)`;
      if (innerRef.current) {
        innerRef.current.style.transform = `translateY(${(-y * 0.12).toFixed(1)}px)`;
        innerRef.current.style.opacity = Math.max(0, 1 - p * 1.25).toFixed(3);
      }
      if (scrimRef.current) scrimRef.current.style.opacity = (0.66 + 0.34 * p).toFixed(3);
      if (cueRef.current) cueRef.current.style.opacity = Math.max(0, 1 - p * 4).toFixed(3);
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(apply); };
    apply();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className={`hero hero-${treatment} hero--video`} id="top" ref={heroRef}>
      <div className="hero-bg">
        <div className="hero-bg-grad" />
        <div className="hero-bg-grain" />
      </div>
      <div className="hero-stage">
        <video ref={vidRef} className="hero-video" src="assets/hero-mercedes.mp4"
          autoPlay muted loop playsInline preload="auto" />
      </div>
      <div className="hero-tint" />
      <div className="hero-scrim" ref={scrimRef} />
      <div className="hero-vignette" />

      <div className="hero-inner" ref={innerRef}>
        <Reveal className="hero-content" delay={60}>
          <div className="eyebrow hero-eyebrow"><span className="eyebrow-tick" />Luxury Experiences · Greater Houston</div>
          <h1 className="hero-title">By Reservation<br /><em>Only.</em></h1>
          <p className="hero-sub">
            A curated collection of luxury and exotic automobiles. Reserved for those who expect more
            than a rental, for the moments that deserve more than ordinary.
          </p>
          <div className="hero-cta">
            <GoldButton size="lg" onClick={onReserve}>Reserve Your Vehicle</GoldButton>
            <OutlineButton size="lg" onClick={onFleet}>View the Fleet</OutlineButton>
          </div>
        </Reveal>
      </div>

      <div className="hero-foot">
        <div className="hero-powered">
          <span className="hp-line" />
          <img src="assets/bally-logo-v3.png" alt="Bally &amp; Co. Motors" className="hp-logo" />
          <span className="hp-text">Powered by Bally &amp; Co. Motors</span>
          <span className="hp-line" />
        </div>
        <div className="hero-scroll" ref={cueRef}><span>Scroll</span><i /></div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });