{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','contact']) }}{% endblock %}
{%- set pageTitle -%}<small class="fw-normal">Vous avez besoin de </small><br><b>visibilité à {{ park.name }}</b>{% endset %}
{%- block body -%}
    <section class="contact">
        <div class="container">
            <div class="contact-header mb-3 mb-lg-5 d-none d-md-block">
                <h1 class="contact-header-title h2 text-center">Vous avez besoin de visibilité à <b>{{ park.name }}</b> ?</h1>
            </div>
            <div class="row">
                <div class="col-12 order-2 order-md-1 mb-md-5">
                    <div class="contact-offers">
                        <div class="swiper offersSwiper" {{ stimulus_controller('swiper',{slidesPerView:1}) }} style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
                            <div class="swiper-wrapper">
                                {% for subscriptionLevel in subscriptionLevels %}
                                    {{ include('park/components/subscriptionLevel.html.twig',{subscriptionLevel:subscriptionLevel}) }}
                                {% endfor %}
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 order-1 order-md-2 mb-5 mb-md-0">
                    <div class="row gx-0">
                        <div class="col-lg-4 col-xl-3">
                            <div class="contact-infos">
                                <div class="contact-infos-header text-lg-center">
                                    <div class="row gx-2 align-items-md-center">
                                        <div class="col-3 col-lg-12">
                                            {% if gs.contactInfoLogo %}
                                                <div class="contact-infos-logo mx-auto mb-lg-3">
                                                    <figure class="mb-0 ratio ratio-1x1">
                                                        <img src="{{ asset(gs.contactInfoLogo)|imagine_filter('all') }}" class="contact-infos-logo-figure img-fluid object-fit-contain " alt="">
                                                    </figure>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="col-9 col-lg-12">
                                            <h2 class="contact-infos-title h4 mb-1 fw-bold">{{ gs.contactInfoTitle ?? 'Goéland Signalétique' }}</h2>
                                            <div class="contact-infos-category">{{ gs.contactInfoActivity ?? 'Bureau d\'étude - Signalétique' }}</div>
                                            {% set website = gs.contactInfoWebsite ?? 'goeland-signaletique.fr' %}
                                            <a href="https://{{ website }}" target="_blank" class="contact-infos-website">{{ website }}</a>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="contact-infos-address px-2">
                                    <div class="row">
                                        <div class="col-auto">
                                            {{ ux_icon('bi:geo-alt-fill', {class:'text-tertiary', 'aria-label': 'Business Address'}) }}
                                        </div>
                                        <div class="col">{{ gs.contactInfoAddress ?? 'La Victoria - 149 avenue Jean Dausset 84140 Montfavet' }}</div>
                                    </div>
                                </div>
                                <hr>
                                <div class="contact-infos-mail px-2">
                                    <div class="row">
                                        <div class="col-auto">
                                            {{ ux_icon('bi:envelope-at-fill', {class:'text-tertiary', 'aria-label': 'Business Address'}) }}
                                        </div>
                                        <div class="col">
                                            {% set mailto = gs.contactInfoEmail ?? 'contact@goeland-signaletique.fr' %}
                                            <a href="mailto:{{ mailto }}">{{ mailto }}</a>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="contact-infos-phone px-2 mb-3 mb-lg-0">
                                    <div class="row">
                                        <div class="col-auto">
                                            {{ ux_icon('bi:telephone-fill', {class:'text-tertiary', 'aria-label': 'Business Phone'}) }}
                                        </div>
                                        <div class="col">
                                            {% set phone = gs.contactInfoPhone ?? '04 90 84 67 09' %}
                                            <a href="tel:{{ phone|format_phone_int }}">{{ phone|format_phone_spaced }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-xl-9">
                            <div class="contact-form">{{ include('park/components/contactForm.default.html.twig',{form:contactForm}) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{%- endblock -%}