@extends('layouts.vitrine')

@section('titre', 'Se connecter')

@section('contenu')
    <section class="relative overflow-hidden">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"></div>
        <div class="relative mx-auto max-w-5xl px-5 pb-28 pt-24 lg:px-10">
            <h1 style="margin:0;text-align:center;font-size:clamp(40px,6vw,64px);line-height:1.05;font-weight:800;letter-spacing:-0.03em;color:#0b1220">Se connecter.</h1>
            <div class="mt-12 grid gap-10 lg:grid-cols-2">
                <form action="{{ route('connexion.eleve') }}" method="post" class="grid content-start gap-5 p-8" style="border:1px solid #e3e5e8;border-radius:24px;background:#fff">
                    @csrf
                    <h2 style="margin:0;font-size:24px;font-weight:800;color:#0b1220">Je suis élève</h2>
                    @error('identifiant')<p class="font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
                    <label class="grid gap-2 font-extrabold">Identifiant<input name="identifiant" value="{{ old('identifiant') }}" autocomplete="username" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 font-mono" placeholder="lea.m.2nde-b"></label>
                    <label class="grid gap-2 font-extrabold">Code secret<input type="password" name="code" autocomplete="current-password" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 font-mono"></label>
                    <p class="font-medium">Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.</p>
                    <p class="font-medium">Pas encore d'identifiant ? <a href="{{ route('rejoindre') }}" class="font-bold underline underline-offset-4">Rejoins ta classe avec son code</a>.</p>
                    <div><button type="submit" style="display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:0;border-radius:999px;background:#0b57d0;color:#fff;font-size:16px;font-weight:700;cursor:pointer">Entrer <span class="font-mono" aria-hidden="true">→</span></button></div>
                </form>
                <form action="{{ route('connexion.prof') }}" method="post" class="grid content-start gap-5 p-8" style="border:1px solid #e3e5e8;border-radius:24px;background:#fff">
                    @csrf
                    <h2 style="margin:0;font-size:24px;font-weight:800;color:#0b1220">Je suis enseignant</h2>
                    @error('email')<p class="font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
                    <label class="grid gap-2 font-extrabold">E-mail<input type="email" name="email" value="{{ old('email') }}" autocomplete="email" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                    <label class="grid gap-2 font-extrabold">Mot de passe<input type="password" name="password" autocomplete="current-password" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                    <div class="flex flex-wrap items-center gap-5"><button type="submit" style="display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:0;border-radius:999px;background:#0b57d0;color:#fff;font-size:16px;font-weight:700;cursor:pointer">Se connecter</button><a href="{{ route('register') }}" class="font-extrabold underline underline-offset-4">Créer une classe</a></div>
                </form>
            </div>
        </div>
    </section>
@endsection