import { useEffect } from "react";

/**
 * Scroll-reveal for elements with the `.reveal` class.
 * Above-the-fold content should NOT use `.reveal` (it must be visible instantly);
 * this is for sections below the fold. A failsafe guarantees nothing stays hidden.
 */
export default function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
    );
    els.forEach((el) => io.observe(el));
    const failsafe = setTimeout(
      () => els.forEach((el) => el.classList.add("in")),
      1600
    );
    return () => {
      io.disconnect();
      clearTimeout(failsafe);
    };
  }, []);
}