Back To Top

(function () {

    'use strict';

    const backToTop = document.getElementById('back-to-top');
    const contactCta = document.querySelector('[data-contact-cta]');
    const contactCtaLinks = '.contact-cta-link';
    let hasScrolled = false;

    // Initial GSAP settings
    if (document.querySelector(contactCtaLinks)) {
        gsap.set(contactCtaLinks, { scale: 0, y: '100%' });
    }
    if (backToTop) {
        gsap.set('#back-to-top', { scale: 0, y: '100%' });
    }

    // Reusable GSAP Animations
    const animateElement = (
        targets,
        { scale, y, height = null, display = 'block', onComplete = null }
    ) => {
        gsap.to(targets, {
            duration: 0.2,
            scale,
            y,
            height,
            display,
            onComplete,
            ease: 'power1.inOut',
        });
    };

    // Scroll Listener for triggering animations
    const handleScroll = () => {
        const isDesktop = window.innerWidth > 768; // Define desktop size threshold
        if (!isDesktop) return; // Skip if not desktop

        const scrollPosition = window.scrollY;

        if (scrollPosition > 200 && !hasScrolled) {
            // Trigger animations when user scrolls down
            hasScrolled = true;
            contactCta.dataset.contactCtaState = 'active';
            animateElement(`${contactCtaLinks}, #back-to-top`, {
                scale: 1,
                y: 0,
                stagger: 0.1,
            });
        } else if (scrollPosition <= 200 && hasScrolled) {
            // Revert animations when user scrolls back up
            hasScrolled = false;
            contactCta.dataset.contactCtaState = 'not-active';

            animateElement(`${contactCtaLinks}, #back-to-top`, {
                scale: 0,
                y: '100%',
                stagger: -0.1,
                onComplete: () => {
                    if (backToTop) backToTop.style.display = 'none'; // Optionally hide after animation
                },
            });
        }
    };

    // Attach scroll event listener (desktop only)
    const updateScrollListener = () => {
        const isDesktop = window.innerWidth > 768; // Define desktop size threshold

        if (isDesktop) {
            window.addEventListener('scroll', handleScroll);
        } else {
            window.removeEventListener('scroll', handleScroll);
        }
    };

    // Initialize scroll listener on page load and resize
    window.addEventListener('resize', updateScrollListener);
    updateScrollListener();

    // Scroll Listener for Back to Top
    if (backToTop) {
        // Smooth scroll to top
        backToTop.addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    // Contact CTA Click Handler
    if (contactCta) {
        contactCta.addEventListener('click', () => {
            const isActive = contactCta.dataset.contactCtaState === 'active';

            if (!isActive) {
                contactCta.dataset.contactCtaState = 'active';
                animateElement(`${contactCtaLinks}, #back-to-top`, {
                    scale: 1,
                    y: 0,
                    stagger: 0.1,
                });
            } else {
                contactCta.dataset.contactCtaState = 'not-active';
                animateElement(`${contactCtaLinks}, #back-to-top`, {
                    scale: 0,
                    y: '100%',
                    stagger: -0.1,
                    onComplete: () => {
                        backToTop.style.display = 'none'; // Hide after animation
                    },
                });
            }
        });
    }
})();