"use client";

import { useEffect } from "react";

/**
 * PageAnimations — a lightweight, reusable GSAP animation component.
 * Drop this into any page to enable scroll-triggered animations.
 *
 * CSS classes used:
 *   .gsap-fade-up   → fade + slide up on scroll
 *   .gsap-stagger   → stagger children on scroll
 *   .gsap-hero-text  → hero text stagger entrance
 *   .gsap-hero-image → hero image reveal
 */
export default function PageAnimations() {
    useEffect(() => {
        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        if (prefersReducedMotion) return;

        const loadAnimations = async () => {
            const { default: gsap } = await import("gsap");
            const { ScrollTrigger } = await import("gsap/ScrollTrigger");
            gsap.registerPlugin(ScrollTrigger);

            const ctx = gsap.context(() => {
                // ─── Hero text entrance — staggered children ───
                const heroText = document.querySelector(".gsap-hero-text");
                if (heroText && heroText.children.length > 0) {
                    gsap.fromTo(
                        heroText.children,
                        { opacity: 0, y: 30 },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.7,
                            stagger: 0.12,
                            ease: "power3.out",
                        }
                    );
                }

                // ─── Hero image reveal — scale up from right ───
                const heroImage = document.querySelector(".gsap-hero-image");
                if (heroImage) {
                    gsap.fromTo(
                        heroImage,
                        { opacity: 0, scale: 0.92, x: 40 },
                        {
                            opacity: 1,
                            scale: 1,
                            x: 0,
                            duration: 0.9,
                            delay: 0.3,
                            ease: "power3.out",
                        }
                    );
                }

                // ─── Fade-up on scroll for sections ───
                const fadeUpEls = document.querySelectorAll(".gsap-fade-up");
                fadeUpEls.forEach((el) => {
                    gsap.fromTo(
                        el,
                        { opacity: 0, y: 40 },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.6,
                            ease: "power2.out",
                            scrollTrigger: {
                                trigger: el,
                                start: "top 88%",
                                toggleActions: "play none none none",
                            },
                        }
                    );
                });

                // ─── Staggered card reveals ───
                const staggerContainers = document.querySelectorAll(".gsap-stagger");
                staggerContainers.forEach((container) => {
                    const cards = container.children;
                    if (cards.length === 0) return;
                    gsap.fromTo(
                        cards,
                        { opacity: 0, y: 30 },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.5,
                            stagger: 0.1,
                            ease: "power2.out",
                            scrollTrigger: {
                                trigger: container,
                                start: "top 88%",
                                toggleActions: "play none none none",
                            },
                        }
                    );
                });

                // ─── Footer fade-in ───
                const footer = document.querySelector("footer");
                if (footer) {
                    gsap.fromTo(
                        footer,
                        { opacity: 0, y: 20 },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.6,
                            ease: "power2.out",
                            scrollTrigger: {
                                trigger: footer,
                                start: "top 95%",
                                toggleActions: "play none none none",
                            },
                        }
                    );
                }
            });

            return () => ctx.revert();
        };

        // Delay animation loading to not compete with critical resources
        const timer = setTimeout(loadAnimations, 100);
        return () => clearTimeout(timer);
    }, []);

    return null;
}
