{# ====== CONTACT — Theme Moderne ====== #}
{# Layout: Dark, gradient header, formulaire avec glow border #}

<section class="mod-contact-hero">
    <div class="mod-contact-hero__glow"></div>
    <div class="container position-relative">
        <nav aria-label="breadcrumb" class="mb-2">
            <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>
        <h1 class="mod-contact-hero__title">{{ title_page }}</h1>
        <p class="mod-contact-hero__desc">Parlons de votre projet.</p>
    </div>
</section>

<section class="mod-contact-body">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-7">
                <div class="mod-contact-form">
                    {{ form_start(contactForm) }}
                        {{ form_widget(contactForm) }}
                        <button class="btn mod-btn-gradient btn-lg w-100 mt-3" type="submit">Envoyer</button>
                    {{ form_end(contactForm) }}
                </div>
            </div>
            <div class="col-lg-5">
                <div class="mod-contact-portrait mb-4">
                    <img src="{{ site.aboutImage ? asset('documents/medias/' ~ site.aboutImage.fileName) : asset('images/placeholder.jpg') }}" alt="{{ site.name|default('') }}" loading="lazy"/>
                </div>

                <div class="mod-contact-info">
                    <h3>{{ site.name|default('') }}</h3>
                    {% if site.email %}
                    <div class="mod-contact-info__item">
                        <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>
                    </div>
                    {% endif %}
                    {% if site.phone %}
                    <div class="mod-contact-info__item">
                        <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>
                    </div>
                    {% endif %}
                    {% if site.address1 %}
                    <div class="mod-contact-info__item">
                        <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 }}, {{ site.postCode|default('') }} {{ site.town|default('') }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>