@extends('layouts.app')

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

@section('content')
<section class="section-soft-blue py-12 min-h-[85vh] flex items-center">
    <div class="max-w-md w-full mx-auto px-4">
        
        <!-- Onboarding 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">Guest Onboarding Portal</span>
                <h1 class="text-slate-900 dark:text-white text-xl font-serif">Create Guest Account</h1>
                <p class="text-xs text-slate-400 font-semibold">Join Kevron Suites portal to manage reservations and en-suite smart access.</p>
            </div>

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

                <!-- Full Name -->
                <div>
                    <label for="name" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Full Name</label>
                    <input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus placeholder="John Doe"
                           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('name')
                        <span class="text-red-600 text-[10px] block mt-1 font-semibold">{{ $message }}</span>
                    @enderror
                </div>

                <!-- 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 placeholder="john@example.com"
                           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>

                <!-- Phone / WhatsApp -->
                <div>
                    <label for="phone" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Phone / WhatsApp</label>
                    <input id="phone" type="tel" name="phone" value="{{ old('phone') }}" required placeholder="+234..."
                           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('phone')
                        <span class="text-red-600 text-[10px] block mt-1 font-semibold">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Password -->
                <div>
                    <label for="password" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Password</label>
                    <input id="password" type="password" name="password" required autocomplete="new-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>

                <!-- Confirm Password -->
                <div>
                    <label for="password_confirmation" class="block text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5">Confirm Password</label>
                    <input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-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">
                </div>

                <!-- Terms Consent -->
                <div class="flex items-start">
                    <input id="terms" type="checkbox" required class="w-4 h-4 rounded text-blue-900 border-slate-300 dark:border-slate-700 focus:ring-blue-900 mt-0.5">
                    <label for="terms" class="ml-2.5 text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                        I consent to the processing of my government identification credentials and accept the en-suite stay terms and conditions.
                    </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">
                    Register 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">
                    Already registered?
                    <a href="{{ route('guest.login') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline ml-1">Sign In instead</a>
                </p>
            </div>
        </div>

    </div>
</section>
@endsection