@php
    $title = 'Rejoindre le mouvement';
    $description = "Suivez le mouvement « On ne lâche rien ! » et, si vous le souhaitez, demandez votre adhésion à ATL — Les Amis de Tenge Litho.";
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-paper-dim py-14">
        <div class="container-page max-w-2xl">
            <p class="eyebrow">Mouvement « On ne lâche rien ! »</p>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">Rejoindre le mouvement</h1>
            <p class="mt-4 text-ink-600">
                Ce formulaire vous permet de suivre l'actualité de Te Litho Tenge Didier. Vous
                pouvez, si vous le souhaitez, demander en plus à rejoindre ATL — Les Amis de
                Tenge Litho, réseau de soutien qui accompagne son engagement.
            </p>
        </div>
    </section>

    <div class="container-page max-w-2xl py-16">
        @if (session('status') === 'created')
            <div class="mb-6 rounded-xl bg-congo-800/5 p-4 text-sm text-congo-900 ring-1 ring-inset ring-congo-800/20">
                Merci ! Votre inscription a bien été enregistrée. Un e-mail vient de vous être
                envoyé avec un lien de confirmation.
            </div>
        @elseif (session('status') === 'updated')
            <div class="mb-6 rounded-xl bg-congo-800/5 p-4 text-sm text-congo-900 ring-1 ring-inset ring-congo-800/20">
                Merci ! Vos informations étaient déjà enregistrées : nous les avons mises à jour
                avec ce que vous venez de nous transmettre. Un e-mail vient de vous être envoyé.
            </div>
        @endif

        <form method="POST" action="{{ route('rejoindre.store') }}" class="space-y-6">
            @csrf
            {{-- Piege anti-spam --}}
            <input type="text" name="website" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">

            <fieldset>
                <legend class="text-sm font-medium text-ink-700">Civilité</legend>
                <div class="mt-2 flex flex-wrap gap-4">
                    @foreach (['monsieur' => 'Monsieur', 'madame' => 'Madame', 'mademoiselle' => 'Mademoiselle'] as $val => $label)
                        <label class="flex items-center gap-2 text-sm">
                            <input type="radio" name="civility" value="{{ $val }}" required @checked(old('civility') === $val)>
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
                @error('civility')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
            </fieldset>

            <div>
                <label for="full_name" class="block text-sm font-medium text-ink-700">Nom complet</label>
                <input type="text" name="full_name" id="full_name" value="{{ old('full_name') }}" required
                       class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                @error('full_name')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
            </div>

            <div class="grid gap-5 sm:grid-cols-3">
                <div>
                    <label for="country" class="block text-sm font-medium text-ink-700">Pays</label>
                    <input type="text" name="country" id="country" value="{{ old('country', 'République démocratique du Congo') }}" required
                           class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                </div>
                <div>
                    <label for="city" class="block text-sm font-medium text-ink-700">Ville</label>
                    <input type="text" name="city" id="city" value="{{ old('city', 'Kinshasa') }}" required
                           class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                </div>
                <div>
                    <label for="commune" class="block text-sm font-medium text-ink-700">Commune (optionnel)</label>
                    <input type="text" name="commune" id="commune" value="{{ old('commune') }}"
                           class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                </div>
            </div>
            @error('country')<p class="text-xs text-accent-red">{{ $message }}</p>@enderror
            @error('city')<p class="text-xs text-accent-red">{{ $message }}</p>@enderror

            <div class="grid gap-5 sm:grid-cols-2">
                <div>
                    <label for="email" class="block text-sm font-medium text-ink-700">Adresse e-mail</label>
                    <input type="email" name="email" id="email" value="{{ old('email') }}" required
                           class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                    @error('email')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="whatsapp_number" class="block text-sm font-medium text-ink-700">Numéro WhatsApp</label>
                    <input type="tel" name="whatsapp_number" id="whatsapp_number" value="{{ old('whatsapp_number') }}" placeholder="+243 8xx xxx xxx" required
                           class="mt-1 w-full rounded-lg border border-ink-900/15 px-3 py-2.5 text-sm focus:border-congo-800 focus:outline-none">
                    @error('whatsapp_number')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
                </div>
            </div>

            <label class="flex items-start gap-3 rounded-xl bg-gold-100 p-4 text-sm text-congo-950">
                <input type="checkbox" name="atl_membership_requested" value="1" class="mt-1" @checked(old('atl_membership_requested'))>
                <picture class="mt-0.5 shrink-0">
                    <source srcset="/images/brand/atl-160.webp" type="image/webp">
                    <img src="/images/brand/atl-160.png" alt="ATL — Les Amis de Tenge Litho" width="32" height="32" loading="lazy" class="h-8 w-8 object-contain">
                </picture>
                <span>Je souhaite également demander mon adhésion à <strong>ATL — Les Amis de Tenge Litho</strong>.</span>
            </label>

            <div class="space-y-3 border-t border-ink-900/10 pt-5">
                <label class="flex items-start gap-3 text-sm text-ink-700">
                    <input type="checkbox" name="privacy_consent" value="1" required class="mt-1">
                    <span>
                        J'accepte que mes informations soient utilisées pour traiter ma demande et
                        me tenir informé des activités du mouvement, conformément à la
                        <a href="{{ route('legal.confidentialite') }}" class="text-congo-800 underline">politique de confidentialité</a>.
                    </span>
                </label>
                @error('privacy_consent')<p class="text-xs text-accent-red">{{ $message }}</p>@enderror

                <label class="flex items-start gap-3 text-sm text-ink-600">
                    <input type="checkbox" name="communication_consent" value="1" class="mt-1" @checked(old('communication_consent'))>
                    <span>J'accepte de recevoir des informations par e-mail et/ou WhatsApp (facultatif).</span>
                </label>
            </div>

            @error('form')<p class="text-sm text-accent-red">{{ $message }}</p>@enderror

            <button type="submit" class="btn-primary w-full sm:w-auto">Envoyer mon inscription</button>
        </form>
    </div>
</x-layout>