{% set mapPayload = this.mapPayload %}
{% set depots = this.depots %}
{% set frenchDepots = depots|filter(depot => depot.country == 'FR') %}
{% set internationalDepots = depots|filter(depot => depot.country != 'FR') %}
{% set houseMarker = {
    id: 'bandock-house',
    title: 'theme.contact.domain.title'|trans,
    name: 'theme.contact.domain.title'|trans,
    address: 'theme.contact.domain.address_1'|trans,
    postal: '51150',
    city: 'Bouzy',
    country: 'theme.depot.country_france'|trans,
    lat: 49.0803,
    lng: 4.1478,
    phone: 'theme.contact.domain.phone_label'|trans,
    category: null
} %}
{% set hasHouseMarker = mapPayload.markers|filter(marker => (marker.city|default('')|lower) == 'bouzy' or ('bandock' in (marker.name|default('')|lower)))|length > 0 %}
{% set mapMarkers = hasHouseMarker ? mapPayload.markers : mapPayload.markers|merge([houseMarker]) %}

<div {{ attributes.defaults({ class: 'space-y-8' }) }}>
    <div class="mx-auto max-w-4xl text-center">
        <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.depot.locator.kicker'|trans }}</span>
        <h2 class="font-display text-[32px] font-semibold leading-none [font-optical-sizing:auto] text-primary md:text-[40px]">{{ 'theme.depot.locator.title'|trans }}</h2>
    </div>

    <div class="grid items-stretch gap-8 lg:grid-cols-[minmax(0,1.25fr)_minmax(22rem,0.75fr)]">
        <div class="min-w-0 overflow-hidden border border-primary/10 bg-white shadow-sm">
            <div data-live-ignore class="relative h-full min-h-[28rem] lg:min-h-[58rem]">
                <div
                    class="h-full min-h-[28rem] w-full lg:min-h-[58rem]"
                    data-controller="depot-map"
                    data-depot-map-locator-id-value="{{ locatorId }}"
                    data-depot-map-markers-value="{{ mapMarkers|json_encode|e('html_attr') }}"
                    data-depot-map-center-value="[46.6, 2.3]"
                    data-depot-map-zoom-value="6"
                    {% if selectedDepotId %}
                        data-depot-map-selected-depot-id-value="{{ selectedDepotId }}"
                    {% endif %}
                    data-depot-map-fit-on-connect-value="false"
                    data-depot-map-fit-on-update-value="false"
                ></div>
            </div>
        </div>

        <aside class="grid min-w-0 gap-8 lg:auto-rows-fr">
            <article class="flex min-h-[16rem] min-w-0 flex-col overflow-hidden border border-primary bg-primary p-6 text-white shadow-sm md:p-8 lg:overflow-visible">
                <span class="mb-4 block shrink-0 font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-primary-fixed">{{ 'theme.depot.practical.house'|trans }}</span>
                <h3 class="mb-5 shrink-0 font-display text-[24px] font-semibold leading-tight [font-optical-sizing:auto] md:text-[28px]">{{ 'theme.contact.domain.title'|trans }}</h3>
                <div class="min-h-0 flex-1 space-y-2 overflow-y-auto pr-2 text-[18px] leading-8 text-white/88 lg:overflow-visible lg:pr-0">
                    <p>{{ 'theme.contact.domain.address_1'|trans }}</p>
                    <p>{{ 'theme.contact.domain.address_2'|trans }}</p>
                    <p>
                        <a href="tel:{{ 'theme.contact.domain.phone_digits'|trans }}" class="transition-colors hover:text-white">
                            {{ 'theme.contact.domain.phone_label'|trans }}
                        </a>
                    </p>
                    <p class="pt-2 text-base leading-8 text-white/78">{{ 'theme.depot.intro.text'|trans }}</p>
                </div>
            </article>

            {% if depots is not empty %}
                <article class="flex min-h-[16rem] min-w-0 flex-col overflow-hidden border border-primary/10 bg-white p-6 shadow-sm md:p-8 lg:overflow-visible">
                    <span class="mb-4 block shrink-0 font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.depot.travel.kicker'|trans }}</span>
                    <h3 class="mb-5 shrink-0 font-display text-[24px] font-semibold leading-tight [font-optical-sizing:auto] text-primary md:text-[28px]">{{ 'theme.depot.travel.title'|trans }}</h3>
                    <div class="min-h-0 flex-1 space-y-4 overflow-y-auto pr-2 text-[18px] leading-8 text-on-surface-variant lg:overflow-visible lg:pr-0">
                        {% for stop in ['quimper', 'touquet', 'neuville'] %}
                            <p><span class="font-semibold text-primary">{{ ('theme.depot.travel.' ~ stop ~ '.city')|trans }}</span> {{ ('theme.depot.travel.' ~ stop ~ '.dates')|trans }}</p>
                        {% endfor %}
                        <p class="pt-2 text-base leading-8 text-on-surface-variant/80">{{ 'theme.depot.travel.note'|trans }}</p>
                    </div>
                </article>
            {% endif %}

            <article class="flex min-h-[16rem] min-w-0 flex-col overflow-hidden border border-primary/10 bg-white p-6 shadow-sm md:p-8 lg:overflow-visible">
                <h3 class="mb-5 shrink-0 font-display text-[24px] font-semibold leading-tight [font-optical-sizing:auto] text-primary md:text-[28px]">{{ 'theme.depot.practical.title'|trans }}</h3>
                <div class="min-h-0 flex-1 overflow-y-auto pr-2 lg:overflow-visible lg:pr-0">
                    <p class="text-[18px] leading-8 text-on-surface-variant">{{ 'theme.depot.practical.text'|trans }}</p>
                </div>
                <a href="{{ 'theme.depot.map_url'|trans }}" target="_blank" rel="noopener noreferrer" class="mt-8 inline-flex shrink-0 items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-secondary">
                    {{ 'theme.depot.practical.cta_map'|trans }}
                </a>
            </article>
        </aside>
    </div>

    {% if frenchDepots is not empty or internationalDepots is not empty %}
        <div class="grid gap-8 {% if frenchDepots is not empty and internationalDepots is not empty %}lg:grid-cols-2{% endif %}">
            {% if internationalDepots is not empty %}
                <article class="flex min-h-[22rem] min-w-0 flex-col overflow-hidden border border-primary/10 bg-white p-6 shadow-sm md:p-8 lg:overflow-visible">
                    <span class="mb-4 block shrink-0 font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.depot.international.kicker'|trans }}</span>
                    <h3 class="mb-8 shrink-0 font-display text-[24px] font-semibold leading-tight [font-optical-sizing:auto] text-primary md:text-[28px]">{{ 'theme.depot.international.title'|trans }}</h3>
                    <div class="min-h-0 flex-1 space-y-8 overflow-y-auto pr-2 text-on-surface-variant lg:overflow-visible lg:pr-0">
                        {% for depot in internationalDepots %}
                            <div>
                                <p class="text-[18px] font-semibold leading-8 text-primary">{{ depot.countryName ?: depot.country }}</p>
                                <p class="text-[18px] leading-8">{{ depot.name ?: depot.city }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </article>
            {% endif %}

            {% if frenchDepots is not empty %}
                <article class="flex min-h-[22rem] min-w-0 flex-col overflow-hidden border border-primary/10 bg-white p-6 shadow-sm md:p-8 lg:overflow-visible">
                    <span class="mb-4 block shrink-0 font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.depot.france.kicker'|trans }}</span>
                    <h3 class="mb-8 shrink-0 font-display text-[24px] font-semibold leading-tight [font-optical-sizing:auto] text-primary md:text-[28px]">{{ 'theme.depot.france.title'|trans }}</h3>
                    <div class="min-h-0 flex-1 space-y-8 overflow-y-auto pr-2 text-on-surface-variant lg:overflow-visible lg:pr-0">
                        {% for depot in frenchDepots %}
                            <div>
                                <p class="text-[18px] font-semibold leading-8 text-primary">{{ depot.name ?: depot.city }}</p>
                                <p class="text-[18px] leading-8">
                                    {% if depot.address %}{{ depot.address }} - {% endif %}{{ depot.postal }} {{ depot.city }}
                                </p>
                            </div>
                        {% endfor %}
                    </div>
                </article>
            {% endif %}
        </div>
    {% endif %}
</div>
