// Reveal au scroll — observer qui ajoute .in
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.15, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const cls = `reveal ${className}`.trim();
  const s = { transitionDelay: `${delay}ms`, ...(style || {}) };
  return (
    <Tag ref={ref} className={cls} style={s}>
      {children}
    </Tag>
  );
}

// Hook parallax léger
function useParallax(strength = 0.15) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    const update = () => {
      const r = el.getBoundingClientRect();
      const center = r.top + r.height / 2 - window.innerHeight / 2;
      const y = -center * strength;
      el.style.transform = `translate3d(0, ${y.toFixed(1)}px, 0) scale(1.08)`;
      raf = null;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener("scroll", onScroll, { passive: true });
    update();
    return () => {
      window.removeEventListener("scroll", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [strength]);
  return ref;
}

window.Reveal = Reveal;
window.useParallax = useParallax;