document.addEventListener('DOMContentLoaded', function() {
    // Main Navigation Toggle
    const menuToggle = document.querySelector('.menu-toggle');
    const siteNavigation = document.querySelector('#site-navigation');
    const primaryMenu = document.querySelector('#primary-menu');
    const menuItems = document.querySelectorAll('.main-nav .menu a');

    // Initialize menu functionality
    if (menuToggle && siteNavigation && primaryMenu) {
        // Menu Toggle Click Handler
        menuToggle.addEventListener('click', function() {
            const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
            menuToggle.setAttribute('aria-expanded', !isExpanded ? 'true' : 'false');
            menuToggle.classList.toggle('nav-menu-open');
            primaryMenu.classList.toggle('show-menu');
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(event) {
            const isClickInside = siteNavigation.contains(event.target);
            const isMenuOpen = primaryMenu.classList.contains('show-menu');

            if (!isClickInside && isMenuOpen) {
                menuToggle.setAttribute('aria-expanded', 'false');
                menuToggle.classList.remove('nav-menu-open');
                primaryMenu.classList.remove('show-menu');
            }
        });

        // Enhanced Hover Effects
        menuItems.forEach(item => {
            // Create and add hover effect element
            const hoverEffect = document.createElement('span');
            hoverEffect.className = 'hover-effect';
            item.appendChild(hoverEffect);

            // Mouse enter handler
            item.addEventListener('mouseenter', function(e) {
                // Create ripple effect
                const ripple = document.createElement('div');
                ripple.className = 'ripple';
                
                // Position the ripple
                const rect = this.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                
                this.appendChild(ripple);

                // Remove ripple after animation
                setTimeout(() => {
                    ripple.remove();
                }, 1000);

                // Add hover class for other effects
                this.classList.add('is-hovered');
            });

            // Mouse leave handler
            item.addEventListener('mouseleave', function() {
                this.classList.remove('is-hovered');
            });
        });

        // Keyboard Navigation
        primaryMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('keydown', function(event) {
                const isLastLink = link === primaryMenu.querySelector('a:last-child');
                const isFirstLink = link === primaryMenu.querySelector('a:first-child');

                // Handle Escape key
                if (event.key === 'Escape') {
                    menuToggle.setAttribute('aria-expanded', 'false');
                    menuToggle.classList.remove('nav-menu-open');
                    primaryMenu.classList.remove('show-menu');
                    menuToggle.focus();
                }

                // Handle Tab navigation
                if (event.key === 'Tab' && !event.shiftKey && isLastLink) {
                    if (primaryMenu.classList.contains('show-menu')) {
                        event.preventDefault();
                        menuToggle.focus();
                    }
                }

                if (event.key === 'Tab' && event.shiftKey && isFirstLink) {
                    if (primaryMenu.classList.contains('show-menu')) {
                        event.preventDefault();
                        menuToggle.focus();
                    }
                }
            });
        });
    }

    // Add smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href !== '#') {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });
});