<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Client Login | Restaurant OS</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-zinc-50 font-sans antialiased flex items-center justify-center min-h-screen p-4 relative overflow-hidden">
    <!-- Restaurant Aesthetic Background -->
    <div class="absolute inset-0 opacity-40 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, #f59e0b 1px, transparent 0); background-size: 32px 32px;"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-amber-500/5 via-transparent to-white pointer-events-none"></div>

    <div class="w-full max-w-[320px] relative z-10">
        <div class="bg-white border border-zinc-200 rounded-sm shadow-xl overflow-hidden">
            <div class="p-6">
                <div class="mb-8 text-center">
                    <div class="inline-flex items-center justify-center w-12 h-12 bg-amber-600 text-white rounded-sm mb-4 shadow-lg shadow-amber-900/20">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                    </div>
                    <h1 class="text-xl font-bold text-zinc-900 tracking-tight">CLIENT PORTAL</h1>
                    <p class="text-[10px] text-zinc-400 uppercase tracking-widest mt-1 font-bold">Operational Access</p>
                </div>

                <form action="{{ route('portal.login') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="email" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Brand Email</label>
                        <input type="email" name="email" id="email" value="{{ old('email') }}" required autofocus
                            class="w-full px-3 py-2 bg-zinc-50 border border-zinc-200 rounded-sm text-zinc-900 text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all placeholder-zinc-300" placeholder="admin@restaurant.com">
                        @error('email') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <label for="password" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">Password</label>
                        </div>
                        <input type="password" name="password" id="password" required
                            class="w-full px-3 py-2 bg-zinc-50 border border-zinc-200 rounded-sm text-zinc-900 text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all placeholder-zinc-300" placeholder="••••••••">
                    </div>

                    <button type="submit" class="w-full py-2.5 bg-zinc-900 hover:bg-black text-white text-[11px] font-bold uppercase tracking-widest rounded-sm shadow-md transition-all active:scale-[0.98] mt-2">
                        Enter Workspace
                    </button>
                </form>
            </div>
            
            <div class="bg-zinc-50 p-4 border-t border-zinc-100">
                <p class="text-[9px] text-center text-zinc-400 uppercase tracking-widest font-bold">Secured by Restaurant OS</p>
            </div>
        </div>
    </div>
</body>
</html>
