// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.querySelector('.md\\:hidden');
    const mobileMenu = document.createElement('div');
    mobileMenu.className = 'mobile-menu hidden absolute top-full left-0 right-0 bg-white shadow-md py-4 px-4 z-50';
    
    // Create mobile menu links
    mobileMenu.innerHTML = `
        <nav class="flex flex-col space-y-4">
            <a href="/product" class="font-medium hover:text-primary">Product</a>
            <a href="/how-it-works" class="font-medium hover:text-primary">How It Works</a>
            <a href="/case-studies" class="font-medium hover:text-primary">Case Studies</a>
            <a href="/pricing" class="font-medium hover:text-primary">Pricing</a>
            <a href="/contact" class="font-medium hover:text-primary">Contact</a>
        </nav>
    `;
    
    // Insert mobile menu after header
    const header = document.querySelector('header');
    header.parentNode.insertBefore(mobileMenu, header.nextSibling);
    
    // Toggle mobile menu
    mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
    });
    
    // Close mobile menu when clicking outside
    document.addEventListener('click', function(event) {
        if (!header.contains(event.target) && !mobileMenu.contains(event.target)) {
            mobileMenu.classList.add('hidden');
        }
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});