{% extends 'base.html.twig' %}

{% block title %}Contact - DogSchool Lille{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="bg-primary text-white py-5 text-center">
    <div class="container">
        <h1 class="display-4 fw-bold">Contactez-nous</h1>
        <p class="lead">Nous sommes là pour répondre à toutes vos questions sur l’éducation canine à Lille et dans le Nord.</p>
    </div>
</section>

<!-- Formulaire de contact + infos -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="row gy-5">
            <!-- Formulaire -->
            <div class="col-lg-6">
                <h2 class="h3 fw-bold mb-4">Envoyez-nous un message</h2>
                {{ form_start(contactForm) }}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            {{ form_label(contactForm.name) }}
                            {{ form_widget(contactForm.name, { attr: { class: 'form-control' } }) }}
                            {{ form_errors(contactForm.name) }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form_label(contactForm.email) }}
                            {{ form_widget(contactForm.email, { attr: { class: 'form-control' } }) }}
                            {{ form_errors(contactForm.email) }}
                        </div>
                    </div>

                    <div class="mb-3">
                        {{ form_label(contactForm.subject) }}
                        {{ form_widget(contactForm.subject, { attr: { class: 'form-select' } }) }}
                        {{ form_errors(contactForm.subject) }}
                    </div>

                    <div class="mb-3">
                        {{ form_label(contactForm.message) }}
                        {{ form_widget(contactForm.message, { attr: { class: 'form-control', rows: 5 } }) }}
                        {{ form_errors(contactForm.message) }}
                    </div>

                    <div class="form-check mb-3">
                        {{ form_widget(contactForm.privacy, { attr: { class: 'form-check-input' } }) }}
                        {{ form_label(contactForm.privacy, 'J’accepte la politique de confidentialité.', { label_attr: { class: 'form-check-label' } }) }}
                        {{ form_errors(contactForm.privacy) }}
                    </div>

                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-paper-plane me-2"></i>Envoyer
                    </button>
                {{ form_end(contactForm) }}
            </div>

            <!-- Infos de contact -->
            <div class="col-lg-6">
                <h2 class="h3 fw-bold mb-4">Nos coordonnées</h2>
                <ul class="list-unstyled">
                    <li class="mb-4 d-flex">
                        <i class="fas fa-map-marker-alt fa-lg text-primary me-3 mt-1"></i>
                        <div>
                            <h5 class="mb-1">Adresse</h5>
                            <p class="mb-0">123 Rue du Dressage, 59000 Lille, France</p>
                        </div>
                    </li>
                    <li class="mb-4 d-flex">
                        <i class="fas fa-phone fa-lg text-primary me-3 mt-1"></i>
                        <div>
                            <h5 class="mb-1">Téléphone</h5>
                            <a href="tel:0123456789" class="text-decoration-none text-dark">01 23 45 67 89</a>
                        </div>
                    </li>
                    <li class="mb-4 d-flex">
                        <i class="fas fa-envelope fa-lg text-primary me-3 mt-1"></i>
                        <div>
                            <h5 class="mb-1">Email</h5>
                            <a href="mailto:contact@dogschool.fr" class="text-decoration-none text-dark">contact@dogschool.fr</a>
                        </div>
                    </li>
                    <li class="mb-4 d-flex">
                        <i class="fas fa-clock fa-lg text-primary me-3 mt-1"></i>
                        <div>
                            <h5 class="mb-1">Horaires</h5>
                            <p class="mb-0">Lun-Ven : 9h - 19h<br>Sam : 9h - 17h<br>Dim : 10h - 16h</p>
                        </div>
                    </li>
                </ul>
                <div class="bg-light rounded text-center p-4">
                    <i class="fas fa-map fa-2x text-muted mb-2"></i>
                    <p class="mb-1">Carte interactive à venir</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="h3 fw-bold text-center mb-5">Questions Fréquentes</h2>
        <div class="accordion" id="faqAccordion">
            {% for question in [
                { q: 'Comment prendre rendez-vous ?', a: 'Par téléphone, mail ou formulaire. Réponse sous 24h.' },
                { q: 'Quels sont les tarifs ?', a: 'Consultez notre page Services ou demandez un devis personnalisé.' },
                { q: 'Que faut-il pour le premier cours ?', a: 'Une laisse, un collier, et des friandises suffisent.' },
                { q: 'Faites-vous des cours à domicile ?', a: 'Oui, avec un supplément. Contactez-nous pour plus d’infos.' }
            ] %}
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ loop.index }}">
                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}">
                        {{ question.q }}
                    </button>
                </h2>
                <div id="collapse{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        {{ question.a }}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-5 bg-primary text-white text-center">
    <div class="container">
        <h2 class="h3 fw-bold">Prêt à démarrer l’éducation de votre chien ?</h2>
        <p class="mb-4">Contactez-nous dès maintenant pour une évaluation gratuite !</p>
        <a href="tel:0123456789" class="btn btn-light me-2"><i class="fas fa-phone me-1"></i> Appeler</a>
        {# <a href="{{ path('app_register') }}" class="btn btn-outline-light"><i class="fas fa-user-plus me-1"></i> Créer un compte</a> #}
    </div>
</section>
{% endblock %}