{% extends 'base.html.twig' %}
{% block title %}Nous contacter — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Contactez l'équipe de la plateforme dédiée à Serigne Sam Mbaye : partagez une conférence, signalez une erreur ou envoyez un témoignage.{% endblock %}
{% block body %}
    <section class="mx-auto max-w-xl px-4 py-14">
        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-gold-400">Contact</p>
        <h1 class="rule-gold mt-2 font-display text-3xl font-semibold">Nous contacter</h1>
        <p class="mt-3 leading-relaxed text-sand">
            Vous avez une conférence inédite à partager, une erreur à signaler, un témoignage sur l'enseignement de Serigne Sam Mbaye ou simplement une question ? Écrivez-nous ci-dessous, nous vous répondrons dans les meilleurs délais.
        </p>

        {% for message in app.flashes('success') %}
            <div class="mt-6 rounded-lg border border-gold-400/30 bg-gold-400/10 px-4 py-3 text-sm text-gold-300">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="mt-6 rounded-lg border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-300">
                {{ message }}
            </div>
        {% endfor %}

        <form method="post" class="card mt-8 space-y-5 p-6">
            <input type="hidden" name="_token" value="{{ csrf_token('contact') }}">

            <div>
                <label class="label" for="c-name">Votre nom complet</label>
                <input class="field" id="c-name" name="name" autocomplete="name" required maxlength="120" placeholder="Ex. Fatou Diop">
            </div>

            <div>
                <label class="label" for="c-email">Votre email</label>
                <input class="field" id="c-email" type="email" name="email" autocomplete="email" required placeholder="vous@exemple.com">
                <p class="mt-1 text-xs text-sand-dim">Nous ne l'utiliserons que pour vous répondre.</p>
            </div>

            <div>
                <label class="label" for="c-subject">Objet</label>
                <select class="field" id="c-subject" name="subject">
                    <option value="conference">Partager une conférence</option>
                    <option value="correction">Signaler une erreur</option>
                    <option value="temoignage">Témoignage</option>
                    <option value="autre">Autre</option>
                </select>
            </div>

            <div>
                <label class="label" for="c-msg">Votre message</label>
                <textarea class="field min-h-36" id="c-msg" name="message" required maxlength="2000" placeholder="Écrivez votre message ici..."></textarea>
                <p class="mt-1 text-xs text-sand-dim">2000 caractères maximum.</p>
            </div>

            <button class="btn-gold w-full" type="submit">Envoyer le message</button>
        </form>

        <p class="mt-8 text-center text-sm text-sand-dim">
            Vous préférez un autre canal ? Retrouvez-nous aussi sur nos réseaux sociaux, liés en pied de page.
        </p>
    </section>
{% endblock %}