{% set contact = this.contact %}

<div {{ attributes.defaults({ class: 'border-t border-border-muted bg-surface text-foreground' }) }}>
    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 sm:py-12 lg:px-8">
        <div class="grid gap-8 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
            <div class="max-w-xl">
                {% if contact %}
                    {% if contact.company %}
                        <p class="font-serif text-2xl text-foreground">{{ contact.company }}</p>
                    {% endif %}

                    {% if contact.address or contact.postal or contact.city %}
                        <address class="mt-3 text-sm not-italic leading-6 text-foreground/70">
                            {% if contact.address %}{{ contact.address }}<br>{% endif %}
                            {{ contact.postal }} {{ contact.city }}
                        </address>
                    {% endif %}

                    {% if contact.phone1 or contact.emailFrom %}
                        <div class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-sm">
                            {% if contact.phone1 %}
                                <a href="tel:{{ contact.phone1 }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                                    {{ contact.phone1 }}
                                </a>
                            {% endif %}
                            {% if contact.emailFrom %}
                                <a href="mailto:{{ contact.emailFrom }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                                    {{ contact.emailFrom }}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endif %}
            </div>

            <nav aria-label="{{ 'legal_pages.links.title'|trans }}" class="flex flex-col items-start gap-3 text-sm md:items-end">
                <a href="{{ path('legals') }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                    {{ 'legals.title'|trans }}
                </a>
                <a href="{{ path('private-policy') }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                    {{ 'privacy_policy.title'|trans }}
                </a>
                <a href="{{ path('cgv') }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                    {{ 'cgv.title'|trans }}
                </a>
                <a href="{{ path('shop_withdrawal') }}" class="text-foreground/80 underline-offset-4 transition hover:text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent">
                    {{ 'withdrawal.access_link'|trans }}
                </a>
            </nav>
        </div>

        <div class="mt-8 border-t border-border-muted pt-6 text-xs text-foreground/60">
            <p>&copy; {{ 'now'|date('Y') }}{% if contact and contact.company %} {{ contact.company }}{% endif %}</p>
        </div>
    </div>
</div>
