// Theme toggle functionality
function initTheme() {
    const themeToggle = document.getElementById('themeToggle');
    const moonIcon = themeToggle.querySelector('i');
    
    // Check for saved theme or prefer-color-scheme
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    
    if (savedTheme === 'dark') {
        document.documentElement.classList.add('dark');
        moonIcon.setAttribute('data-feather', 'sun');
    } else {
        document.documentElement.classList.remove('dark');
        moonIcon.setAttribute('data-feather', 'moon');
    }
    
    // Toggle theme on button click
    themeToggle.addEventListener('click', () => {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('theme', 'light');
            moonIcon.setAttribute('data-feather', 'moon');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('theme', 'dark');
            moonIcon.setAttribute('data-feather', 'sun');
        }
        feather.replace();
    });
}

document.addEventListener('DOMContentLoaded', function() {
    initTheme();
// Form submission handler
    // Update the form container class for dark mode
    const authContainer = document.querySelector('.bg-white');
    if (authContainer) {
        authContainer.classList.add('auth-container', 'transition-colors', 'duration-300');
    }
const loginForm = document.querySelector('form');
if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const email = this.querySelector('input[type="email"]').value;
            const password = this.querySelector('input[type="password"]').value;
            
            // Simple validation
            if (!email || !password) {
                alert('Please fill in all fields');
                return;
            }
            
            // In a real app, you would send this to your backend
            console.log('Login attempt with:', { email, password });
            
            // Show loading state
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            submitBtn.innerHTML = `
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Signing in...
            `;
            submitBtn.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                
                // For demo purposes, just show a success message
                alert('Login successful! (This is a demo)');
            }, 2000);
        });
    }
    
    // Social login button handlers
    document.querySelectorAll('.social-login button').forEach(btn => {
        btn.addEventListener('click', function() {
            const platform = this.querySelector('i').getAttribute('data-feather');
            alert(`Sign in with ${platform.charAt(0).toUpperCase() + platform.slice(1)} clicked`);
        });
    });
});