<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authorize | Biller Terminal</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-zinc-950 font-sans antialiased text-zinc-100 flex items-center justify-center min-h-screen p-6 selection:bg-indigo-500/30">
    <!-- Background Decor -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none opacity-20">
        <div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-indigo-600/20 blur-[120px] rounded-full"></div>
        <div class="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-emerald-600/10 blur-[120px] rounded-full"></div>
    </div>

    <div class="w-full max-w-sm relative">
        <div class="text-center mb-10">
            <div class="w-20 h-20 bg-indigo-600 rounded-sm flex items-center justify-center text-white font-black text-3xl mx-auto shadow-2xl shadow-indigo-900/40 mb-6 rotate-3 hover:rotate-0 transition-transform duration-500">
                B
            </div>
            <h1 class="text-2xl font-black tracking-tighter uppercase mb-2">Terminal Authorization</h1>
            <p class="text-[10px] text-zinc-500 font-black uppercase tracking-[0.2em] opacity-60">Identity verification required</p>
        </div>

        <div class="bg-zinc-900 border border-zinc-800 p-10 shadow-[0_0_50px_rgba(0,0,0,0.5)] relative overflow-hidden group">
            <div class="absolute top-0 left-0 w-1 h-full bg-indigo-600 transition-all duration-500 group-hover:w-2"></div>
            
            <form action="{{ route('biller.login') }}" method="POST" class="space-y-8">
                @csrf
                
                <div class="space-y-3">
                    <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest block">Operator ID</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                        class="w-full px-5 py-4 bg-zinc-950 border border-zinc-800 rounded-sm text-sm font-bold focus:outline-hidden focus:border-indigo-500 focus:ring-0 transition-all text-white placeholder-zinc-800"
                        placeholder="operator@system.io">
                    @error('email')
                        <p class="text-[10px] text-rose-500 mt-2 font-black uppercase tracking-tight">{{ $message }}</p>
                    @enderror
                </div>

                <div class="space-y-3">
                    <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest block">Secure Access Key</label>
                    <input type="password" name="password" required
                        class="w-full px-5 py-4 bg-zinc-950 border border-zinc-800 rounded-sm text-sm font-bold focus:outline-hidden focus:border-indigo-500 focus:ring-0 transition-all text-white placeholder-zinc-800"
                        placeholder="••••••••">
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full py-5 bg-indigo-600 text-white text-[11px] font-black uppercase tracking-[0.15em] rounded-sm hover:bg-indigo-500 transition-all shadow-2xl shadow-indigo-900/40 active:scale-[0.98] flex items-center justify-center space-x-3">
                        <span>Initiate Session</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                    </button>
                </div>
            </form>
        </div>

        <div class="mt-10 flex items-center justify-between opacity-30">
            <p class="text-[9px] text-zinc-500 font-black uppercase tracking-widest">Node 01-B</p>
            <div class="flex items-center space-x-1">
                <div class="w-1 h-1 rounded-full bg-emerald-500"></div>
                <p class="text-[9px] text-zinc-500 font-black uppercase tracking-widest">Terminal Ready</p>
            </div>
        </div>
    </div>
</body>
</html>
