/* ============================================================
   3DAX — Hero (cinematic)
   ============================================================ */
function Hero({ onShop, onStory }){
  const prodRef = useRef(null);
  const wrapRef = useRef(null);

  // mouse parallax + scroll drift
  useEffect(() => {
    let raf = 0, mx = 0, my = 0, sc = 0;
    const apply = () => {
      const el = prodRef.current; if(el){
        el.style.transform =
          `translate3d(${mx*16}px, ${my*16 - sc*0.12}px, 0) rotateX(${-my*4}deg) rotateY(${mx*7}deg)`;
      }
      raf = 0;
    };
    const onMove = (e) => {
      const w = window.innerWidth, h = window.innerHeight;
      mx = (e.clientX / w - .5); my = (e.clientY / h - .5);
      if(!raf) raf = requestAnimationFrame(apply);
    };
    const onScroll = () => { sc = window.scrollY; if(!raf) raf = requestAnimationFrame(apply); };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("scroll", onScroll, { passive:true });
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  return (
    <section className="hero grain" id="top" ref={wrapRef}>
      <div className="blob" style={{ width:560, height:560, top:"-12%", left:"50%", transform:"translateX(-50%)", background:"rgba(217,138,43,.16)" }} />
      <div className="blob" style={{ width:480, height:480, bottom:"-22%", right:"-6%", background:"rgba(240,72,154,.18)" }} />
      <div className="hero__grid wrap">
        <div className="hero__copy">
          <div className="eyebrow reveal in">Deckbox custom · One Piece TCG · Hecho a mano en 3D</div>
          <h1 className="display hero__title">
            <span className="sr-only">Deckbox custom de One Piece TCG hechas a mano en 3D. </span>
            <span aria-hidden="true">Tus cartas<br/>merecen una<br/><em>obra de arte.</em></span>
          </h1>
          <p className="lead hero__lead">
            Deckboxes custom de One&nbsp;Piece TCG esculpidas pieza a pieza. Relieve real en cada
            cara, cierre perfecto para 60+ cartas con doble funda y un acabado que se
            expone, no se esconde.
          </p>
          <div className="hero__cta">
            <button className="btn btn-primary btn-lg" onClick={onShop}>
              Ver la colección <span className="arr">→</span>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={onStory}>
              Descúbrela
            </button>
          </div>
          <div className="hero__trust">
            <Stars value={5} size={15} />
            <span><strong>4.9/5</strong> · <strong>400+</strong> ventas en Etsy</span>
          </div>
        </div>

        <div className="hero__stage">
          <div className="hero__halo" />
          <img ref={prodRef} className="hero__prod prod-shadow"
               src="assets/products/chopper-tall-front.png"
               alt="Deckbox Chopper Wanted edición 3DAX" />
          <div className="hero__plinth" />
        </div>
      </div>

      <button className="hero__scroll" onClick={onStory} aria-label="Desliza">
        <span>Desliza</span>
        <span className="hero__scroll-line" />
      </button>
    </section>
  );
}
window.Hero = Hero;