"use client";

import { useEffect } from "react";

export default function ScrollAnimator() {
  useEffect(() => {
    const header = document.querySelector(".site-header");
    const heroMedia = document.querySelector(".hero-media");

    const onScroll = () => {
      const y = window.scrollY;
      if (header) {
        header.classList.toggle("is-scrolled", y > 40);
      }
      if (heroMedia instanceof HTMLElement) {
        heroMedia.style.transform = `scale(1.08) translate3d(0, ${y * 0.18}px, 0)`;
      }
    };

    const items = document.querySelectorAll<HTMLElement>("[data-animate]");
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add("is-inview");
          observer.unobserve(entry.target);
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }
    );

    items.forEach((item) => observer.observe(item));
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });

    return () => {
      observer.disconnect();
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return null;
}