// VeryPay — Hero (Cinematic v2)
function Hero() {
  const sectionRef = useRef(null);
  const [mounted, setMounted] = useState(false);
  const [y, setY] = useState(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMobile(window.innerWidth < 900);
    const onResize = () => setIsMobile(window.innerWidth < 900);
    window.addEventListener("resize", onResize);
    // Trigger animations after mount
    const id = requestAnimationFrame(() => setMounted(true));
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(id);
    };
  }, []);

  useEffect(() => {
    if (isMobile) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(Math.min(200, window.scrollY));
        raf = null;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [isMobile]);

  const parallaxStyle = isMobile
    ? {}
    : {
        transform: `translateY(${y * 0.15}px) scale(${1 + y * 0.0002})`,
      };

  // word reveal helper — drives stagger via mounted state
  const Word = ({ text, delay }) => (
    <span className="hero-word">
      <span
        style={{
          transform: mounted ? "translateY(0)" : "translateY(105%)",
          opacity: mounted ? 1 : 0,
          transition: `transform 1.2s cubic-bezier(.16,1,.3,1) ${delay}s, opacity 0.9s cubic-bezier(.16,1,.3,1) ${delay}s`,
        }}
      >
        {text}
      </span>
    </span>
  );

  return (
    <section id="top" className="hero hero-cinematic" ref={sectionRef}>
      {/* Background photo */}
      <img
        src="assets/hero-photo.png"
        alt=""
        className="hero-photo"
        style={{
          ...parallaxStyle,
          opacity: mounted ? 1 : 0,
          transition: "opacity 1.2s cubic-bezier(.16,1,.3,1) 0.1s, transform 0.1s linear",
        }}
      />
      {/* Diagonal gradient overlay */}
      <div className="hero-overlay" />
      {/* Radial vignette */}
      <div
        className="hero-vignette"
        style={{
          opacity: mounted ? 1 : 0,
          transition: "opacity 0.8s cubic-bezier(.16,1,.3,1) 0.6s",
        }}
      />
      {/* Hero-only grain (denser) */}
      <div className="hero-grain" aria-hidden="true" />

      {/* Scroll indicator — estilo Korva (híbrido desktop/mobile) */}
      <div
        className="scroll-indicator"
        aria-hidden="true"
        style={{
          opacity: mounted ? 1 : 0,
          transition: "opacity 0.6s cubic-bezier(.16,1,.3,1) 5.4s",
        }}
      >
        <span className="scroll-label">ROLAR</span>
        <svg className="scroll-arrow" viewBox="0 0 12 18" fill="none" aria-hidden="true">
          <path d="M6 1 L6 16 M1 11 L6 16 L11 11" stroke="currentColor"
                strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      {/* Content — sunk to bottom */}
      <div className="container hero-inner">
        <div
          className="eyebrow"
          style={{
            opacity: mounted ? 1 : 0,
            transform: mounted ? "translateY(0)" : "translateY(14px)",
            transition: "opacity 0.6s cubic-bezier(.16,1,.3,1) 1.2s, transform 0.6s cubic-bezier(.16,1,.3,1) 1.2s",
          }}
        >
          <MagentaBar animated={false} pulse={true} />
          <span>GESTÃO DE RECEBIMENTOS</span>
        </div>

        <h1 className="display hero-display">
          <span className="line"><Word text="Sua" delay={1.5} /> <Word text="maquininha" delay={1.68} /></span>
          <span className="line"><Word text="não" delay={1.86} /> <Word text="devia" delay={2.04} /> <Word text="ser" delay={2.22} /></span>
          <span className="line">
            <Word text="uma" delay={2.40} />{" "}
            <span className={"underline-magenta loteria" + (mounted ? " in" : "")}>
              <Word text="loteria." delay={2.58} />
            </span>
          </span>
        </h1>

        <p
          className="sub"
          style={{
            opacity: mounted ? 0.78 : 0,
            transform: mounted ? "translateY(0)" : "translateY(14px)",
            transition: "opacity 0.8s cubic-bezier(.16,1,.3,1) 4.6s, transform 0.8s cubic-bezier(.16,1,.3,1) 4.6s",
          }}
        >
          A VeryPay cuida do seu recebimento como quem cuida do seu caixa:
          diagnóstico, escolha do produto certo, taxa otimizada por perfil,
          e relacionamento que escala junto.
        </p>

        <div
          className="cta-row"
          style={{
            opacity: mounted ? 1 : 0,
            transform: mounted ? "translateY(0)" : "translateY(16px)",
            transition: "opacity 0.8s cubic-bezier(.16,1,.3,1) 5.0s, transform 0.8s cubic-bezier(.16,1,.3,1) 5.0s",
          }}
        >
          <a className="btn btn-hero" href={waLink()} target="_blank" rel="noopener">
            Falar com um especialista
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;