script.js

// Main JavaScript File
document.addEventListener('DOMContentLoaded', function() {
    // Initialize animations
    const animateElements = document.querySelectorAll('.fade-in, .slide-up');
    
    animateElements.forEach((el, index) => {
        el.style.animationDelay = `${index * 0.1}s`;
    });
    
    // Language switcher functionality
    const langSwitcher = document.getElementById('lang-switcher');
    if (langSwitcher) {
        langSwitcher.addEventListener('change', function() {
            const selectedLang = this.value;
            // In a real app, this would redirect to the selected language version
            console.log(`Language changed to: ${selectedLang}`);
        });
    }
    
    // Theme switcher functionality
    const themeSwitcher = document.getElementById('theme-switcher');
    if (themeSwitcher) {
        themeSwitcher.addEventListener('change', function() {
            const selectedTheme = this.value;
            document.body.classList.toggle('dark', selectedTheme === 'dark');
            localStorage.setItem('theme', selectedTheme);
        });
        
        // Check for saved theme preference
        const savedTheme = localStorage.getItem('theme') || 'light';
        themeSwitcher.value = savedTheme;
        if (savedTheme === 'dark') {
            document.body.classList.add('dark');
        }
    }
    
    // Interactive code runner
    const runCodeBtn = document.getElementById('run-code');
    if (runCodeBtn) {
        runCodeBtn.addEventListener('click', function() {
            const output = document.getElementById('code-output');
            if (output) {
                output.innerHTML = `
                    <div class="text-green-600 font-bold">$ python hello.py</div>
                    <div class="mt-3 text-2xl font-bold text-primary">سلام دنیا!</div>
                    <div class="mt-3 text-gray-600">✅ کد با موفقیت اجرا شد!</div>
                    <div class="mt-4 text-sm text-gray-500">
                        زمان اجرا: ۰.۰۰۲ ثانیه<br>
                        حافظه مصرفی: ۲.۱ مگابایت
                    </div>
                `;
                
                // Add animation
                output.classList.add('animate-pulse');
                setTimeout(() => output.classList.remove('animate-pulse'), 500);
                
                // Button feedback
                this.innerHTML = '<span>✅ اجرا شد!</span>';
                this.classList.add('bg-green-600', 'hover:bg-green-700');
                setTimeout(() => {
                    this.innerHTML = '<span>اجرای کد</span>';
                    this.classList.remove('bg-green-600', 'hover:bg-green-700');
                }, 2000);
            }
        });
    }
    
    // Add hover effects to cards
    const cards = document.querySelectorAll('.bg-white\\/80');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Add parallax effect to floating elements
    window.addEventListener('mousemove', function(e) {
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        
        document.querySelectorAll('.floating-element').forEach(el => {
            const speed = parseFloat(el.getAttribute('data-speed') || '0.5');
            const xMove = x * speed * 100;
            const yMove = y * speed * 100;
            el.style.transform = `translate(${xMove}px, ${yMove}px)`;
        });
    });
    
    // Initialize typing animation
    const typeWriter = document.getElementById('typewriter');
    if (typeWriter) {
        const texts = [
            'یادگیری پایتون',
            'ساخت پروژه‌های واقعی',
            'تبدیل شدن به حرفه‌ای'
        ];
        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;
        
        function type() {
            const currentText = texts[textIndex];
            
            if (isDeleting) {
                typeWriter.textContent = currentText.substring(0, charIndex - 1);
                charIndex--;
            } else {
                typeWriter.textContent = currentText.substring(0, charIndex + 1);
                charIndex++;
            }
            
            if (!isDeleting && charIndex === currentText.length) {
                isDeleting = true;
                setTimeout(type, 2000);
            } else if (isDeleting && charIndex === 0) {
                isDeleting = false;
                textIndex = (textIndex + 1) % texts.length;
                setTimeout(type, 500);
            } else {
                setTimeout(type, isDeleting ? 50 : 100);
            }
        }
        
        setTimeout(type, 1000);
    }
});

// API functions
async function fetchCourses() {
    try {
        const response = await fetch('/api/courses');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching courses:', error);
        return [];
    }
}

// Form validation
function validateForm(form) {
    let isValid = true;
    const inputs = form.querySelectorAll('input[required], textarea[required]');
    
    inputs.forEach(input => {
        if (!input.value.trim()) {
            isValid = false;
            input.classList.add('border-red-500');
        } else {
            input.classList.remove('border-red-500');
        }
    });
    
    return isValid;
}

// Create confetti effect
function createConfetti() {
    const confettiCount = 100;
    const colors = ['#3B82F6', '#10B981', '#8B5CF6', '#EF4444', '#F59E0B'];
    
    for (let i = 0; i < confettiCount; i++) {
        const confetti = document.createElement('div');
        confetti.style.position = 'fixed';
        confetti.style.width = '10px';
        confetti.style.height = '10px';
        confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
        confetti.style.borderRadius = '50%';
        confetti.style.left = `${Math.random() * 100}vw`;
        confetti.style.top = '-20px';
        confetti.style.zIndex = '9999';
        confetti.style.pointerEvents = 'none';
        document.body.appendChild(confetti);
        
        // Animation
        const animation = confetti.animate([
            { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
            { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
        ], {
            duration: Math.random() * 3000 + 2000,
            easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
        });
        
        animation.onfinish = () => confetti.remove();
    }
}

// Export for global use
window.createConfetti = createConfetti;