@php
    $title = 'Contact';
    $description = "Contacter l'équipe institutionnelle de Te Litho Tenge Didier.";
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-paper-dim py-14">
        <div class="container-page">
            <p class="eyebrow">Contact institutionnel</p>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">Nous contacter</h1>
            <p class="mt-3 max-w-2xl text-ink-600">Pour toute question institutionnelle, média ou de terrain.</p>
        </div>
    </section>

    <div class="container-page grid gap-12 py-16 lg:grid-cols-12">
        <div class="lg:col-span-7">
            @if(session('status') === 'sent')
                <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">
                    Votre message a bien été envoyé. Merci de votre confiance.
                </div>
            @endif

            <form method="POST" action="{{ route('contact.store') }}" class="space-y-5">
                @csrf
                {{-- Piege anti-spam, laisse vide par les humains --}}
                <input type="text" name="website" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="name" class="block text-sm font-medium text-ink-700">Nom complet</label>
                        <input type="text" name="name" id="name" value="{{ old('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('name')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-ink-700">Email</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>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="phone" class="block text-sm font-medium text-ink-700">Téléphone (facultatif)</label>
                        <input type="tel" name="phone" id="phone" value="{{ old('phone') }}"
                               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="subject" class="block text-sm font-medium text-ink-700">Sujet</label>
                        <input type="text" name="subject" id="subject" value="{{ old('subject') }}"
                               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>

                <div>
                    <label for="message" class="block text-sm font-medium text-ink-700">Message</label>
                    <textarea name="message" id="message" rows="6" 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">{{ old('message') }}</textarea>
                    @error('message')<p class="mt-1 text-xs text-accent-red">{{ $message }}</p>@enderror
                </div>

                <label class="flex items-start gap-2.5 text-sm text-ink-600">
                    <input type="checkbox" name="consent" value="1" required class="mt-1">
                    <span>J'accepte que les informations transmises via ce formulaire soient utilisées pour traiter ma demande, conformément à la <a href="{{ route('legal.confidentialite') }}" class="underline hover:text-congo-800">politique de confidentialité</a>.</span>
                </label>
                @error('message')@enderror

                <button type="submit" class="btn-primary">Envoyer le message</button>
            </form>
        </div>

        <div class="space-y-6 lg:col-span-5">
            <div class="rounded-2xl border border-ink-900/10 bg-white/60 p-7">
                <p class="eyebrow">Coordonnées</p>
                <ul class="mt-4 space-y-3 text-sm text-ink-700">
                    <li class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-4 w-4 text-gold-600"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        contact@telithotenge.com
                    </li>
                    <li class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-4 w-4 text-gold-600"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        0800 123 4567
                    </li>
                    <li class="text-xs text-ink-400">Coordonnées reprises du site officiel telithotenge.cd — à confirmer auprès de l'équipe pour toute urgence.</li>
                </ul>
            </div>

            <div class="rounded-2xl border border-ink-900/10 bg-white/60 p-7">
                <p class="eyebrow">Réseaux sociaux</p>
                <ul class="mt-4 space-y-2 text-sm">
                    <li><a href="https://www.facebook.com/tengedidier.telitho" target="_blank" rel="noopener noreferrer" class="text-congo-800 hover:underline">Facebook</a></li>
                    <li><a href="https://x.com/Didiertenge1" target="_blank" rel="noopener noreferrer" class="text-congo-800 hover:underline">X (Twitter)</a></li>
                    <li><a href="https://www.youtube.com/@telithotenge73" target="_blank" rel="noopener noreferrer" class="text-congo-800 hover:underline">YouTube</a></li>
                </ul>
            </div>
        </div>
    </div>
</x-layout>