{# ====== CONTACT — Theme Vitrine ====== #}
{# Layout: Simple, formulaire centre, infos en dessous en row #}

<div class="container">
    <nav aria-label="breadcrumb" class="my-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item active">{{ title_page }}</li>
        </ol>
    </nav>

    <div class="vit-contact">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1 class="vit-contact__title text-center">{{ title_page }}</h1>
                <p class="vit-contact__desc text-center">Une question, un projet ? Ecrivez-nous et nous vous repondrons rapidement.</p>

                <div class="vit-contact__form">
                    {{ form_start(contactForm) }}
                        {{ form_widget(contactForm) }}
                        <div class="text-center">
                            <button class="btn btn-primary btn-lg mt-3" type="submit">Envoyer le message</button>
                        </div>
                    {{ form_end(contactForm) }}
                </div>
            </div>
        </div>

        {# Infos contact en cards horizontales #}
        <div class="row g-4 mt-5 justify-content-center">
            {% if site.phone %}
            <div class="col-md-4">
                <div class="vit-contact-card text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    <h3 class="vit-contact-card__title">Telephone</h3>
                    <a href="tel:{{ site.phone }}">{{ site.phone }}</a>
                </div>
            </div>
            {% endif %}
            {% if site.email %}
            <div class="col-md-4">
                <div class="vit-contact-card text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    <h3 class="vit-contact-card__title">Email</h3>
                    <a href="mailto:{{ site.email }}">{{ site.email }}</a>
                </div>
            </div>
            {% endif %}
            {% if site.address1 %}
            <div class="col-md-4">
                <div class="vit-contact-card text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    <h3 class="vit-contact-card__title">Adresse</h3>
                    <span>{{ site.address1 }}, {{ site.postCode|default('') }} {{ site.town|default('') }}</span>
                </div>
            </div>
            {% endif %}
        </div>

        {% if site.googleMaps %}
        <div class="mt-5">
            <iframe src="{{ site.googleMaps }}" height="300" style="border:0; width:100%; border-radius: var(--radius);" allowfullscreen="" loading="lazy"></iframe>
        </div>
        {% endif %}
    </div>
</div>