"use client";

import { useEffect } from "react";
import { gsap, ScrollTrigger, useGSAP } from "../gsap";

/*
  Os efeitos da página, todos num lugar só:

  - `[data-revela]`: o bloco sobe e aparece quando entra na tela, uma vez.
  - `[data-revela-filhos]`: os filhos diretos entram em cascata.
  - `[data-flutua="0.8"]`: paralaxe leve ao rolar (o número é a força).

  Quem pediu menos movimento vê tudo parado e no lugar. Sem script, idem: a
  classe que esconde os blocos só entra quando este componente liga.
*/
export default function Efeitos() {
  useEffect(() => {
    const raiz = document.querySelector<HTMLElement>(".lp");
    if (!raiz) return;
    const reduzido = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!reduzido) raiz.dataset.efeitos = "ligados";
    return () => {
      delete raiz.dataset.efeitos;
    };
  }, []);

  useGSAP(() => {
    const mm = gsap.matchMedia();
    mm.add("(prefers-reduced-motion: no-preference)", () => {
      const blocos = gsap.utils.toArray<HTMLElement>("[data-revela]");
      blocos.forEach((bloco) => {
        gsap.fromTo(
          bloco,
          { autoAlpha: 0, y: 36 },
          {
            autoAlpha: 1,
            y: 0,
            duration: 0.9,
            ease: "power3.out",
            scrollTrigger: { trigger: bloco, start: "top 88%", once: true },
          }
        );
      });

      const grupos = gsap.utils.toArray<HTMLElement>("[data-revela-filhos]");
      grupos.forEach((grupo) => {
        const filhos = Array.from(grupo.children) as HTMLElement[];
        if (!filhos.length) return;
        gsap.fromTo(
          filhos,
          { autoAlpha: 0, y: 30 },
          {
            autoAlpha: 1,
            y: 0,
            duration: 0.8,
            ease: "power3.out",
            stagger: 0.09,
            scrollTrigger: { trigger: grupo, start: "top 85%", once: true },
          }
        );
      });

      const flutuantes = gsap.utils.toArray<HTMLElement>("[data-flutua]");
      flutuantes.forEach((el) => {
        const forca = Number(el.dataset.flutua || "0.6");
        gsap.fromTo(
          el,
          { y: 60 * forca },
          {
            y: -60 * forca,
            ease: "none",
            scrollTrigger: { trigger: el.parentElement ?? el, start: "top bottom", end: "bottom top", scrub: 0.8 },
          }
        );
      });

      /* As imagens mudam a altura da página quando carregam; o gatilho
         precisa remedir depois delas. */
      const remedir = () => ScrollTrigger.refresh();
      window.addEventListener("load", remedir);
      return () => window.removeEventListener("load", remedir);
    });
    return () => mm.revert();
  });

  return null;
}