"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

/**
 * Initialise un IntersectionObserver unique qui ajoute `.is-visible` sur
 * tous les `.reveal` du DOM dès qu'ils entrent dans le viewport.
 * Re-run à chaque navigation (App Router conserve le layout).
 */
export default function RevealInit() {
  const pathname = usePathname();

  useEffect(() => {
    if (typeof window === "undefined") return;

    const reduced = window.matchMedia(
      "(prefers-reduced-motion: reduce)"
    ).matches;

    const elements = document.querySelectorAll<HTMLElement>(
      ".reveal:not(.is-visible)"
    );

    if (reduced) {
      elements.forEach((el) => el.classList.add("is-visible"));
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -80px 0px" }
    );

    elements.forEach((el) => observer.observe(el));

    return () => observer.disconnect();
  }, [pathname]);

  return null;
}