@extends('layouts.auth')
@section('title','Register')
@section('content')
<h2 class="text-2xl font-black text-white mb-1">Create Account</h2>
<p class="text-slate-400 text-sm mb-8">Join Vicdan Exchange — fastest crypto & gift card rates in Nigeria</p>
<form method="POST" action="{{ route('register') }}" class="space-y-4">
    @csrf
    <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2">
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Full Name</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none"
                   placeholder="John Doe"/>
        </div>
        <div class="col-span-2">
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Email Address</label>
            <input type="email" name="email" value="{{ old('email') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none"
                   placeholder="you@example.com"/>
        </div>
        <div class="col-span-2">
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Phone Number</label>
            <input type="tel" name="phone" value="{{ old('phone') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none"
                   placeholder="+234 xxx xxx xxxx"/>
        </div>
        <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Password</label>
            <input type="password" name="password" required
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none"
                   placeholder="••••••••"/>
        </div>
        <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Confirm Password</label>
            <input type="password" name="password_confirmation" required
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none"
                   placeholder="••••••••"/>
        </div>
    </div>
    <p class="text-[11px] text-slate-500">By creating an account you agree to our <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>.</p>
    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 transition-all text-sm uppercase tracking-widest">
        Create Account
    </button>
</form>
<p class="text-center text-slate-500 text-sm mt-5">Already have an account? <a href="{{ route('login') }}" class="text-primary hover:underline font-semibold">Sign in</a></p>
@endsection