// Shared JavaScript across all pages
document.addEventListener('DOMContentLoaded', function() {
    console.log('AI Website Builder loaded');
    
    // Add animation to elements when they come into view
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
            }
        });
    }, { threshold: 0.1 });
    
    // Observe feature cards
    document.querySelectorAll('.grid > div').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        
        observer.observe(card);
    });
    
    // Add fade-in animation class
    const style = document.createElement('style');
    style.textContent = `
        .animate-fade-in {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
    `;
    document.head.appendChild(style);
    
    // Handle form submission
    const promptTextarea = document.getElementById('prompt');
    const generateButton = document.querySelector('button.flex.items-center.gap-2');
    
    if (generateButton) {
        generateButton.addEventListener('click', function() {
            const prompt = promptTextarea.value.trim();
            if (prompt) {
                // In a real app, this would send the prompt to an AI service
                console.log('Generating website for prompt:', prompt);
                
                // Add visual feedback
                this.innerHTML = '<i data-feather="loader"></i> Generating...';
                feather.replace();
                
                // Simulate API call
                setTimeout(() => {
                    this.innerHTML = '<i data-feather="zap"></i> Generate Website';
                    feather.replace();
                    alert('Website generated successfully! In a real application, this would open your new AI-created website.');
                }, 2000);
            } else {
                alert('Please describe your website first');
            }
        });
    }
});