// Reusable hooks + bootstrap (scroll reveals, smooth scroll, parallax)

function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" });
    document.querySelectorAll('.reveal, .word-mask').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useScrollY() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY);
        raf = 0;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

// Returns progress 0..1 of element through viewport (enters bottom, exits top)
function useSectionProgress(ref) {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const update = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh;
      const seen = vh - r.top;
      const prog = Math.max(0, Math.min(1, seen / total));
      setP(prog);
    };
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, [ref]);
  return p;
}

// Returns 0..1 progress within a "sticky" pinned section. Call with ref to the outer tall container.
function usePinnedProgress(ref) {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const update = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height - vh;
      const seen = -r.top;
      const prog = Math.max(0, Math.min(1, seen / total));
      setP(prog);
    };
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, [ref]);
  return p;
}

// Magnetic hover effect
function useMagnetic(strength = 0.25) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = e.clientX - (r.left + r.width/2);
      const y = e.clientY - (r.top + r.height/2);
      el.style.transform = `translate(${x*strength}px, ${y*strength}px)`;
    };
    const onLeave = () => { el.style.transform = 'translate(0,0)'; };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); };
  }, [strength]);
  return ref;
}

function usePalmBootstrap() {
  useReveal();
  // Smooth-ish scroll — light inertia without Lenis
  React.useEffect(() => {
    // Simple: nothing needed — browser smooth scroll is fine.
  }, []);
}

window.useReveal = useReveal;
window.useScrollY = useScrollY;
window.useSectionProgress = useSectionProgress;
window.usePinnedProgress = usePinnedProgress;
window.useMagnetic = useMagnetic;
window.usePalmBootstrap = usePalmBootstrap;