@extends('layouts.app')

@section('title', 'Login - PropTrader Pro')

@section('styles')
<style>
    .auth-background {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-image: url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1920&h=1080&fit=crop');
        background-size: cover;
        background-position: center;
        background-blend-mode: overlay;
        position: relative;
    }
    
    .auth-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(88, 28, 135, 0.9) 100%);
        z-index: 1;
    }
    
    .auth-container {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .floating-card {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    
    .glow-button {
        position: relative;
        overflow: hidden;
    }
    
    .glow-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .glow-button:hover::before {
        left: 100%;
    }
    
    .social-button {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .social-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }
    
    .input-glow:focus {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
</style>
@endsection

@section('content')
<div class="auth-background">
    <div class="auth-container">
        <!-- Header -->
        <header class="glass-effect border-b border-white/10 backdrop-blur-xl">
            <div class="container mx-auto px-6 py-4">
                <div class="flex items-center justify-between">
                    <!-- Logo -->
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                            </svg>
                        </div>
                        <span class="text-xl font-bold text-white">PropTrader Pro</span>
                    </div>
                    
                    <!-- Navigation -->
                    <nav class="hidden md:flex items-center gap-6">
                        <a href="/" class="text-gray-300 hover:text-white transition-colors">Home</a>
                        <a href="/challenges" class="text-gray-300 hover:text-white transition-colors">Challenges</a>
                        <a href="/about" class="text-gray-300 hover:text-white transition-colors">About</a>
                        <a href="/contact" class="text-gray-300 hover:text-white transition-colors">Contact</a>
                    </nav>
                    
                    <!-- Mobile Menu Button -->
                    <button class="md:hidden text-white" onclick="toggleMobileMenu()">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </div>
        </header>
        
        <!-- Main Content -->
        <main class="flex-1 flex items-center justify-center px-4 py-12">
            <div class="w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch relative">
                <div class="absolute top-6 right-6 w-32 h-32 floating-card opacity-20 pointer-events-none">
                    <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 50 L25 35 L40 45 L55 25 L70 40 L85 30 L90 50" stroke="#10b981" stroke-width="2"/>
                        <circle cx="25" cy="35" r="3" fill="#10b981"/>
                        <circle cx="55" cy="25" r="3" fill="#10b981"/>
                        <circle cx="85" cy="30" r="3" fill="#10b981"/>
                    </svg>
                </div>

                <div class="hidden md:block rounded-2xl overflow-hidden border border-white/10 shadow-2xl relative bg-gradient-to-br from-blue-900/20 to-purple-900/20">
                    <!-- Future Level Trading Dashboard -->
                    <div class="p-6 h-full flex flex-col">
                        <!-- Live Trading Header -->
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center space-x-3">
                                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                                <span class="text-green-400 font-semibold text-sm">LIVE MARKET</span>
                            </div>
                            <div class="text-xs text-gray-400">Last Update: {{ now()->format('H:i:s') }}</div>
                        </div>
                        
                        <!-- Trading Stats Grid -->
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">EUR/USD</div>
                                <div class="text-lg font-bold text-white">1.0842</div>
                                <div class="text-xs text-green-400">+0.12%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">GBP/USD</div>
                                <div class="text-lg font-bold text-white">1.2745</div>
                                <div class="text-xs text-red-400">-0.08%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">USD/JPY</div>
                                <div class="text-lg font-bold text-white">149.82</div>
                                <div class="text-xs text-green-400">+0.25%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">BTC/USD</div>
                                <div class="text-lg font-bold text-white">43,256</div>
                                <div class="text-xs text-green-400">+2.34%</div>
                            </div>
                        </div>
                        
                        <!-- Live Chart -->
                        <div class="glass-effect rounded-lg p-4 mb-6 flex-1">
                            <div class="text-sm text-gray-400 mb-2">Market Activity</div>
                            <div class="h-32 relative">
                                <svg class="w-full h-full" viewBox="0 0 200 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 50 L25 40 L50 60 L75 30 L100 45 L125 20 L150 55 L175 35 L200 48" stroke="#10b981" stroke-width="2" fill="none" class="animate-pulse"/>
                                    <path d="M0 50 L25 40 L50 60 L75 30 L100 45 L125 20 L150 55 L175 35 L200 48 L200 100 L0 100 Z" fill="url(#gradient)" opacity="0.3"/>
                                    <defs>
                                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                            <stop offset="0%" stop-color="#10b981" stop-opacity="0.5"/>
                                            <stop offset="100%" stop-color="#10b981" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>
                                </svg>
                            </div>
                        </div>
                        
                        <!-- Trading Activity Feed -->
                        <div class="glass-effect rounded-lg p-4">
                            <div class="text-sm text-gray-400 mb-3">Recent Activity</div>
                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                        <span class="text-xs text-gray-300">EUR/USD BUY</span>
                                    </div>
                                    <span class="text-xs text-green-400">+$245</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                                        <span class="text-xs text-gray-300">GBP/USD SELL</span>
                                    </div>
                                    <span class="text-xs text-red-400">-$128</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                        <span class="text-xs text-gray-300">BTC/USD BUY</span>
                                    </div>
                                    <span class="text-xs text-green-400">+$1,856</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Bottom Stats -->
                        <div class="mt-4 grid grid-cols-3 gap-2">
                            <div class="text-center">
                                <div class="text-xs text-gray-400">Volume</div>
                                <div class="text-sm font-bold text-white">$2.4M</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-gray-400">Trades</div>
                                <div class="text-sm font-bold text-white">1,247</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-gray-400">P&L</div>
                                <div class="text-sm font-bold text-green-400">+$12.4K</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="max-w-md w-full glass-effect rounded-2xl p-8 backdrop-blur-xl border border-white/10 shadow-2xl mx-auto">
            <!-- Enhanced Logo Section -->
            <div class="text-center mb-8">
                <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg transform hover:scale-105 transition-transform">
                    <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </div>
                <h1 class="text-3xl font-bold gradient-text mb-2">Welcome Back</h1>
                <p class="text-gray-400">Sign in to your trading account</p>
                <div class="mt-4 inline-flex items-center bg-green-500/20 border border-green-500/50 rounded-full px-3 py-1">
                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                    <span class="text-green-300 text-xs font-medium">Secure Login</span>
                </div>
            </div>
        
        <form id="loginForm" method="POST" action="{{ route('login.post') }}" class="space-y-6">
            @csrf
            
            @if ($errors->any())
                <div class="bg-red-500/10 border border-red-500/50 rounded-lg p-4">
                    <div class="text-red-400 text-sm">
                        {{ implode(' ', $errors->all()) }}
                    </div>
                </div>
            @endif
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
                        </svg>
                    </div>
                    <input type="email" name="email" value="{{ old('email') }}" required
                        class="w-full bg-white/10 border border-white/20 rounded-lg pl-10 pr-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-all input-glow backdrop-blur-sm"
                        placeholder="you@example.com">
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                        <div class="w-2 h-2 bg-green-500 rounded-full opacity-0" id="email-valid"></div>
                    </div>
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <input type="password" name="password" id="password-input" required
                        class="w-full bg-white/10 border border-white/20 rounded-lg pl-10 pr-12 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-all input-glow backdrop-blur-sm"
                        placeholder="Enter your password">
                    <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                        <svg id="eye-icon" class="h-5 w-5 text-gray-400 hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        <svg id="eye-slash-icon" class="h-5 w-5 text-gray-400 hover:text-white transition-colors hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="flex items-center justify-between">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="remember" class="w-4 h-4 rounded border-white/20 bg-white/10 text-primary focus:ring-2 focus:ring-blue-400/20">
                    <span class="ml-2 text-sm text-gray-400">Remember me</span>
                </label>
                <a href="#" class="text-sm text-primary hover:text-blue-400 transition-colors">Forgot password?</a>
            </div>
            
            <button type="submit"
                class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-4 rounded-lg transition-all transform hover:scale-[1.02] shadow-lg glow-button relative overflow-hidden">
                <span class="relative z-10">Sign In</span>
                <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-0 hover:opacity-100 transition-opacity"></div>
            </button>
        </form>
        
        <div class="mt-6 text-center">
            <p class="text-gray-400">
                Don't have an account? 
                <a href="{{ route('register') }}" class="text-primary hover:text-blue-400 font-medium transition-colors">Sign up</a>
            </p>
            <div class="mt-4 text-center">
                <a href="#" class="text-xs text-gray-500 hover:text-gray-400 transition-colors">Need help? Contact Support</a>
            </div>
            <div class="mt-6 p-4 glass-effect rounded-lg border border-blue-500/20">
                <p class="text-xs text-blue-300 mb-2">🚀 লগইন করার পরে আপনি পাবেন:</p>
                <div class="flex flex-col space-y-1 text-left">
                    <a href="{{ route('dashboard') }}" class="text-xs text-gray-300 hover:text-white transition-colors flex items-center">
                        <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                        ড্যাশবোর্ড
                    </a>
                    <a href="{{ route('challenges') }}" class="text-xs text-gray-300 hover:text-white transition-colors flex items-center">
                        <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                        চ্যালেঞ্জ
                    </a>
                    <a href="{{ route('wallet') }}" class="text-xs text-gray-300 hover:text-white transition-colors flex items-center">
                        <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                        </svg>
                        ওয়ালেট
                    </a>
                    <a href="{{ route('leaderboard') }}" class="text-xs text-gray-300 hover:text-white transition-colors flex items-center">
                        <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v14a2 2 0 002 2h2a2 2 0 002-2z"/>
                        </svg>
                        লিডারবোর্ড
                    </a>
                </div>
            </div>
        </div>
        
        <div class="mt-6">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-dark-border"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-dark-bg text-gray-400">Or continue with</span>
                </div>
            </div>
            
            <div class="mt-6">
                <a href="{{ route('auth.google') }}" class="social-button w-full flex items-center justify-center gap-3 bg-white/10 border border-white/20 backdrop-blur-sm rounded-lg py-3 hover:bg-white/20 text-white text-decoration-none">
                    <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5" viewBox="0 0 24 24">
                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84C.87-2.6 3.3-4.53 6.16-4.53z"/>
                        </svg>
                    </div>
                    <span class="font-medium">Continue with Google</span>
                </a>
            </div>

            <div class="mt-4">
                <a href="{{ route('auth.facebook') }}" class="social-button w-full flex items-center justify-center gap-3 bg-white/10 border border-white/20 backdrop-blur-sm rounded-lg py-3 hover:bg-white/20 text-white text-decoration-none">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </div>
                    <span class="font-medium">Continue with Facebook</span>
                </a>
            </div>
                </div>
            </div>
        </main>
        
        <!-- Advanced JavaScript for future level functionality -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Password toggle functionality
                const passwordInput = document.getElementById('password-input');
                const togglePassword = document.getElementById('toggle-password');
                const eyeIcon = document.getElementById('eye-icon');
                const eyeSlashIcon = document.getElementById('eye-slash-icon');
                
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    
                    eyeIcon.classList.toggle('hidden');
                    eyeSlashIcon.classList.toggle('hidden');
                });
                
                // Email validation with advanced feedback
                const emailInput = document.querySelector('input[name="email"]');
                const emailValid = document.getElementById('email-valid');
                
                emailInput.addEventListener('input', function() {
                    const email = this.value;
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    
                    if (emailRegex.test(email)) {
                        emailValid.classList.remove('opacity-0');
                        emailValid.classList.add('opacity-100');
                        emailInput.classList.add('border-green-500/50');
                        emailInput.classList.remove('border-red-500/50');
                    } else if (email.length > 0) {
                        emailValid.classList.remove('opacity-100');
                        emailValid.classList.add('opacity-0');
                        emailInput.classList.add('border-red-500/50');
                        emailInput.classList.remove('border-green-500/50');
                    } else {
                        emailValid.classList.remove('opacity-100');
                        emailValid.classList.add('opacity-0');
                        emailInput.classList.remove('border-green-500/50', 'border-red-500/50');
                    }
                });
                
                // Form submission animation with loading states
                const loginForm = document.getElementById('loginForm');
                const submitButton = loginForm.querySelector('button[type="submit"]');
                
                loginForm.addEventListener('submit', function() {
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<span class="relative z-10 flex items-center justify-center"><svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></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...</span><div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-100"></div>';
                });
                
                // Live trading data simulation
                function updateTradingData() {
                    const elements = document.querySelectorAll('.trading-value');
                    elements.forEach(el => {
                        const currentValue = parseFloat(el.textContent.replace(/[^0-9.-]/g, ''));
                        const change = (Math.random() - 0.5) * 0.1;
                        const newValue = currentValue * (1 + change);
                        
                        if (el.classList.contains('positive')) {
                            el.textContent = '+' + newValue.toFixed(4);
                        } else {
                            el.textContent = newValue.toFixed(4);
                        }
                    });
                }
                
                // Update trading data every 3 seconds
                setInterval(updateTradingData, 3000);
                
                // Add keyboard navigation
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' && !submitButton.disabled) {
                        loginForm.dispatchEvent(new Event('submit'));
                    }
                });
                
                // Add focus effects
                const inputs = document.querySelectorAll('input');
                inputs.forEach(input => {
                    input.addEventListener('focus', function() {
                        this.parentElement.classList.add('ring-2', 'ring-blue-400/50');
                    });
                    
                    input.addEventListener('blur', function() {
                        this.parentElement.classList.remove('ring-2', 'ring-blue-400/50');
                    });
                });
            });
        </script>
        
        <!-- Footer -->
        <footer class="glass-effect border-t border-white/10 backdrop-blur-xl mt-auto">
            <div class="container mx-auto px-6 py-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- Company Info -->
                    <div>
                        <h3 class="text-white font-semibold mb-4">PropTrader Pro</h3>
                        <p class="text-gray-400 text-sm">Your trusted partner in proprietary trading challenges and funding opportunities.</p>
                    </div>
                    
                    <!-- Quick Links -->
                    <div>
                        <h4 class="text-white font-semibold mb-4">Quick Links</h4>
                        <ul class="space-y-2">
                            <li><a href="/" class="text-gray-400 hover:text-white text-sm transition-colors">Home</a></li>
                            <li><a href="/challenges" class="text-gray-400 hover:text-white text-sm transition-colors">Challenges</a></li>
                            <li><a href="/about" class="text-gray-400 hover:text-white text-sm transition-colors">About Us</a></li>
                            <li><a href="/contact" class="text-gray-400 hover:text-white text-sm transition-colors">Contact</a></li>
                        </ul>
                    </div>
                    
                    <!-- Support -->
                    <div>
                        <h4 class="text-white font-semibold mb-4">Support</h4>
                        <ul class="space-y-2">
                            <li><a href="/faq" class="text-gray-400 hover:text-white text-sm transition-colors">FAQ</a></li>
                            <li><a href="/help" class="text-gray-400 hover:text-white text-sm transition-colors">Help Center</a></li>
                            <li><a href="/terms" class="text-gray-400 hover:text-white text-sm transition-colors">Terms of Service</a></li>
                            <li><a href="/privacy" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy Policy</a></li>
                        </ul>
                    </div>
                    
                    <!-- Social Media -->
                    <div>
                        <h4 class="text-white font-semibold mb-4">Connect With Us</h4>
                        <div class="flex space-x-4">
                            <a href="#" class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825-.748 10.594 10.594 0 011.485.832c.025.117.045.238.045.364 0 .29-.015.516-.045.673-.05a8.838 8.838 0 00-2.332-.455c-.322-.05-.632-.125-.918-.255a1.68 1.68 0 00-.638-.423 3.38 3.38 0 00-1.4.59-.587c.95-.346 1.79-.835 2.475-1.45s1.525-1.104 2.475-1.45c.632.345 1.095.835 1.435.587a3.38 3.38 0 00.587.423c.286.13.596.205.918.255a8.838 8.838 0 002.33.455 10.594 10.594 0 012.825.748 10 10 0 002.953.57z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2.163c3.204 0 3.584.267 4.37.798.057.078.135.122.192.165.043.09.083.135.122.192.165.043.09.083.135.122-.192.165-.043-.09-.083-.135-.122-.192-.165C15.5 2.43 14.796 2.163 12 2.163c-1.305 0-2.404.991-2.638 2.798-.014.038-.028.076-.028.114 0 .042.015.082.028.114.042.038.015.082.028.114.014.038.028.076.028.114 0 .042-.015.082-.028.114-.042zm1.484 1.194c.696 0 1.225-.463 1.927-.992l1.516 1.062c.453.312.98.624 1.328.798l1.516-1.062c.702-.53 1.23-.992 1.927-.992.696 0 1.231.463 1.927.992l-1.486 1.194c-.453.312-.98.624-1.328.798l1.486-1.194c-.702-.53-1.23-.992-1.927-.992-.696 0-1.231.463-1.927.992L12 8.367c-.696 0-1.225.463-1.927.992l-1.516-1.062c-.453-.312-.98-.624-1.328-.798l1.516 1.062c.702.53 1.23.992 1.927.992.696 0 1.231-.463 1.927-.992l1.486-1.194c.453-.312.98-.624 1.328-.798l-1.486 1.194c.702.53 1.23.992 1.927.992z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Bottom Bar -->
                <div class="border-t border-white/10 mt-8 pt-8">
                    <div class="flex flex-col md:flex-row items-center justify-between">
                        <p class="text-gray-400 text-sm">© 2024 PropTrader Pro. All rights reserved.</p>
                        <div class="flex items-center space-x-4 mt-4 md:mt-0">
                            <span class="text-gray-400 text-sm">Payment Methods:</span>
                            <div class="flex space-x-2">
                                <span class="text-gray-300 text-xs">Visa</span>
                                <span class="text-gray-300 text-xs">Mastercard</span>
                                <span class="text-gray-300 text-xs">Crypto</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
@endsection