// ═══════════════════════════════════════════════════════════════════
// src/hooks.jsx — Custom React hooks. No JSX, no side-effect globals.
// ═══════════════════════════════════════════════════════════════════

const { useState, useEffect } = React;

/**
 * useScrolled
 * Returns true once the page has scrolled past `threshold` pixels.
 * Used by Nav to apply the glass-border style.
 */
function useScrolled(threshold = 24) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const sync = () => setScrolled(window.scrollY > threshold);
    sync(); // capture initial position (e.g. page reload mid-scroll)
    window.addEventListener("scroll", sync, { passive: true });
    return () => window.removeEventListener("scroll", sync);
  }, [threshold]);
  return scrolled;
}

/**
 * useReveal
 * Observes every element with class="reveal" and adds class="in"
 * once it enters the viewport, triggering the CSS fade+slide animation.
 * Unobserves after trigger (fire-once per element, not per scroll).
 */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!els.length) return;

    const io = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            io.unobserve(entry.target);
          }
        }
      },
      { rootMargin: "0px 0px -80px 0px", threshold: 0.12 }
    );

    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}