@extends('layout.app')

@section('body')

<main class="min-h-screen w-full flex items-center justify-center px-4 py-10 bg-(--color-background) relative overflow-hidden">

    {{-- Background subtil --}}
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px]
                    bg-(--color-orange)/[0.025] blur-3xl rounded-full">
        </div>
    </div>


    <div class="relative w-full max-w-5xl">

        <div class="grid lg:grid-cols-[0.9fr_1.1fr]
                    overflow-hidden
                    rounded-3xl
                    border border-[var(--line-subtle)]
                    bg-[var(--surface-panel-strong)]
                    shadow-2xl shadow-black/30
                    backdrop-blur-xl">


            {{-- Partie branding --}}
            <div class="hidden lg:flex flex-col justify-between
                        p-12
                        border-r border-[var(--line-subtle)]
                        bg-[var(--surface-panel-strong)]">

                {{-- Logo parfaitement centré --}}
                <div class="flex justify-center">
                    <a
                        href="{{ Route('homepage') }}"
                        class="inline-flex items-center justify-center"
                    >
                        <img
                            src="{{ asset('img/logo.png') }}"
                            alt="Franc'App"
                            class="w-40 h-auto object-contain"
                        />
                    </a>
                </div>


                <div class="max-w-sm mx-auto text-center">
                
                    <h1 class="text-3xl xl:text-4xl font-bold tracking-tight text-[var(--content-primary)]">
                        Bienvenue sur
                        <span class="text-(--color-orange)">
                            {{ config('app.name') }}
                        </span>
                    </h1>


                    <p class="mt-5 text-sm leading-7 text-[var(--content-muted)]">
                        Retrouvez toutes les informations de votre enfant et gérez simplement ses inscriptions, présences et démarches auprès du centre de loisirs.
                    </p>

                </div>

            </div>


            {{-- Formulaire --}}
            <div class="p-7 sm:p-10 lg:p-14">

                <div class="w-full max-w-md mx-auto">


                    {{-- Logo mobile --}}
                    <div class="flex justify-center lg:hidden mb-10">

                        <a
                            href="{{ Route('homepage') }}"
                            class="flex items-center justify-center"
                        >
                            <img
                                src="{{ asset('img/logo.png') }}"
                                alt="Franc'App"
                                class="w-36 h-auto object-contain"
                            />
                        </a>

                    </div>


                    {{-- En-tête --}}
                    <div class="text-center lg:text-left mb-9">

                        <p class="text-[11px] font-semibold uppercase tracking-[0.22em]
                                  text-(--color-orange) mb-3">
                            Connexion
                        </p>

                        <h2 class="text-3xl font-bold tracking-tight text-[var(--content-primary)]">
                            Bon retour.
                        </h2>

                        <p class="mt-2 text-sm text-[var(--content-muted)]">
                            Connectez-vous à votre compte pour continuer.
                        </p>

                    </div>


                    <form
                        method="POST"
                        action="{{ Route('login.store') }}"
                        class="space-y-6"
                    >

                        @csrf


                        {{-- Email --}}
                        <div>

                            <label
                                for="email"
                                class="block text-sm font-medium text-[var(--content-secondary)] mb-2"
                            >
                                Adresse email
                            </label>

                            <input
                                id="email"
                                type="email"
                                name="email"
                                value="{{ old('email') }}"
                                required
                                autofocus
                                autocomplete="email"
                                placeholder="vous@exemple.fr"
                                class="w-full h-12 px-4 rounded-xl
                                       bg-[var(--surface-panel-strong)]
                                       border border-[var(--line-subtle)]
                                       text-[var(--content-primary)]
                                       placeholder:text-[var(--content-muted)]
                                       outline-none
                                       transition-all duration-200
                                       focus:border-(--color-orange)
                                       focus:bg-[var(--surface-panel-strong)]
                                       focus:ring-4 focus:ring-(--color-orange)/10"
                            />

                            @error('email')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>


                        {{-- Mot de passe --}}
                        <div>

                            <div class="flex items-center justify-between mb-2">

                                <label
                                    for="password"
                                    class="text-sm font-medium text-[var(--content-secondary)]"
                                >
                                    Mot de passe
                                </label>

                                <a
                                    href="javascript:void(0)"
                                    class="text-xs text-[var(--content-muted)]
                                           hover:text-(--color-orange)
                                           transition-colors"
                                >
                                    Mot de passe oublié ?
                                </a>

                            </div>


                            <input
                                id="password"
                                type="password"
                                name="password"
                                required
                                autocomplete="current-password"
                                placeholder="••••••••••••"
                                class="w-full h-12 px-4 rounded-xl
                                       bg-[var(--surface-panel-strong)]
                                       border border-[var(--line-subtle)]
                                       text-[var(--content-primary)]
                                       placeholder:text-[var(--content-muted)]
                                       outline-none
                                       transition-all duration-200
                                       focus:border-(--color-orange)
                                       focus:bg-[var(--surface-panel-strong)]
                                       focus:ring-4 focus:ring-(--color-orange)/10"
                            />

                        </div>


                        {{-- Connexion --}}
                        <button
                            type="submit"
                            class="group w-full h-12
                                   flex items-center justify-center gap-2
                                   rounded-xl
                                   bg-(--color-orange)
                                   text-[var(--content-primary)]
                                   font-semibold text-sm
                                   shadow-lg shadow-(--color-orange)/10
                                   transition-all duration-200
                                   hover:brightness-110
                                   hover:-translate-y-0.5
                                   hover:shadow-xl hover:shadow-(--color-orange)/15
                                   focus:outline-none
                                   focus:ring-4 focus:ring-(--color-orange)/20"
                        >

                            <span>
                                Se connecter
                            </span>

                            <svg
                                class="w-4 h-4 transition-transform duration-200
                                       group-hover:translate-x-1"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M5 12h14M13 6l6 6-6 6"
                                />
                            </svg>

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</main>
```



@endsection