{# ====== CONTACT — Theme Corporate ====== #}
{# Layout: Bandeau titre, puis split — carte + infos a gauche, formulaire a droite #}

{# ====== BANDEAU TITRE ====== #}
<section class="corp-contact-hero">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-2">
            <ol class="breadcrumb breadcrumb-light">
                <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ title_page }}</li>
            </ol>
        </nav>
        <h1 class="corp-contact-hero__title">{{ title_page }}</h1>
        <p class="corp-contact-hero__desc">N'hesitez pas a nous contacter pour toute question ou demande de devis.</p>
    </div>
</section>

{# ====== CONTENU CONTACT ====== #}
<section class="corp-contact-content">
    <div class="container">
        <div class="row g-5">
            {# Colonne gauche : infos + carte #}
            <div class="col-lg-5">
                {# Infos de contact #}
                <div class="corp-contact-info">
                    <div class="corp-contact-info__portrait mb-4">
                        <img src="{{ site.aboutImage ? asset('documents/medias/' ~ site.aboutImage.fileName) : asset('images/placeholder.jpg') }}" alt="{{ site.name|default('') }}" loading="lazy"/>
                    </div>

                    <h3 class="corp-contact-info__name">{{ site.name|default('') }}</h3>

                    <ul class="corp-contact-info__list">
                        {% if site.phone %}
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
                            <a href="tel:{{ site.phone }}">{{ site.phone }}</a>
                        </li>
                        {% endif %}
                        {% if site.email %}
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
                            <a href="mailto:{{ site.email }}">{{ site.email }}</a>
                        </li>
                        {% endif %}
                        {% if site.address1 %}
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
                            <span>{{ site.address1 }}{% if site.address2 %}<br>{{ site.address2 }}{% endif %}<br>{{ site.postCode|default('') }} {{ site.town|default('') }}</span>
                        </li>
                        {% endif %}
                    </ul>
                </div>

                {# Carte Google Maps #}
                {% if site.googleMaps %}
                <div class="corp-contact-map">
                    <iframe src="{{ site.googleMaps }}" height="280" style="border:0; width:100%; border-radius: var(--radius);" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                {% endif %}
            </div>

            {# Colonne droite : formulaire #}
            <div class="col-lg-7">
                <div class="corp-contact-form">
                    <h2 class="corp-contact-form__title">Envoyez-nous un message</h2>
                    <p class="corp-contact-form__subtitle">Nous vous repondrons dans les plus brefs delais.</p>
                    {{ form_start(contactForm) }}
                        {{ form_widget(contactForm) }}
                        <button class="btn btn-primary btn-lg w-100 mt-3" type="submit">Envoyer le message</button>
                    {{ form_end(contactForm) }}
                </div>
            </div>
        </div>
    </div>
</section>