@extends('layouts.app')

@section('title', 'Guest Account Sign In | Kevron Suites & Apartments')

@section('content')
<section class="section-soft-blue py-16 min-h-[80vh] flex items-center">
    <div class="max-w-md w-full mx-auto px-4">
        
        <!-- Welcome Card -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-8 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-6">
            
            <div class="text-center space-y-2">
                <span class="text-[9px] uppercase tracking-[0.25em] text-amber-500 font-bold block">Executive Residence Portal</span>
                <h1 class="text-slate-900 dark:text-white text-xl font-serif">Sign In to Kevron</h1>
                <p class="text-xs text-slate-400 font-semibold">Access en-suite smart features, payment history, and guest support.</p>
            </div>

            <!-- Login Form -->
            <form method="POST" action="{{ route('guest.login') }}" class="space-y-4 text-xs font-semibold">
                @csrf

                <!-- Email Address -->
                <div>
                    <label for="email" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Email Address</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username"
                           class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2.5 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                    @error('email')
                        <span class="text-red-600 text-[10px] block mt-1 font-semibold">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Password -->
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <label for="password" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest">Password</label>
                        <a href="#" class="text-[10px] text-blue-900 dark:text-cyan-400 hover:underline">Forgot Password?</a>
                    </div>
                    <input id="password" type="password" name="password" required autocomplete="current-password"
                           class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2.5 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                    @error('password')
                        <span class="text-red-600 text-[10px] block mt-1 font-semibold">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Remember Me -->
                <div class="flex items-center">
                    <input id="remember" type="checkbox" name="remember" class="w-4 h-4 rounded text-blue-900 border-slate-300 dark:border-slate-700 focus:ring-blue-900">
                    <label for="remember" class="ml-2.5 text-slate-500 dark:text-slate-400">Remember my session</label>
                </div>

                <!-- Action Button -->
                <button type="submit" class="btn-pill btn-primary w-full py-3.5 text-xs uppercase tracking-wider font-bold shadow-md hover:-translate-y-0.5 duration-300">
                    Authenticate Account
                </button>
            </form>

            <div class="border-t border-slate-100 dark:border-slate-800 pt-4 text-center">
                <p class="text-xs text-slate-400 font-semibold">
                    New to Kevron en-suite stays?
                    <a href="{{ route('guest.register') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline ml-1">Create an Account</a>
                </p>
            </div>
        </div>

    </div>
</section>
@endsection