// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide Icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    
    // Animated counters for social proof metrics
    function animateCounters() {
        const counters = document.querySelectorAll('.counter');
        const speed = 200; // The lower the faster
        
        counters.forEach(counter => {
            const target = parseInt(counter.getAttribute('data-target'));
            const increment = target / speed;
            let current = 0;
            
            const updateCounter = () => {
                current += increment;
                if (current < target) {
                    counter.innerText = Math.ceil(current);
                    setTimeout(updateCounter, 1);
                } else {
                    counter.innerText = target;
                }
            };
            
            // Start animation when element is in viewport
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        updateCounter();
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });
            
            observer.observe(counter);
        });
    }
    
    // Interactive feature demo
    function setupInteractiveDemo() {
        const styleSlider = document.getElementById('styleSlider');
        const previewBox = document.getElementById('previewBox');
        const themeButtons = document.querySelectorAll('.theme-btn');
        
        if (styleSlider) {
            styleSlider.addEventListener('input', function() {
                const value = this.value;
                const intensity = value / 100;
                
                // Update opacity based on slider
                previewBox.style.opacity = 0.5 + (intensity * 0.5);
                
                // Add some visual feedback
                if (value > 75) {
                    previewBox.style.filter = `saturate(${1 + intensity}) brightness(${1 + intensity * 0.2})`;
                }
            });
        }
        
        // Theme buttons
        themeButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Remove active class from all buttons
                themeButtons.forEach(btn => {
                    btn.classList.remove('bg-purple-600');
                    btn.classList.add('bg-gray-700', 'hover:bg-gray-600');
                });
                
                // Add active class to clicked button
                this.classList.remove('bg-gray-700', 'hover:bg-gray-600');
                this.classList.add('bg-purple-600');
                
                // Change preview box gradient based on theme
                const theme = this.getAttribute('data-theme');
                switch(theme) {
                    case 'purple':
                        previewBox.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
                        break;
                    case 'neutral':
                        previewBox.style.background = 'linear-gradient(135deg, #6b7280 0%, #374151 100%)';
                        break;
                    case 'vibrant':
                        previewBox.style.background = 'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)';
                        break;
                }
            });
        });
    }
    
    // Form submission handling
    function setupFormSubmission() {
        const form = document.getElementById('earlyAccessForm');
        
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Get form data
                const formData = new FormData(form);
                const name = form.querySelector('input[type="text"]').value;
                const email = form.querySelector('input[type="email"]').value;
                
                // Simple validation
                if (!name || !email) {
                    alert('Please fill in all required fields.');
                    return;
                }
                
                // Show loading state
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i data-lucide="loader" class="w-5 h-5 mr-2 animate-spin"></i> Processing...';
                submitBtn.disabled = true;
                
                // Simulate API call
                setTimeout(() => {
                    // Show success message
                    alert(`Thank you, ${name}! Your early access application has been received. We'll contact you at ${email} within 48 hours.`);
                    
                    // Reset form
                    form.reset();
                    
                    // Reset button
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                    
                    // Re-initialize icons
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }, 1500);
            });
        }
    }
    
    // Back to top button
    function setupBackToTop() {
        const backToTopBtn = document.getElementById('backToTop');
        
        if (backToTopBtn) {
            // Show/hide button based on scroll position
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.remove('opacity-0');
                    backToTopBtn.classList.add('opacity-100');
                } else {
                    backToTopBtn.classList.remove('opacity-100');
                    backToTopBtn.classList.add('opacity-0');
                }
            });
            
            // Scroll to top when clicked
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
    }
    
    // Smooth scrolling for anchor links
    function setupSmoothScrolling() {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                
                if (href === '#' || href === '#signup') {
                    return; // Let default behavior for specific links
                }
                
                e.preventDefault();
                
                const targetId = href.substring(1);
                const targetElement = document.getElementById(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    }
    
    // Mobile menu toggle (simplified)
    function setupMobileMenu() {
        const menuBtn = document.querySelector('button.md\\:hidden');
        const navLinks = document.querySelector('.hidden.md\\:flex');
        
        if (menuBtn && navLinks) {
            menuBtn.addEventListener('click', function() {
                navLinks.classList.toggle('hidden');
                navLinks.classList.toggle('flex');
                navLinks.classList.toggle('flex-col');
                navLinks.classList.toggle('absolute');
                navLinks.classList.toggle('top-16');
                navLinks.classList.toggle('left-0');
                navLinks.classList.toggle('right-0');
                navLinks.classList.toggle('bg-white');
                navLinks.classList.toggle('shadow-lg');
                navLinks.classList.toggle('p-6');
                navLinks.classList.toggle('space-y-4');
                
                // Change icon
                const icon = menuBtn.querySelector('i');
                if (icon) {
                    if (navLinks.classList.contains('hidden')) {
                        icon.setAttribute('data-lucide', 'menu');
                    } else {
                        icon.setAttribute('data-lucide', 'x');
                    }
                    lucide.createIcons();
                }
            });
        }
    }
    
    // Initialize all functionality
    function init() {
        animateCounters();
        setupInteractiveDemo();
        setupFormSubmission();
        setupBackToTop();
        setupSmoothScrolling();
        setupMobileMenu();
        
        // Add hover effects for team cards
        document.querySelectorAll('.hover-scale').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.boxShadow = '';
            });
        });
    }
    
    // Start everything
    init();
});