/**
 * Gestoría LP — Main JavaScript
 * Handles: mobile menu, smooth scroll, navbar scroll effect, scroll animations
 */

document.addEventListener('DOMContentLoaded', function () {

    // ---- DOM References ----
    const navbar     = document.getElementById('navbar');
    const navToggle  = document.getElementById('navToggle');
    const navMenu    = document.getElementById('navMenu');
    const body       = document.body;

    // Create overlay element for mobile menu backdrop
    const overlay = document.createElement('div');
    overlay.classList.add('navbar__overlay');
    document.body.appendChild(overlay);

    // ================================================================
    // 1. Mobile Hamburger Menu Toggle
    // ================================================================
    function openMenu() {
        navToggle.classList.add('active');
        navMenu.classList.add('active');
        overlay.classList.add('active');
        navToggle.setAttribute('aria-expanded', 'true');
        body.style.overflow = 'hidden';
    }

    function closeMenu() {
        navToggle.classList.remove('active');
        navMenu.classList.remove('active');
        overlay.classList.remove('active');
        navToggle.setAttribute('aria-expanded', 'false');
        body.style.overflow = '';
    }

    if (navToggle) {
        navToggle.addEventListener('click', function () {
            if (navMenu.classList.contains('active')) {
                closeMenu();
            } else {
                openMenu();
            }
        });
    }

    // Close menu when clicking overlay
    overlay.addEventListener('click', closeMenu);

    // Close menu when pressing Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && navMenu.classList.contains('active')) {
            closeMenu();
        }
    });

    // ================================================================
    // 2. Dropdown Toggle (mobile + touch devices)
    // ================================================================
    var dropdownItems = document.querySelectorAll('.navbar__item--dropdown');
    dropdownItems.forEach(function (item) {
        var link = item.querySelector('.navbar__link--dropdown');
        if (link) {
            link.addEventListener('click', function (e) {
                // Always prevent default on the dropdown parent link
                e.preventDefault();
                e.stopPropagation();
                item.classList.toggle('active');
            });
        }
    });

    // Close dropdown when clicking outside (desktop)
    document.addEventListener('click', function (e) {
        dropdownItems.forEach(function (item) {
            if (!item.contains(e.target)) {
                item.classList.remove('active');
            }
        });
    });

    // ================================================================
    // 3. Smooth Scroll for Anchor Links
    // ================================================================
    var anchorLinks = document.querySelectorAll('a[href^="#"]');
    anchorLinks.forEach(function (link) {
        // Skip dropdown toggle links — they have their own handler
        if (link.classList.contains('navbar__link--dropdown')) return;

        link.addEventListener('click', function (e) {
            var targetId = this.getAttribute('href');
            if (targetId === '#') return;

            var target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                closeMenu();

                var navHeight = navbar ? navbar.offsetHeight : 0;
                var targetPos = target.getBoundingClientRect().top + window.pageYOffset - navHeight;

                window.scrollTo({
                    top: targetPos,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ================================================================
    // 4. Navbar Background/Shadow on Scroll
    // ================================================================
    var lastScrollY = 0;

    function handleNavbarScroll() {
        var scrollY = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollY > 20) {
            navbar.classList.add('navbar--scrolled');
        } else {
            navbar.classList.remove('navbar--scrolled');
        }

        lastScrollY = scrollY;
    }

    if (navbar) {
        window.addEventListener('scroll', handleNavbarScroll, { passive: true });
        // Run once on load
        handleNavbarScroll();
    }

    // ================================================================
    // 5. Scroll Animations (Testimonials & fade-up elements)
    // ================================================================
    function animateOnScroll() {
        // Testimonial cards
        var testimonialCards = document.querySelectorAll('.testimonial-card:not(.animate-in)');
        testimonialCards.forEach(function (card, index) {
            var rect = card.getBoundingClientRect();
            var windowHeight = window.innerHeight;

            if (rect.top < windowHeight * 0.88) {
                // Stagger the animation
                setTimeout(function () {
                    card.classList.add('animate-in');
                }, index * 120);
            }
        });

        // Generic fade-up elements
        var fadeElements = document.querySelectorAll('.fade-up:not(.visible)');
        fadeElements.forEach(function (el) {
            var rect = el.getBoundingClientRect();
            var windowHeight = window.innerHeight;

            if (rect.top < windowHeight * 0.88) {
                el.classList.add('visible');
            }
        });
    }

    window.addEventListener('scroll', animateOnScroll, { passive: true });
    // Run once on load to catch elements already in viewport
    animateOnScroll();

    // ================================================================
    // 6. Close mobile dropdown on window resize to desktop
    // ================================================================
    window.addEventListener('resize', function () {
        if (window.innerWidth > 768) {
            closeMenu();
            dropdownItems.forEach(function (item) {
                item.classList.remove('active');
            });
        }
    });

});