/**
 * ALGA ARENA — Premium Dashboard Interactive Logic
 * Layered parallax, GSAP entrance staggers, counter reveals, and 3D card tilt
 */

'use strict';

document.addEventListener('DOMContentLoaded', () => {
    const isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const isMobile = window.innerWidth < 768;

    // 1. Stagger Entrance Animations for Hero
    if (!isReduced) {
        gsap.from(".hero-stagger", {
            opacity: 0,
            y: 30,
            duration: 0.8,
            stagger: 0.15,
            ease: "power3.out"
        });

        gsap.from(".hero-stats-strip .stat-item", {
            opacity: 0,
            y: 20,
            duration: 0.8,
            stagger: 0.1,
            ease: "power2.out",
            delay: 0.6,
            onComplete: triggerCounters
        });
    } else {
        // Fallback for reduced motion: immediate value fill
        triggerCounters();
    }

    // 2. Slow Floating animation on the central trophy
    if (!isReduced && !isMobile) {
        gsap.to(".hero-layer-trophy", {
            y: "+=12",
            duration: 3,
            repeat: -1,
            yoyo: true,
            ease: "power1.inOut"
        });

        // Slow hover parallax on the hero layers
        const heroContainer = document.querySelector('.hero-banner-container');
        if (heroContainer) {
            heroContainer.addEventListener('mousemove', (e) => {
                const rect = heroContainer.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;

                gsap.to(".hero-layer-bg", { x: x * 0.02, y: y * 0.02, duration: 0.6 });
                gsap.to(".hero-layer-player1", { x: x * -0.03, duration: 0.6 });
                gsap.to(".hero-layer-player2", { x: x * 0.03, duration: 0.6 });
                gsap.to(".hero-layer-particles", { x: x * 0.05, y: y * 0.05, duration: 0.6 });
            });

            heroContainer.addEventListener('mouseleave', () => {
                gsap.to(".hero-layer-bg", { x: 0, y: 0, duration: 0.8 });
                gsap.to(".hero-layer-player1", { x: 0, duration: 0.8 });
                gsap.to(".hero-layer-player2", { x: 0, duration: 0.8 });
                gsap.to(".hero-layer-particles", { x: 0, y: 0, duration: 0.8 });
            });
        }
    }

    // 3. Stats Number Counter Reveal
    function triggerCounters() {
        document.querySelectorAll('.stat-number').forEach(stat => {
            const target = parseInt(stat.getAttribute('data-target'), 10) || 0;
            if (isReduced) {
                stat.textContent = target.toLocaleString();
                return;
            }

            const obj = { val: 0 };
            gsap.to(obj, {
                val: target,
                duration: 1.8,
                ease: "power2.out",
                onUpdate: () => {
                    stat.textContent = Math.floor(obj.val).toLocaleString();
                }
            });
        });
    }

    // 4. 3D Hover Tilt Effects on Priority Cards
    if (!isReduced && !isMobile) {
        document.querySelectorAll('.card-console').forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const xc = rect.width / 2;
                const yc = rect.height / 2;
                
                // Tilt calculation (5 degrees max)
                const tiltX = -((y - yc) / yc) * 4;
                const tiltY = ((x - xc) / xc) * 4;

                card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateY(-4px)`;
                card.style.setProperty('--x', `${x}px`);
                card.style.setProperty('--y', `${y}px`);
            });

            card.style.transition = "transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease";

            card.addEventListener('mouseleave', () => {
                card.style.transform = '';
            });
        });
    }

    // 5. ScrollTrigger reveal animations for panels
    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined' && !isReduced) {
        gsap.registerPlugin(ScrollTrigger);

        // Grid panels fade in on scroll with masked reveal + z-axis motion
        gsap.from(".card-arena, .card-console", {
            scrollTrigger: {
                trigger: ".card-arena",
                start: "top 95%",
                toggleActions: "play none none none"
            },
            opacity: 0,
            scale: 0.96,
            y: 30,
            duration: 0.8,
            stagger: 0.08,
            ease: "power2.out"
        });
    }
});
