@extends('layouts.app')

@section('title', 'Register - 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-purple-900/20 to-blue-900/20">
                    <!-- Future Level Trading Dashboard for Register -->
                    <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">GLOBAL MARKETS</span>
                            </div>
                            <div class="text-xs text-gray-400">{{ now()->format('H:i:s') }}</div>
                        </div>
                        
                        <!-- Market Overview 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">S&P 500</div>
                                <div class="text-lg font-bold text-white">4,521.38</div>
                                <div class="text-xs text-green-400">+1.24%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">NASDAQ</div>
                                <div class="text-lg font-bold text-white">14,125.48</div>
                                <div class="text-xs text-green-400">+2.15%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">DOW JONES</div>
                                <div class="text-lg font-bold text-white">35,678.23</div>
                                <div class="text-xs text-red-400">-0.45%</div>
                            </div>
                            <div class="glass-effect rounded-lg p-3">
                                <div class="text-xs text-gray-400">GOLD</div>
                                <div class="text-lg font-bold text-white">$2,045.67</div>
                                <div class="text-xs text-green-400">+0.82%</div>
                            </div>
                        </div>
                        
                        <!-- Live Market Chart -->
                        <div class="glass-effect rounded-lg p-4 mb-6 flex-1">
                            <div class="text-sm text-gray-400 mb-2">Market Performance</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 70 L20 65 L40 75 L60 55 L80 60 L100 40 L120 65 L140 50 L160 58 L180 45 L200 52" stroke="#3b82f6" stroke-width="2" fill="none" class="animate-pulse"/>
                                    <path d="M0 70 L20 65 L40 75 L60 55 L80 60 L100 40 L120 65 L140 50 L160 58 L180 45 L200 52 L200 100 L0 100 Z" fill="url(#gradient2)" opacity="0.3"/>
                                    <defs>
                                        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                                            <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.5"/>
                                            <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>
                                </svg>
                            </div>
                        </div>
                        
                        <!-- Trading Opportunities -->
                        <div class="glass-effect rounded-lg p-4 mb-6">
                            <div class="text-sm text-gray-400 mb-3">Hot Opportunities</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-orange-500 rounded-full animate-pulse"></div>
                                        <span class="text-xs text-gray-300">TECH STOCKS</span>
                                    </div>
                                    <span class="text-xs text-orange-400">HOT</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">CRYPTO</span>
                                    </div>
                                    <span class="text-xs text-green-400">BULLISH</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                        <span class="text-xs text-gray-300">FOREX</span>
                                    </div>
                                    <span class="text-xs text-blue-400">ACTIVE</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Platform Stats -->
                        <div class="mt-4 grid grid-cols-3 gap-2">
                            <div class="text-center">
                                <div class="text-xs text-gray-400">Traders</div>
                                <div class="text-sm font-bold text-white">15.2K</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-gray-400">Online</div>
                                <div class="text-sm font-bold text-green-400">3,847</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-gray-400">Success</div>
                                <div class="text-sm font-bold text-purple-400">94.2%</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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <h1 class="text-3xl font-bold gradient-text mb-2">Join PropTrader Pro</h1>
                <p class="text-gray-400">Start your trading journey today</p>
                <div class="mt-4 inline-flex items-center bg-blue-500/20 border border-blue-500/50 rounded-full px-3 py-1">
                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
                    <span class="text-blue-300 text-xs font-medium">Free Registration</span>
                </div>
            </div>
        
        <form id="registerForm" method="POST" action="{{ route('register.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">Full Name</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 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                    <input type="text" name="name" value="{{ old('name') }}" 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="John Doe">
                    <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="name-valid"></div>
                    </div>
                </div>
            </div>
            
            <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="Minimum 8 characters">
                    <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 class="mt-2" id="password-strength"></div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Confirm 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <input type="password" name="password_confirmation" id="password-confirm" 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="Confirm your password">
                    <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="confirm-valid"></div>
                    </div>
                </div>
            </div>
            
            <div class="flex items-start">
                <input type="checkbox" name="terms" required class="w-4 h-4 rounded border-white/20 bg-white/10 text-primary focus:ring-2 focus:ring-blue-400/20 mt-1">
                <label class="ml-2 text-sm text-gray-400">
                    I agree to the <a href="#" class="text-primary hover:text-blue-400 transition-colors">Terms of Service</a> and <a href="#" class="text-primary hover:text-blue-400 transition-colors">Privacy Policy</a>
                </label>
            </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">Create Account</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">
                Already have an account? 
                <a href="{{ route('login') }}" class="text-primary hover:text-blue-400 font-medium transition-colors">Sign in</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>
        
        <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');
                });
                
                // Advanced password strength indicator
                const passwordStrength = document.getElementById('password-strength');
                const passwordConfirm = document.getElementById('password-confirm');
                const confirmValid = document.getElementById('confirm-valid');
                
                function checkPasswordStrength(password) {
                    let strength = 0;
                    let feedback = '';
                    let color = '';
                    
                    if (password.length >= 8) strength++;
                    if (password.match(/[a-z]/)) strength++;
                    if (password.match(/[A-Z]/)) strength++;
                    if (password.match(/[0-9]/)) strength++;
                    if (password.match(/[^a-zA-Z0-9]/)) strength++;
                    
                    if (strength === 0) {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-full h-1 bg-red-500 rounded"></div><span class="text-red-400 text-xs">Very weak</span></div>';
                        color = 'border-red-500/50';
                    } else if (strength === 1) {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-1/5 h-1 bg-orange-500 rounded"></div><span class="text-orange-400 text-xs">Weak</span></div>';
                        color = 'border-orange-500/50';
                    } else if (strength === 2) {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-2/5 h-1 bg-yellow-500 rounded"></div><span class="text-yellow-400 text-xs">Fair</span></div>';
                        color = 'border-yellow-500/50';
                    } else if (strength === 3) {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-3/5 h-1 bg-blue-500 rounded"></div><span class="text-blue-400 text-xs">Good</span></div>';
                        color = 'border-blue-500/50';
                    } else if (strength === 4) {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-4/5 h-1 bg-green-500 rounded"></div><span class="text-green-400 text-xs">Strong</span></div>';
                        color = 'border-green-500/50';
                    } else {
                        feedback = '<div class="flex items-center space-x-2"><div class="w-full h-1 bg-green-600 rounded"></div><span class="text-green-500 text-xs">Very strong</span></div>';
                        color = 'border-green-600/50';
                    }
                    
                    return { strength, feedback, color };
                }
                
                passwordInput.addEventListener('input', function() {
                    const password = this.value;
                    const result = checkPasswordStrength(password);
                    passwordStrength.innerHTML = result.feedback;
                    
                    // Update border color based on strength
                    this.classList.remove('border-red-500/50', 'border-orange-500/50', 'border-yellow-500/50', 'border-blue-500/50', 'border-green-500/50', 'border-green-600/50');
                    if (password.length > 0) {
                        this.classList.add(result.color);
                    }
                    
                    // Check if passwords match
                    if (passwordConfirm.value) {
                        if (password === passwordConfirm.value) {
                            confirmValid.classList.remove('opacity-0');
                            confirmValid.classList.add('opacity-100');
                            passwordConfirm.classList.add('border-green-500/50');
                            passwordConfirm.classList.remove('border-red-500/50');
                        } else {
                            confirmValid.classList.remove('opacity-100');
                            confirmValid.classList.add('opacity-0');
                            passwordConfirm.classList.add('border-red-500/50');
                            passwordConfirm.classList.remove('border-green-500/50');
                        }
                    }
                });
                
                passwordConfirm.addEventListener('input', function() {
                    if (this.value === passwordInput.value && this.value.length > 0) {
                        confirmValid.classList.remove('opacity-0');
                        confirmValid.classList.add('opacity-100');
                        this.classList.add('border-green-500/50');
                        this.classList.remove('border-red-500/50');
                    } else if (this.value.length > 0) {
                        confirmValid.classList.remove('opacity-100');
                        confirmValid.classList.add('opacity-0');
                        this.classList.add('border-red-500/50');
                        this.classList.remove('border-green-500/50');
                    } else {
                        this.classList.remove('border-green-500/50', 'border-red-500/50');
                    }
                });
                
                // Advanced name validation
                const nameInput = document.querySelector('input[name="name"]');
                const nameValid = document.getElementById('name-valid');
                
                nameInput.addEventListener('input', function() {
                    const name = this.value;
                    if (name.length >= 2 && /^[a-zA-Z\s]+$/.test(name)) {
                        nameValid.classList.remove('opacity-0');
                        nameValid.classList.add('opacity-100');
                        this.classList.add('border-green-500/50');
                        this.classList.remove('border-red-500/50');
                    } else if (name.length > 0) {
                        nameValid.classList.remove('opacity-100');
                        nameValid.classList.add('opacity-0');
                        this.classList.add('border-red-500/50');
                        this.classList.remove('border-green-500/50');
                    } else {
                        nameValid.classList.remove('opacity-100');
                        nameValid.classList.add('opacity-0');
                        this.classList.remove('border-green-500/50', 'border-red-500/50');
                    }
                });
                
                // Advanced email validation
                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');
                        this.classList.add('border-green-500/50');
                        this.classList.remove('border-red-500/50');
                    } else if (email.length > 0) {
                        emailValid.classList.remove('opacity-100');
                        emailValid.classList.add('opacity-0');
                        this.classList.add('border-red-500/50');
                        this.classList.remove('border-green-500/50');
                    } else {
                        emailValid.classList.remove('opacity-100');
                        emailValid.classList.add('opacity-0');
                        this.classList.remove('border-green-500/50', 'border-red-500/50');
                    }
                });
                
                // Advanced form submission with validation
                const registerForm = document.getElementById('registerForm');
                const submitButton = registerForm.querySelector('button[type="submit"]');
                
                registerForm.addEventListener('submit', function(e) {
                    // Validate all fields before submission
                    const name = nameInput.value;
                    const email = emailInput.value;
                    const password = passwordInput.value;
                    const confirmation = passwordConfirm.value;
                    const terms = document.querySelector('input[name="terms"]').checked;
                    
                    if (!name || !email || !password || !confirmation || !terms) {
                        e.preventDefault();
                        // Show error for empty fields
                        if (!terms) {
                            alert('Please accept the terms and conditions');
                        }
                        return;
                    }
                    
                    if (password !== confirmation) {
                        e.preventDefault();
                        alert('Passwords do not match');
                        return;
                    }
                    
                    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>Creating Account...</span><div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-100"></div>';
                });
                
                // Live market data simulation
                function updateMarketData() {
                    const marketElements = document.querySelectorAll('.market-value');
                    marketElements.forEach(el => {
                        const currentValue = parseFloat(el.textContent.replace(/[^0-9.-]/g, ''));
                        const change = (Math.random() - 0.5) * 0.05;
                        const newValue = currentValue * (1 + change);
                        
                        if (el.classList.contains('positive')) {
                            el.textContent = '+' + newValue.toFixed(2) + '%';
                        } else {
                            el.textContent = newValue.toFixed(2);
                        }
                    });
                }
                
                // Update market data every 5 seconds
                setInterval(updateMarketData, 5000);
                
                // Add keyboard navigation
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' && e.target.tagName !== 'BUTTON' && !submitButton.disabled) {
                        const currentInput = document.activeElement;
                        const inputs = Array.from(document.querySelectorAll('input:not([disabled])'));
                        const currentIndex = inputs.indexOf(currentInput);
                        
                        if (currentIndex < inputs.length - 1) {
                            inputs[currentIndex + 1].focus();
                        } else {
                            registerForm.dispatchEvent(new Event('submit'));
                        }
                    }
                });
                
                // Add advanced focus effects
                const inputs = document.querySelectorAll('input');
                inputs.forEach(input => {
                    input.addEventListener('focus', function() {
                        this.parentElement.classList.add('ring-2', 'ring-purple-400/50');
                    });
                    
                    input.addEventListener('blur', function() {
                        this.parentElement.classList.remove('ring-2', 'ring-purple-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-.798l1.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