// Pull-City — video hero with logo-intercut loop
// 1. Video plays once
// 2. On end → black overlay with full logo fades in
// 3. After a beat → overlay fades out, video restarts
// Scroll-driven: eyebrow fades early; CTAs slide up at end of hero scroll.

function Hero({ onCta, tiktok, wa }) {
  const wrapRef = React.useRef(null);
  const videoRef = React.useRef(null);
  const eyebrowRef = React.useRef(null);
  const bottomRef = React.useRef(null);
  const vignetteRef = React.useRef(null);

  // Native loop — no outro between repeats
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const tryPlay = () => v.play().catch(() => {});
    tryPlay();
    v.addEventListener("loadeddata", tryPlay);
    return () => v.removeEventListener("loadeddata", tryPlay);
  }, []);

  // Scroll-driven UI (eyebrow / CTAs / vignette / video scale)
  React.useEffect(() => {
    let raf = 0;
    function update() {
      raf = 0;
      const wrap = wrapRef.current; if (!wrap) return;
      const r = wrap.getBoundingClientRect();
      const total = wrap.offsetHeight - window.innerHeight;
      const scrolled = Math.min(Math.max(-r.top, 0), total);
      const p = total > 0 ? scrolled / total : 0;
      const ease = (t) => 1 - Math.pow(1 - t, 2);
      const e = ease(p);

      if (eyebrowRef.current) {
        const op = p < 0.05 ? 1 : (p < 0.45 ? 1 - (p - 0.05) / 0.4 : 0);
        eyebrowRef.current.style.opacity = Math.max(0, op);
      }
      const hint = wrap.querySelector(".scroll-hint");
      if (hint) hint.style.opacity = p < 0.1 ? 1 : Math.max(0, 1 - (p - 0.1) / 0.2);

      if (vignetteRef.current) {
        vignetteRef.current.style.opacity = 0.5 + e * 0.35;
      }

      if (bottomRef.current) {
        const bp = Math.max(0, (p - 0.55) / 0.45);
        const ty = 30 - bp * 30;
        bottomRef.current.style.transform = `translate(-50%, ${ty}px)`;
        bottomRef.current.style.opacity = bp;
      }
    }
    function onScroll() { if (!raf) raf = requestAnimationFrame(update); }
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className="hero hero--video" ref={wrapRef}>
      <div className="hero-sticky">
        <div className="hero-video-wrap">
          <video
            ref={videoRef}
            className="hero-video"
            src="media/hero.mp4"
            poster="media/hero-poster.jpg"
            autoPlay
            loop
            muted
            playsInline
            preload="metadata"
            disablePictureInPicture
          />
          <div className="hero-video-tint" />
          <div className="hero-vignette" ref={vignetteRef} />
          <div className="hero-grain" />
        </div>

        {/* Outro removed — video loops natively */}

        <div className="hero-live">
          <div className="hl-head">
            <span className="hl-badge"><span className="hl-dot" />LIVE STREAM</span>
            <span className="hl-text">Sbustiamo in diretta</span>
          </div>
          <div className="hl-btns">
            <a className="hl-btn tt" href={tiktok} target="_blank" rel="noopener" aria-label="TikTok">
              <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M16.6 5.82a4.28 4.28 0 0 1-1.06-2.82h-3.2v12.06a2.6 2.6 0 1 1-2.04-2.54V9.27a5.8 5.8 0 1 0 5.24 5.77V9.18a7.36 7.36 0 0 0 4.32 1.38V7.36a4.28 4.28 0 0 1-3.26-1.54z"/></svg>
            </a>
            <a className="hl-btn wa" href={wa} target="_blank" rel="noopener" aria-label="WhatsApp">
              <svg width="17" height="17" viewBox="0 0 32 32" aria-hidden="true"><path fill="#fff" d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.8 6.5L3 29l6.7-1.8c1.9 1 4 1.6 6.3 1.6 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1 1.1-3.9-.3-.4A10.5 10.5 0 0 1 5.5 16C5.5 10.2 10.2 5.5 16 5.5S26.5 10.2 26.5 16 21.8 26.6 16 26.6zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2s-.8 1-1 1.2c-.2.2-.4.2-.7.1-1.8-.9-3-1.6-4.2-3.6-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.4 5.4 4.7 2 .9 2.8.9 3.8.8.6-.1 1.9-.8 2.1-1.5.3-.8.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4z"/></svg>
            </a>
          </div>
        </div>

        <div ref={eyebrowRef} className="hero-eyebrow eyebrow ready">
          <span className="dot" />Pull-City TCG · Vault Edition
        </div>

        <div ref={bottomRef} className="hero-bottom">
          <div className="ctas">
            <button className="btn btn-gold" onClick={() => onCta && onCta("drops")}>
              Esplora il Vault
              <svg className="arr" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6"/></svg>
            </button>
            <button className="btn btn-ghost" onClick={() => onCta && onCta("graded")}>Scopri i Drop</button>
          </div>
        </div>

        <div className="scroll-hint">
          <span>Scroll</span>
          <span className="line"></span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;