script.js

// script.js

document.addEventListener('DOMContentLoaded', () => {
    
    // 1. Mobile Menu Toggle
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Close mobile menu when clicking a link
        const mobileLinks = mobileMenu.querySelectorAll('a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
            });
        });
    }

    // 2. Navbar Scroll Effect (Glassmorphism toggle)
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 20) {
            navbar.classList.add('shadow-md');
        } else {
            navbar.classList.remove('shadow-md');
        }
    });

    // 3. Intersection Observer for Fade-in Animations
    const observerOptions = {
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-up'); // Or add a class that triggers CSS animation
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Target elements to animate
    const animatedElements = document.querySelectorAll('.group, .scale-105, .bg-white.rounded-2xl');
    animatedElements.forEach(el => {
        // el.style.opacity = 0; // Initial state handled by CSS animation classes in HTML
        observer.observe(el);
    });

    // 4. Simple Contact Form Handler (Demo)
    const contactForm = document.querySelector('form');
    if (contactForm) {
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const emailInput = contactForm.querySelector('input[type="email"]');
            
            if(emailInput && emailInput.value) {
                // Simulate API call
                const btn = contactForm.querySelector('button');
                const originalText = btn.innerText;
                
                btn.innerText = 'در حال ارسال...';
                btn.disabled = true;
                btn.classList.add('opacity-75', 'cursor-not-allowed');

                setTimeout(() => {
                    alert(`ایمیل ${emailInput.value} با موفقیت ثبت شد!`);
                    btn.innerText = 'ارسال شد ✓';
                    btn.classList.remove('bg-secondary');
                    btn.classList.add('bg-green-500');
                    emailInput.value = '';
                }, 1500);
            }
        });
    }

    // 5. Pricing Card Hover Effect (Optional JS enhancement)
    const cards = document.querySelectorAll('#pricing .group, #pricing > div > div');
    cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            // Logic if needed
        });
    });
});