@extends('layouts.app')

@section('title', 'Admin Login — Chess Portfolio')

@section('content')
    <main class="board-grid-light relative min-h-screen flex items-center justify-center p-5 sm:p-8 overflow-hidden">
        <!-- Subtle Background King & Knight Ornaments -->
        <div class="pointer-events-none fixed inset-0 flex items-center justify-between px-6 lg:px-20 opacity-[0.07]" aria-hidden="true">
            <x-chess-ornament variant="knight" class="w-64 h-72 text-zinc-950 -rotate-12 hidden md:block" />
            <x-chess-ornament variant="king" class="w-72 h-80 text-zinc-950 rotate-6 hidden md:block" />
        </div>

        <div class="relative z-10 w-full max-w-md bg-white border-2 border-zinc-950 p-7 sm:p-10 shadow-2xl hero-stagger hero-stagger-1">
            <div class="flex items-center justify-between border-b border-zinc-200 pb-5 mb-6">
                <div class="flex items-center gap-3">
                    <span class="w-10 h-10 bg-zinc-950 text-white flex items-center justify-center">
                        <x-chess-piece piece="king" class="w-5 h-5" />
                    </span>
                    <div>
                        <p class="font-mono text-[10px] uppercase tracking-[0.25em] text-zinc-400">H8 // RESTRICTED</p>
                        <h1 class="font-display text-2xl font-bold uppercase tracking-tight text-zinc-950">Admin Access</h1>
                    </div>
                </div>
                <a href="{{ route('portfolio.index') }}" class="font-mono text-[11px] uppercase tracking-wider text-zinc-500 hover:text-zinc-950 transition">
                    &larr; Site
                </a>
            </div>

            @if ($errors->any())
                <div class="mb-5 border-2 border-zinc-950 bg-zinc-100 text-zinc-950 px-4 py-3 font-mono text-xs space-y-1">
                    @foreach ($errors->all() as $error)
                        <p>&bull; {{ $error }}</p>
                    @endforeach
                </div>
            @endif

            <form action="{{ route('login.attempt') }}" method="POST" class="space-y-5">
                @csrf
                <div>
                    <label for="email" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">
                        Email
                    </label>
                    <input
                        id="email"
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autofocus
                        placeholder="aufaadiyaksa@gmail.com"
                        class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                    >
                </div>

                <div>
                    <label for="password" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">
                        Password
                    </label>
                    <input
                        id="password"
                        type="password"
                        name="password"
                        required
                        placeholder="••••••••"
                        class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                    >
                </div>

                <label class="inline-flex items-center gap-2.5 cursor-pointer select-none">
                    <input type="checkbox" name="remember" value="1" class="w-4 h-4 accent-zinc-950 border-zinc-400">
                    <span class="font-mono text-xs text-zinc-600">Keep session active</span>
                </label>

                <button
                    type="submit"
                    data-magnetic
                    class="w-full py-3.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-[0.22em] inline-flex items-center justify-center gap-2.5 transition"
                >
                    <span>Enter Command Board</span>
                    <i class="fas fa-arrow-right text-[10px]"></i>
                </button>
            </form>
        </div>
    </main>
@endsection