{% set contact = this.getContact() %}
{% set legal_content_class = 'max-w-none text-[15px] leading-7 text-primary/75 [&_h2]:mt-8 [&_h2]:mb-3 [&_h2]:font-display [&_h2]:text-[26px] [&_h2]:leading-tight [&_h2]:font-semibold [&_h2]:text-primary [&_h3]:mt-6 [&_h3]:mb-3 [&_h3]:font-display [&_h3]:text-[22px] [&_h3]:font-semibold [&_h3]:text-primary [&_p]:my-4 [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-2 [&_strong]:font-semibold [&_strong]:text-primary [&_a]:text-secondary [&_a]:underline [&_a]:underline-offset-4' %}

<section {{ attributes.defaults({
    class: 'relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20',
    'data-legal-page': ''
}) }}>
    <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
    <div class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_62%)]"></div>

    <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
        <article class="mx-auto max-w-5xl">
            {% if contact %}
                <header class="mx-auto max-w-3xl text-center">
                    <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                        {{ this.titleKey|trans|striptags }}
                    </span>
                    <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                        {{ this.titleKey|trans|raw }}
                    </h1>
                    <p class="mx-auto mt-4 max-w-3xl text-[15px] leading-7 text-primary/72">
                        {{ this.introKey|trans|raw }}
                    </p>
                </header>

                <div class="mt-10 space-y-6 border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                    {% if this.legal %}
                        {% set legalNoticeContent = this.legalNoticeContent %}
                        <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                            {% if legalNoticeContent|trim is not empty %}
                                <div class="{{ legal_content_class }}">
                                    {{ legalNoticeContent|raw }}
                                </div>
                            {% else %}
                                <p class="text-[15px] leading-7 text-primary/72">{{ 'legal_pages.legal.empty'|trans }}</p>
                            {% endif %}
                        </section>

                        {% include '@components/legal/_agec.html.twig' with { contact: contact } only %}

                        <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                            <h2 class="font-display text-[26px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                {{ 'legal_pages.links.title'|trans }}
                            </h2>
                            <div class="mt-5 flex flex-col items-start gap-3 text-[15px] leading-7">
                                <a href="{{ path('private-policy') }}" title="{{ 'legal.button'|trans }}" class="text-secondary underline underline-offset-4 transition hover:text-primary">
                                    {{ 'legal.sections.personal_data.link'|trans }}
                                </a>
                                <a href="{{ path('cgv') }}" title="{{ 'cgv.button'|trans }}" class="text-secondary underline underline-offset-4 transition hover:text-primary">
                                    {{ 'legal_pages.links.cgv'|trans }}
                                </a>
                            </div>
                        </section>

                        {% if contact.legalNoticeExtraParagraph|trim is not empty %}
                            <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                                <p class="text-[15px] leading-7 text-primary/72">{{ contact.legalNoticeExtraParagraph|e|nl2br }}</p>
                            </section>
                        {% endif %}
                    {% elseif this.cgv %}
                        {% set cgvContent = this.cgvContent %}
                        <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                            <div class="{{ legal_content_class }}">
                                {% if cgvContent %}
                                    {{ cgvContent|raw }}
                                {% else %}
                                    <p>{{ 'legal_pages.cgv.empty'|trans }}</p>
                                {% endif %}
                            </div>
                        </section>

                        {% include '@components/legal/_agec.html.twig' with { contact: contact } only %}
                    {% elseif this.privacyPolicy %}
                        {% set privacyPolicyContent = this.privacyPolicyContent %}
                        <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                            {% if privacyPolicyContent|trim is not empty %}
                                <div class="{{ legal_content_class }}">
                                    {{ privacyPolicyContent|raw }}
                                </div>
                            {% else %}
                                <p class="text-[15px] leading-7 text-primary/72">{{ 'legal_pages.privacy_policy.empty'|trans }}</p>
                            {% endif %}
                        </section>

                        {% if contact.privacyPolicyExtraParagraph|trim is not empty %}
                            <section class="border border-primary/8 bg-white/70 p-5 md:p-7">
                                <p class="text-[15px] leading-7 text-primary/72">{{ contact.privacyPolicyExtraParagraph|e|nl2br }}</p>
                            </section>
                        {% endif %}
                    {% endif %}
                </div>
            {% else %}
                <div class="mx-auto max-w-3xl border border-primary/10 bg-surface-container-low p-7 text-center text-[15px] leading-7 text-primary/72">
                    {{ 'legal_pages.missing_contact'|trans }}
                </div>
            {% endif %}
        </article>
    </div>
</section>
