/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Product : HYRO ONE SPA
| File    : spa-animations.js
|--------------------------------------------------------------------------
*/

document.documentElement.classList.add("hyro-motion-ready");

document.addEventListener("DOMContentLoaded", function () {
    const reducedMotion = window.matchMedia(
        "(prefers-reduced-motion: reduce)"
    ).matches;

    const navigation = document.querySelector(".hyro-nav");

    function updateNavigation() {
        if (!navigation) {
            return;
        }

        navigation.classList.toggle(
            "hyro-nav-scrolled",
            window.scrollY > 24
        );
    }

    updateNavigation();

    window.addEventListener(
        "scroll",
        updateNavigation,
        { passive: true }
    );

    const sectionSelectors = [
        ".spa-product-hero-content",
        ".spa-app-preview",
        ".spa-quick-benefits",
        ".homepage-section-heading",
        ".spa-workflow-content",
        ".spa-workflow-visual",
        ".spa-showcase-wrapper",
        ".spa-promise",
        ".spa-comparison-table",
        ".comparison-bottom",
        ".spa-pricing-toolbar",
        ".spa-pricing-message",
        ".spa-results-message",
        ".spa-faq-intro",
        ".spa-faq-list",
        ".spa-final-cta-card"
    ];

    sectionSelectors.forEach(function (selector, index) {
        document.querySelectorAll(selector).forEach(function (element) {
            element.classList.add("hyro-reveal");

            if (index % 2 === 0) {
                element.classList.add("hyro-reveal-left");
            } else {
                element.classList.add("hyro-reveal-right");
            }
        });
    });

    const staggerGroups = [
        ".spa-quick-benefits-grid",
        ".spa-features-grid",
        ".spa-why-grid",
        ".spa-results-grid",
        ".spa-pricing-grid"
    ];

    staggerGroups.forEach(function (selector) {
        document.querySelectorAll(selector).forEach(function (group) {
            group.classList.add("hyro-stagger");

            Array.from(group.children).forEach(function (item, index) {
                item.classList.add("hyro-reveal");

                item.style.setProperty(
                    "--hyro-reveal-delay",
                    Math.min(index * 85, 425) + "ms"
                );
            });
        });
    });

    const revealItems = document.querySelectorAll(".hyro-reveal");

    if (reducedMotion || !("IntersectionObserver" in window)) {
        revealItems.forEach(function (element) {
            element.classList.add("hyro-visible");
        });

        return;
    }

    const observer = new IntersectionObserver(
        function (entries, revealObserver) {
            entries.forEach(function (entry) {
                if (!entry.isIntersecting) {
                    return;
                }

                entry.target.classList.add("hyro-visible");
                revealObserver.unobserve(entry.target);
            });
        },
        {
            threshold:0.12,
            rootMargin:"0px 0px -55px 0px"
        }
    );

    revealItems.forEach(function (element) {
        observer.observe(element);
    });
});
