<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Créer un compte | CESIZen - Ministère de la Santé</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        :root { --fr-blue: #000091; }
        .fr-input-group { margin-bottom: 1.5rem; }
        .fr-label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.5rem; color: #161616; }
        .fr-input { width: 100%; padding: 0.75rem; border: 2px solid #3a3a3a; border-radius: 0; background-color: #eee; transition: border-color 0.2s; }
        .fr-input:focus { border-color: var(--fr-blue); outline: 3px solid var(--fr-blue); outline-offset: 2px; }
    </style>
</head>
<body class="bg-[#F6F6F6] min-h-screen flex flex-col font-sans">
    @include('layouts.header')

    <main id="main-content" class="flex-1 flex items-center justify-center p-8">
        <div class="w-full max-w-lg bg-white border border-slate-200 shadow-xl p-12">
            <div class="mb-10 text-left border-l-4 border-[#000091] pl-6">
                <h1 class="text-3xl font-black text-slate-900 mb-2">Créer mon espace</h1>
                <p class="text-slate-600 font-medium">Rejoignez la plateforme de santé étudiante du CESI</p>
            </div>

            @if ($errors->any())
                <div class="bg-[#FAEFEF] border-l-4 border-[#E1000F] p-4 mb-8" role="alert">
                    <ul class="list-disc list-inside text-[#E1000F] text-sm font-bold">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('register') }}" method="POST" class="space-y-6">
                @csrf

                <div class="fr-input-group">
                    <label for="name" class="fr-label">Nom complet</label>
                    <input type="text" id="name" name="name" required
                           class="fr-input"
                           value="{{ old('name') }}"
                           aria-required="true"
                           autocomplete="name">
                </div>

                <div class="fr-input-group">
                    <label for="email" class="fr-label">Adresse électronique (email académique)</label>
                    <input type="email" id="email" name="email" required
                           class="fr-input"
                           value="{{ old('email') }}"
                           aria-required="true"
                           autocomplete="email">
                </div>

                <div class="fr-input-group">
                    <label for="password" class="fr-label">Mot de passe</label>
                    <input type="password" id="password" name="password" required
                           class="fr-input"
                           aria-required="true"
                           autocomplete="new-password">
                    <p class="text-[10px] text-slate-500 mt-1 uppercase font-bold tracking-tight">8 caractères minimum, incluant chiffres et symboles</p>
                </div>

                <div class="fr-input-group">
                    <label for="password_confirmation" class="fr-label">Confirmer le mot de passe</label>
                    <input type="password" id="password_confirmation" name="password_confirmation" required
                           class="fr-input"
                           aria-required="true"
                           autocomplete="new-password">
                </div>

                <div class="bg-slate-50 p-4 border border-slate-200 text-[11px] text-slate-600 mb-6">
                    En cliquant sur "Créer mon compte", vous acceptez nos <a href="#" class="underline hover:text-[#000091]">Conditions Générales d'Utilisation</a> et confirmez avoir lu notre <a href="#" class="underline hover:text-[#000091]">Politique de Confidentialité</a> (RGPD).
                </div>

                <button type="submit" class="w-full py-4 bg-[#000091] text-white font-bold text-lg hover:bg-blue-800 shadow-md transition-all uppercase tracking-widest">
                    Créer mon compte
                </button>
            </form>

            <div class="mt-12 pt-8 border-t border-slate-100 text-center">
                <p class="text-slate-600 mb-4 font-medium">Vous avez déjà un compte ?</p>
                <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-8 py-3 border-2 border-[#000091] text-[#000091] font-bold hover:bg-blue-50 transition-all uppercase tracking-widest text-sm">
                    Se connecter
                </a>
            </div>
        </div>
    </main>

    @include('layouts.footer')
</body>
</html>
