<x-guest-layout>
    <div class="text-center mb-8">
        <h2 class="text-2xl font-black text-white tracking-tight">Get Started</h2>
        <p class="text-white/40 text-sm mt-1">Join the elite compliance infrastructure</p>
    </div>

    <form method="POST" action="{{ route('register') }}" class="space-y-5">
        @csrf

        <!-- Name -->
        <div class="space-y-1">
            <label for="name" class="auth-label">Full Name</label>
            <input id="name" class="w-full auth-input @error('name') border-red-500/50 @enderror" 
                   type="text" name="name" :value="old('name')" 
                   required autofocus autocomplete="name"
                   placeholder="Ahmed Khan" />
            @error('name')
                <p class="mt-1 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <!-- Email Address -->
        <div class="space-y-1">
            <label for="email" class="auth-label">Email Address</label>
            <input id="email" class="w-full auth-input @error('email') border-red-500/50 @enderror" 
                   type="email" name="email" :value="old('email')" 
                   required autocomplete="username"
                   placeholder="name@example.com" />
            @error('email')
                <p class="mt-1 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <div class="grid grid-cols-2 gap-4">
            <!-- Password -->
            <div class="space-y-1">
                <label for="password" class="auth-label">Password</label>
                <input id="password" class="w-full auth-input @error('password') border-red-500/50 @enderror"
                       type="password"
                       name="password"
                       required autocomplete="new-password"
                       placeholder="••••••••" />
                @error('password')
                    <p class="mt-1 text-xs text-red-400 opacity-80">{{ $message }}</p>
                @enderror
            </div>

            <!-- Confirm Password -->
            <div class="space-y-1">
                <label for="password_confirmation" class="auth-label">Confirm</label>
                <input id="password_confirmation" class="w-full auth-input @error('password_confirmation') border-red-500/50 @enderror"
                       type="password"
                       name="password_confirmation" required autocomplete="new-password"
                       placeholder="••••••••" />
                @error('password_confirmation')
                    <p class="mt-1 text-xs text-red-400 opacity-80">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="flex items-center pt-2">
            <label class="inline-flex items-center cursor-pointer group">
                <input type="checkbox" required class="rounded border-white/10 bg-white/5 text-[#1710e6] shadow-sm focus:ring-[#1710e6] focus:ring-offset-0">
                <span class="ms-3 text-[10px] text-white/30 group-hover:text-white/50 transition-colors uppercase tracking-widest font-bold">I agree to the Terms of Service</span>
            </label>
        </div>

        <!-- CAPTCHA -->
        <div class="space-y-3">
            <label for="captcha" class="auth-label">Security Verification</label>
            <div class="flex items-center gap-4">
                <div class="px-6 py-3 bg-white/5 border border-white/10 rounded-xl select-none">
                    <span class="text-xl font-black tracking-[0.5em] text-white italic blur-[0.5px]">{{ $captcha }}</span>
                </div>
                <div class="flex-1">
                    <input id="captcha" class="w-full auth-input @error('captcha') border-red-500/50 @enderror"
                           type="text" name="captcha" 
                           required 
                           placeholder="Type code" />
                </div>
            </div>
            @error('captcha')
                <p class="mt-2 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <div class="pt-4">
            <button type="submit" class="w-full flex justify-center items-center gap-2 py-4 bg-[#1710e6] text-white font-black text-xs uppercase tracking-[0.2em] shadow-glow hover:scale-[1.02] active:scale-[0.98] transition-all">
                Create Account
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
        </div>

        <div class="text-center pt-6 border-t border-white/5">
            <p class="text-xs text-white/30">Already have an account?</p>
            <a href="{{ route('login') }}" class="mt-2 inline-block text-[10px] uppercase font-black tracking-widest text-white hover:text-white/70 transition-colors underline underline-offset-8">
                Sign In Instead
            </a>
        </div>
    </form>
</x-guest-layout>
