@extends('layouts.auth')
@section('title','Login')
@section('content')
<h2 class="text-2xl font-black text-white mb-1">Welcome back</h2>
<p class="text-slate-400 text-sm mb-8">Sign in to your Vicdan Exchange account</p>
<form method="POST" action="{{ route('login') }}" class="space-y-5">
    @csrf
    <div>
        <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 autofocus
               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3.5 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none transition-colors"
               placeholder="you@example.com"/>
    </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.5 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:outline-none transition-colors"
               placeholder="••••••••"/>
    </div>
    <div class="flex items-center justify-between">
        <label class="flex items-center gap-2 text-sm text-slate-400 cursor-pointer">
            <input type="checkbox" name="remember" class="rounded border-white/10 bg-white/5 text-primary focus:ring-primary/30"/>
            Remember me
        </label>
        <a href="{{ route('password.request') }}" class="text-sm text-primary hover:underline">Forgot password?</a>
    </div>
    <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">
        Sign In
    </button>
</form>
<p class="text-center text-slate-500 text-sm mt-6">
    Don't have an account? <a href="{{ route('register') }}" class="text-primary hover:underline font-semibold">Create one</a>
</p>
@endsection