<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion — {{ config('cms.name') }} — {{ config('cms.tagline') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
        .login-input:focus { outline: none; box-shadow: 0 0 0 2px {{ $primaryColor }}40; border-color: {{ $primaryColor }}; }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, {{ $primaryColor }}15 0%, {{ $secondaryColor }}20 50%, {{ $primaryColor }}10 100%);">
    <div class="w-full max-w-md">
        {{-- Carte principale --}}
        <div class="bg-white rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden">
            {{-- Bandeau gradient --}}
            <div class="h-24 flex items-center justify-center" style="background: linear-gradient(135deg, {{ $primaryColor }}, {{ $secondaryColor }});">
                <img src="{{ $logo }}" alt="Logo" class="h-14 w-14 object-contain drop-shadow-lg" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');">
                <div class="h-14 w-14 rounded-xl bg-white/20 backdrop-blur hidden flex items-center justify-center">
                    <span class="text-white font-bold text-xl">{{ strtoupper(substr(config('cms.name'), 0, 1)) }}</span>
                </div>
            </div>

            <div class="p-8">
                <div class="text-center mb-6">
                    <h1 class="text-xl font-bold text-slate-800">Connexion — {{ config('cms.name') }}</h1>
                    <p class="text-sm text-slate-500 mt-1">{{ config('cms.tagline') }}</p>
                </div>

                @if($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border border-red-100 text-red-700 rounded-xl text-sm flex items-center gap-3">
                        <svg class="w-5 h-5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ url('/admin/login') }}" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" required autofocus
                            class="login-input w-full border border-slate-200 rounded-xl px-4 py-3 transition"
                            placeholder="vous@exemple.fr">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Mot de passe</label>
                        <input type="password" name="password" required
                            class="login-input w-full border border-slate-200 rounded-xl px-4 py-3 transition"
                            placeholder="••••••••">
                    </div>
                    <div>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="remember" class="rounded border-slate-300 text-slate-600">
                            <span class="text-sm text-slate-600">Se souvenir de moi</span>
                        </label>
                    </div>
                    <button type="submit" class="w-full py-3 rounded-xl font-semibold text-white transition-all hover:shadow-lg hover:scale-[1.01] active:scale-[0.99]"
                        style="background: linear-gradient(135deg, {{ $primaryColor }}, {{ $secondaryColor }});">
                        Se connecter
                    </button>
                </form>
            </div>
        </div>

        {{-- Footer branding --}}
        <p class="text-center mt-6 text-sm text-slate-500">
            Propulsé par <a href="https://gdevstudio.fr" target="_blank" rel="noopener" class="font-medium hover:underline" style="color: {{ $primaryColor }};">GdevStudio</a>
        </p>
    </div>
</body>
</html>
