"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

/**
 * O fundo vivo da capa do centro de aprendizado.
 *
 * No lugar da grade milimetrada que ficava aqui — e que, nas palavras dele,
 * "fica muito na cara que é IA" — entram três camadas que se movem sozinhas:
 * auroras que passeiam, cartas de vidro que flutuam e uma poeira que sobe.
 * As cores continuam as mesmas do gradiente de antes.
 *
 * O QUE ESTE ARQUIVO APRENDEU SOBRE PESO, medindo:
 *
 *   1. `filter: blur(70px)` numa mancha de 620 px derrubou a página para DOIS
 *      quadros por segundo. Cada quadro refazia o desfoque inteiro. O mesmo
 *      macio sai de um gradiente radial com paradas suaves, que o navegador
 *      pinta uma vez — está no CSS, e não volta.
 *   2. Animar `scale` numa camada grande obriga a rasterizar tudo de novo em
 *      outra resolução. Aqui só há deslocamento e opacidade, que a GPU resolve
 *      sozinha.
 *   3. Fora da tela, nada se mexe. A capa é o topo da página: quem rolou para
 *      os módulos não vê mais nada disto, e continuar animando é o que faz a
 *      rolagem engasgar.
 */

type Carta = { x: number; y: number; l: number; a: number; giro: number; atraso: number };

/* Posições em porcentagem, escritas à mão para a composição ficar equilibrada
   em vez de sorteada — sorteio bom dá trabalho e sorteio ruim é o que faz um
   fundo parecer gerado. Todas longe da coluna de texto. */
const CARTAS: Carta[] = [
  { x: 2, y: 3, l: 138, a: 96, giro: -11, atraso: 0 },
  { x: 63, y: 5, l: 132, a: 92, giro: 8, atraso: 0.6 },
  { x: 92, y: 30, l: 150, a: 104, giro: -7, atraso: 1.1 },
  { x: 76, y: 76, l: 116, a: 80, giro: 12, atraso: 1.7 },
  { x: 33, y: 88, l: 104, a: 74, giro: 6, atraso: 2.3 },
];

const POEIRA = Array.from({ length: 14 }, (_, i) => ({
  x: (i * 37) % 100,
  y: (i * 61) % 100,
  tamanho: 3 + ((i * 7) % 4),
  atraso: (i % 11) * 0.55,
}));

export default function CapaViva() {
  const raiz = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const no = raiz.current;
    if (!no) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const bichos: gsap.core.Tween[] = [];

    const ctx = gsap.context(() => {
      /* As auroras: cada uma no seu tempo, para nunca baterem juntas e virarem
         uma pulsação só. Deslocamento e opacidade, nunca escala. */
      gsap.utils.toArray<HTMLElement>(".hl-aurora").forEach((el, i) => {
        bichos.push(
          gsap.to(el, {
            xPercent: i % 2 === 0 ? 12 : -10,
            yPercent: i % 2 === 0 ? -8 : 10,
            duration: 18 + i * 6,
            ease: "sine.inOut",
            repeat: -1,
            yoyo: true,
            delay: i * 1.5,
            force3D: true,
          }),
          gsap.to(el, {
            opacity: 0.68,
            duration: 11 + i * 3,
            ease: "sine.inOut",
            repeat: -1,
            yoyo: true,
            delay: i * 2,
          })
        );
      });

      /* As cartas sobem e descem de leve, com um giro mínimo. */
      gsap.utils.toArray<HTMLElement>(".hl-carta").forEach((el) => {
        const atraso = Number(el.dataset.atraso ?? 0);
        bichos.push(
          gsap.fromTo(
            el,
            { opacity: 0, y: 26 },
            { opacity: 1, y: 0, duration: 1.2, ease: "power2.out", delay: atraso * 0.3, force3D: true }
          ),
          gsap.to(el, {
            y: "-=18",
            rotate: `+=${gsap.utils.random(-3, 3, 0.5)}`,
            duration: gsap.utils.random(8, 13),
            ease: "sine.inOut",
            repeat: -1,
            yoyo: true,
            delay: atraso,
            force3D: true,
          })
        );
      });

      /* A poeira sobe devagar e reaparece embaixo. */
      gsap.utils.toArray<HTMLElement>(".hl-poeira i").forEach((el) => {
        const atraso = Number(el.dataset.atraso ?? 0);
        bichos.push(
          gsap.fromTo(
            el,
            { y: 0, opacity: 0 },
            {
              y: -150,
              opacity: 0.9,
              duration: gsap.utils.random(12, 20),
              ease: "none",
              repeat: -1,
              delay: atraso,
              force3D: true,
            }
          )
        );
      });
    }, no);

    /* Fora da tela, tudo para: as animações e o vídeo do mascote. Decodificar
       VP9 com canal alfa é caro e quase nunca vai para o acelerador de vídeo,
       então deixá-lo rodando atrás da rolagem é gasto que ninguém vê. */
    const video = document.querySelector<HTMLVideoElement>(".hl-mascote video");
    const capa = no.parentElement ?? no;
    const olho = new IntersectionObserver(
      ([entrada]) => {
        if (entrada.isIntersecting) {
          for (const b of bichos) b.play();
          video?.play().catch(() => {});
        } else {
          for (const b of bichos) b.pause();
          video?.pause();
        }
      },
      { threshold: 0.02 }
    );
    olho.observe(capa);

    return () => {
      olho.disconnect();
      ctx.revert();
    };
  }, []);

  return (
    <div className="hl-vivo" ref={raiz} aria-hidden="true">
      <span className="hl-aurora hl-aurora-1" />
      <span className="hl-aurora hl-aurora-2" />
      <span className="hl-aurora hl-aurora-3" />

      {CARTAS.map((c, i) => (
        <span
          key={i}
          className="hl-carta"
          data-atraso={c.atraso}
          style={{
            left: `${c.x}%`,
            top: `${c.y}%`,
            width: c.l,
            height: c.a,
            transform: `rotate(${c.giro}deg)`,
          }}
        >
          <i />
          <i />
          <i />
        </span>
      ))}

      <span className="hl-poeira">
        {POEIRA.map((p, i) => (
          <i
            key={i}
            data-atraso={p.atraso}
            style={{ left: `${p.x}%`, top: `${p.y}%`, width: p.tamanho, height: p.tamanho }}
          />
        ))}
      </span>
    </div>
  );
}