"use client";
import { useEffect, useRef, useState } from "react";

/**
 * Marca un elemento como "visible" la primera vez que entra en viewport.
 *
 * Usamos IntersectionObserver en vez de una librería de animación porque todo lo que la home
 * necesita (reveals, stagger, contadores) sale con CSS: meter framer-motion serían ~50 kB extra
 * para resolver algo que el navegador ya hace.
 */
export function useReveal<T extends HTMLElement = HTMLDivElement>(threshold = 0.2) {
  const ref = useRef<T>(null);
  const [shown, setShown] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el || shown) return;

    // Sin soporte de IO (o en SSR hidratando raro), mostramos directo: nunca dejar contenido invisible.
    if (typeof IntersectionObserver === "undefined") {
      setShown(true);
      return;
    }

    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setShown(true);
          io.disconnect();
        }
      },
      { threshold },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [shown, threshold]);

  return { ref, shown };
}

/** ¿El usuario pidió menos movimiento? Se consulta en cliente, por eso no es una constante. */
export function prefersReducedMotion() {
  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}