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

{% block title %}Contact — Collège Notre‑Dame{% endblock %}

{% block body %}
    <!-- HÉRO CONTACT -->
    <section class="story-hero scroll-reveal">
        <div class="story-container">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="title-line">Nous</span>
                    <span class="title-line">Contacter</span>
                </h1>
                <p class="hero-subtitle">Une question ? Un renseignement ? Nous sommes à votre écoute.</p>
            </div>
        </div>
    </section>

    <!-- SECTION CONTACT PRINCIPALE -->
    <section class="story-chapter chapter-1 scroll-reveal">
        <div class="story-container">
            <div class="chapter-content">
                <div class="chapter-header">
                    <div class="chapter-number">01</div>
                    <h2 class="chapter-title">Coordonnées</h2>
                </div>
                <div class="chapter-text">
                    <div class="contact-grid-inscription">
                        <div class="contact-card-large">
                            <div class="contact-icon-large">📞</div>
                            <h3 class="contact-title-large">Téléphone</h3>
                            <p class="contact-info-large">03 28 22 21 25</p>
                        </div>

                        <div class="contact-card-large">
                            <div class="contact-icon-large">✉️</div>
                            <h3 class="contact-title-large">Email</h3>
                            <p class="contact-info-large">contact@notredamebourbourg.fr</p>
                        </div>

                        <div class="contact-card-large">
                            <div class="contact-icon-large">📍</div>
                            <h3 class="contact-title-large">Adresse</h3>
                            <p class="contact-info-large">15 Rue Abbé Brasseur<br>59630 Bourbourg</p>
                        </div>

                        <div class="contact-card-large">
                            <div class="contact-icon-large">🕒</div>
                            <h3 class="contact-title-large">Horaires</h3>
                            <p class="contact-info-large">Lundi, Mardi, Jeudi et Vendredi : 7h30 à 18h30<br>Mercredi : 7h30 à 12h30</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION FORMULAIRE -->
    <section class="story-chapter chapter-2 scroll-reveal">
        <div class="story-container">
            <div class="chapter-content">
                <div class="chapter-header">
                    <div class="chapter-number">02</div>
                    <h2 class="chapter-title">Envoyez-nous un message</h2>
                </div>
                <div class="chapter-text">
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('error') %}
                        <div class="alert alert-error">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {{ form_start(contactForm, {'attr': {'class': 'contact-form'}}) }}
                        <div class="contact-grid">
                            {{ form_widget(contactForm.nom) }}
                            {{ form_widget(contactForm.email) }}
                        </div>
                        {{ form_widget(contactForm.sujet) }}
                        {{ form_widget(contactForm.message) }}

                        <div class="form-errors">
                            {{ form_errors(contactForm.nom) }}
                            {{ form_errors(contactForm.email) }}
                            {{ form_errors(contactForm.sujet) }}
                            {{ form_errors(contactForm.message) }}
                        </div>

                        <button class="cta-button primary" type="submit">Envoyer</button>
                    {{ form_end(contactForm) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}