import { useEffect } from "react";
import gsap from "gsap";

export const useDepth3DAnimation = (containerRef: React.RefObject<HTMLDivElement>) => {
  useEffect(() => {
    if (!containerRef.current) return;

    const container = containerRef.current;
    const cards = container.querySelectorAll("[data-card]");

    // Add scroll-triggered 3D animations
    cards.forEach((card, index) => {
      gsap.from(card, {
        opacity: 0,
        y: 50,
        rotationX: 10,
        duration: 0.8,
        delay: index * 0.1,
        scrollTrigger: {
          trigger: card,
          start: "top 80%",          end: "top 20%",          scrub: 1,
          markers: false
        }
      });
    });
  }, [containerRef]);
};
