<footer class="w-full border-t border-primary/10 bg-surface-container-low py-10 md:py-12">
    <div class="mx-auto grid max-w-[1440px] grid-cols-2 gap-6 px-4 md:grid-cols-12 md:px-16">
        {% block footer_brand %}
            <div class="col-span-2 mb-8 md:col-span-4 md:mb-0">
                <twig:theme:BrandLogo
                    class="mb-6 h-24 w-auto md:h-28"
                    imageClass="h-full w-auto object-contain"
                />
            </div>
        {% endblock %}

        {% block footer_navigation %}
            <div class="col-span-1 space-y-4 md:col-span-2">
                <h6 class="font-label text-[12px] uppercase tracking-[0.18em] text-primary">{{ 'theme.footer.explore'|trans }}</h6>
                <ul class="space-y-2 text-on-surface-variant">
                    <li><a href="{{ path('home') }}" class="transition-colors hover:text-secondary">{{ 'theme.nav.history'|trans }}</a></li>
                    <li><a href="{{ path('shop') }}" class="transition-colors hover:text-secondary">{{ 'theme.nav.shop'|trans }}</a></li>
                    <li><a href="{{ path('find-us') }}" class="transition-colors hover:text-secondary">{{ 'theme.nav.find_us'|trans }}</a></li>
                </ul>
            </div>

            <div class="col-span-1 space-y-4 md:col-span-2">
                <h6 class="font-label text-[12px] uppercase tracking-[0.18em] text-primary">{{ 'theme.footer.information'|trans }}</h6>
                <ul class="space-y-2 text-on-surface-variant">
                    <li><a href="{{ path('contact') }}" class="transition-colors hover:text-secondary">{{ 'theme.nav.contact'|trans }}</a></li>
                    <li><a href="{{ path('private-policy') }}" class="transition-colors hover:text-secondary">{{ 'theme.footer.privacy'|trans }}</a></li>
                    <li><a href="{{ path('cgv') }}" class="transition-colors hover:text-secondary">{{ 'theme.footer.cgv'|trans }}</a></li>
                </ul>
            </div>
        {% endblock %}

        {% block footer_actions %}
            <div class="col-span-2 flex items-center gap-4 md:col-span-4 md:justify-end">
                {{ include('partials/_language_switcher.html.twig', {
                    attributes: 'class="inline-flex h-12 min-w-12 items-center justify-center border border-primary/20 px-3 font-label text-[12px] font-semibold tracking-[0.14em] text-primary transition-all hover:bg-primary hover:text-white"'
                }) }}
                <a href="{{ path('contact') }}" class="inline-flex 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.nav.contact'|trans }}
                </a>
                <a href="{{ 'theme.social.instagram_url'|trans }}" target="_blank" rel="noreferrer noopener" aria-label="{{ 'theme.social.instagram_label'|trans }}" class="flex h-12 w-12 items-center justify-center border border-primary/20 text-primary transition-all hover:bg-primary hover:text-white">
                    <svg aria-hidden="true" class="h-[18px] w-[18px] fill-current" viewBox="0 0 24 24">
                        <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5a4.25 4.25 0 0 0 4.25 4.25h8.5a4.25 4.25 0 0 0 4.25-4.25v-8.5a4.25 4.25 0 0 0-4.25-4.25h-8.5Zm8.87 1.13a1.12 1.12 0 1 1 0 2.24 1.12 1.12 0 0 1 0-2.24ZM12 6.5A5.5 5.5 0 1 1 6.5 12 5.5 5.5 0 0 1 12 6.5Zm0 1.5A4 4 0 1 0 16 12a4 4 0 0 0-4-4Z"></path>
                    </svg>
                </a>
            </div>
        {% endblock %}
    </div>

    {% block footer_legal %}
        <div class="mx-auto mt-16 flex max-w-[1440px] flex-col items-center justify-between gap-4 border-t border-primary/5 px-4 pt-6 md:mt-20 md:flex-row md:px-16 md:pt-8">
            <span class="text-[12px] text-on-surface-variant">{{ 'theme.footer.copyright'|trans }}</span>
            <div class="flex flex-wrap justify-center gap-6 md:justify-end">
                <a href="{{ path('private-policy') }}" class="text-[12px] text-on-surface-variant transition-colors hover:text-primary">{{ 'theme.footer.privacy'|trans }}</a>
                <a href="{{ path('legals') }}" class="text-[12px] text-on-surface-variant transition-colors hover:text-primary">{{ 'theme.footer.legals'|trans }}</a>
                <a href="{{ path('cgv') }}" class="text-[12px] text-on-surface-variant transition-colors hover:text-primary">{{ 'theme.footer.cgv'|trans }}</a>
                <a href="{{ path('shop_withdrawal') }}" class="text-[12px] text-on-surface-variant transition-colors hover:text-primary">{{ 'withdrawal.access_link'|trans }}</a>
            </div>
        </div>
    {% endblock %}
</footer>
