{#
 # ============================================================================
 # LEGAL LAYOUT — Sommaire sticky gauche + accordéon droit
 # ============================================================================
 #
 # Utilisé via {% embed %} dans les pages légales.
 # Paramètres passés par with {} :
 #   pageTitle   string  Titre de la page (h1)
 #   lastUpdate  string  Date de dernière mise à jour
 #   sections    array   [{id, title}] — pour le sommaire uniquement
 # Le contenu de l'accordéon est rendu dans {% block legal_content %}.
 #
 # sticky sur l'aside directement (pas sur un enfant interne) :
 #   - Au chargement, le TOC est à sa position naturelle sous le header gris
 #   - Au scroll, il se colle à top: 5.5rem (sous la navbar fixed ~64px)
 #   - self-start évite l'étirement (le TOC ne prend que la hauteur de son contenu)
 #   - L'inner div a overflow-y-auto pour les longs sommaires
 # ============================================================================
 #}

{# ── En-tête de page — pt-24 pour dégager la navbar fixed ── #}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 pt-32 sm:pt-36 pb-10 sm:pb-14">
        <p class="text-xs font-bold uppercase tracking-[.12em] text-primary mb-2">Bubul.app</p>
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 leading-tight">{{ pageTitle }}</h1>
        <p class="mt-2 text-sm text-gray-500">Dernière mise à jour : {{ lastUpdate }}</p>
    </div>
</div>

{# ── Corps principal ── #}
<div class="flex-1 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
        <div class="flex gap-10 xl:gap-14 items-start">

            {# ── Sommaire — sticky sur l'aside directement ──
               self-start empêche l'étirement sur toute la hauteur du contenu.
               top: 5.5rem = sous la navbar fixed (≈64px) + 24px de marge.
               L'inner div a overflow-y-auto pour les longs sommaires (25 sections). ── #}
            <aside class="hidden lg:block w-52 xl:w-60 shrink-0 sticky self-start"
                   style="top: 5.5rem;">
                <div class="overflow-y-auto" style="max-height: calc(100vh - 6.5rem);">
                    <p class="text-[10px] font-bold uppercase tracking-[.12em] text-gray-400 mb-3 px-1">Sommaire</p>
                    <nav class="flex flex-col gap-0.5" data-legal-toc>
                        {% for section in sections %}
                            <a href="#{{ section.id }}"
                               class="text-[13px] text-gray-500 hover:text-primary transition-colors duration-fast
                                      py-1.5 px-2 rounded-lg hover:bg-gray-50 leading-snug">
                                {{ section.title }}
                            </a>
                        {% endfor %}
                    </nav>
                </div>
            </aside>

            {# ── Contenu ── #}
            <div class="flex-1 min-w-0 flex flex-col gap-2">

                {# Sommaire mobile #}
                <div class="lg:hidden mb-4 border border-gray-200 rounded-xl overflow-hidden"
                     data-controller="shared--collapsible"
                     data-shared--collapsible-open-value="false">

                    <button type="button"
                            data-action="click->shared--collapsible#toggle"
                            class="w-full flex items-center justify-between gap-3 px-4 py-3 bg-gray-50 text-left">
                        <span class="text-xs font-bold uppercase tracking-[.1em] text-gray-500">Sommaire</span>
                        <svg data-shared--collapsible-target="icon"
                             class="w-4 h-4 text-gray-400 transition-transform duration-200"
                             viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                        </svg>
                    </button>

                    <div data-shared--collapsible-target="content">
                        <nav class="flex flex-col py-2 px-2" data-legal-toc>
                            {% for section in sections %}
                                <a href="#{{ section.id }}"
                                   class="text-sm text-gray-600 hover:text-primary transition-colors duration-fast
                                          py-1.5 px-2 rounded-lg hover:bg-gray-50">
                                    {{ section.title }}
                                </a>
                            {% endfor %}
                        </nav>
                    </div>
                </div>

                {# Sections accordéon — rendu par le template enfant via embed #}
                {% block legal_content %}{% endblock %}

            </div>
        </div>
    </div>
</div>

{# ── Script TOC : ouvre la section cible + scroll avec offset navbar ── #}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var NAV_OFFSET = 88; // px = 5.5rem (hauteur navbar fixed + marge)

    document.querySelectorAll('[data-legal-toc] a[href^="#"]').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();

            var id = this.getAttribute('href').slice(1);
            var section = document.getElementById(id);
            if (!section) return;

            // Ouvrir la section si son contenu est masqué (display:none = fermé)
            var content = section.querySelector('[data-shared--collapsible-target="content"]');
            if (content && content.style.display === 'none') {
                var btn = section.querySelector('[data-action*="shared--collapsible#toggle"]');
                if (btn) btn.click();
            }

            // Scroller après le début de l'animation d'ouverture
            setTimeout(function () {
                var top = section.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
                window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
            }, 50);
        });
    });
});
</script>

{% include '_organisms/landing/footer.html.twig' with {
    tagline: "Des outils IA pensés pour les formateurs — créez, déployez et pilotez vos formations depuis un seul espace."
} only %}