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

    <div class="w-full max-w-[320px] relative z-10">
        <div class="bg-zinc-900/80 backdrop-blur-md border border-zinc-800 rounded-sm shadow-2xl overflow-hidden">
            <div class="p-5">
                <div class="mb-6 text-center">
                    <div class="inline-flex items-center justify-center w-10 h-10 bg-amber-500/10 text-amber-500 rounded-sm mb-3 border border-amber-500/20">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                    </div>
                    <h1 class="text-lg font-bold text-zinc-100 tracking-tight">RESTAURANT ADMIN</h1>
                    <p class="text-[11px] text-zinc-500 uppercase tracking-widest mt-1">Management Portal</p>
                </div>

                @if($errors->any())
                    <div class="mb-4 p-2 border-l-2 border-amber-500 bg-amber-500/5 text-[11px] text-amber-200">
                        @foreach ($errors->all() as $error)
                            <p>{{ $error }}</p>
                        @endforeach
                    </div>
                @endif

                <form action="{{ url('super-admin/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">Account Email</label>
                        <input type="email" name="email" id="email" value="{{ old('email') }}" required autofocus
                            class="w-full px-3 py-1.5 bg-zinc-800/50 border border-zinc-700 rounded-sm text-xs text-zinc-200 focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all placeholder-zinc-600">
                    </div>

                    <div>
                        <label for="password" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Access Key</label>
                        <input type="password" name="password" id="password" required
                            class="w-full px-3 py-1.5 bg-zinc-800/50 border border-zinc-700 rounded-sm text-xs text-zinc-200 focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input type="checkbox" name="remember" id="remember" class="w-3 h-3 rounded-xs border-zinc-700 bg-zinc-800 text-amber-500 focus:ring-amber-500 focus:ring-offset-zinc-900">
                            <label for="remember" class="ml-2 text-[10px] text-zinc-400">Stay signed in</label>
                        </div>
                    </div>

                    <button type="submit" 
                        class="w-full py-2 bg-amber-600 hover:bg-amber-500 text-white text-[11px] font-bold uppercase tracking-widest rounded-sm transition-all shadow-lg shadow-amber-900/20 active:scale-[0.98]">
                        Authorize Access
                    </button>
                </form>
            </div>
            <div class="bg-zinc-800/30 p-3 border-t border-zinc-800 text-center">
                <p class="text-[9px] text-zinc-600 uppercase tracking-tight">Proprietary Restaurant Management System v1.0</p>
            </div>
        </div>
    </div>
</body>
</html>
