<x-guest-layout>
    <div class="flex flex-col gap-2">
        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300/80">Akses Aman</p>
        <h2 class="text-3xl font-semibold text-white">Login</h2>
        <p class="text-sm leading-7 text-slate-300">Masuk untuk mengakses dashboard admin atau client.</p>
    </div>

    <x-auth-session-status class="mt-6" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        <div class="mt-8">
            <x-input-label for="email" value="Email" class="text-slate-200" />
            <x-text-input
                id="email"
                class="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-slate-100 shadow-none placeholder:text-slate-500 focus:border-cyan-400/50 focus:ring-cyan-400/20"
                type="email"
                name="email"
                :value="old('email')"
                required
                autofocus
                autocomplete="username"
            />
            <x-input-error :messages="$errors->get('email')" class="mt-3 text-rose-200" />
        </div>

        <div class="mt-6">
            <x-input-label for="password" value="Password" class="text-slate-200" />
            <x-text-input
                id="password"
                class="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-slate-100 shadow-none placeholder:text-slate-500 focus:border-cyan-400/50 focus:ring-cyan-400/20"
                type="password"
                name="password"
                required
                autocomplete="current-password"
            />
            <x-input-error :messages="$errors->get('password')" class="mt-3 text-rose-200" />
        </div>

        <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <label for="remember_me" class="inline-flex items-center gap-2 text-sm text-slate-300">
                <input id="remember_me" type="checkbox" class="h-4 w-4 rounded border-white/15 bg-white/5 text-cyan-300 focus:ring-cyan-400/30" name="remember">
                Ingat saya
            </label>

            @if (Route::has('password.request'))
                <a class="text-sm font-medium text-slate-300 transition hover:text-white" href="{{ route('password.request') }}">
                    Lupa password?
                </a>
            @endif
        </div>

        <div class="mt-8">
            <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-cyan-400 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-300 focus:outline-none focus:ring-2 focus:ring-cyan-300/60 focus:ring-offset-2 focus:ring-offset-slate-950">
                Masuk
            </button>
        </div>
    </form>
</x-guest-layout>
