{% set profile = site.profile %}
{% set notice = profile ? profile.activeNotice : null %}

{% if notice %}
    <div class="bg-surface-olive px-4 py-2 text-center font-sans text-sm text-white">{{ notice }}</div>
{% endif %}

<header class="sticky top-0 z-40 border-b border-line bg-surface/95 backdrop-blur">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-3 sm:px-6 lg:px-8">
        {{ include('_partials/marque.html.twig') }}

        <nav class="hidden lg:flex items-center gap-1" aria-label="Navigation principale">
            {% set links = [
                { route: 'home', label: 'Accueil' },
                { route: 'nursery_index', label: 'La pépinière' },
            ] %}
            {% for link in links %}
                <a href="{{ path(link.route) }}"
                   class="rounded-full px-4 py-2 font-serif text-[1.02rem] text-body transition hover:text-brand-ink {{ app.request.attributes.get('_route') == link.route ? 'text-brand-ink underline decoration-brand decoration-2 underline-offset-8' : '' }}">
                    {{ link.label }}
                </a>
            {% endfor %}

            {# Le méga-menu tient en CSS : `group-hover` pour la souris,
               `focus-within` pour le clavier. Aucun script n'est nécessaire, et
               une navigation au clavier ne dépend donc de rien. #}
            <div class="group relative">
                <a href="{{ path('plant_index') }}"
                   class="flex items-center gap-1.5 rounded-full px-4 py-2 font-serif text-[1.02rem] text-body transition hover:text-brand-ink group-focus-within:text-brand-ink">
                    Nos plantes
                    <svg class="h-3 w-3 transition group-hover:rotate-180 group-focus-within:rotate-180" viewBox="0 0 12 8" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m1 1.5 5 5 5-5"/></svg>
                </a>
                <div class="invisible absolute left-1/2 top-full z-50 w-[52rem] -translate-x-1/2 pt-2 opacity-0 transition group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">
                    <div class="grid grid-cols-[1fr_15rem] gap-6 rounded-2xl border border-line bg-surface p-7 shadow-xl shadow-ink/5">
                        {# Les familles n'ont pas toutes des sous-familles : une grille
                           laisserait autant de trous que de cellules courtes. Le flux en
                           colonnes remplit de haut en bas et se referme tout seul. #}
                        <ul class="columns-2 gap-x-8 [column-fill:balance]">
                            {% for category in site.menuCategories %}
                                <li class="mb-4 break-inside-avoid">
                                    <a href="{{ path('category_show', { slug: category.slug }) }}" class="font-serif text-[1.02rem] text-ink hover:text-brand-ink">{{ category.name }}</a>
                                    {% set children = category.children|filter(c => c.published) %}
                                    {% if children|length %}
                                        <ul class="mt-1 space-y-0.5">
                                            {% for child in children %}
                                                <li><a href="{{ path('category_show', { slug: child.slug }) }}" class="font-sans text-[0.82rem] text-muted hover:text-brand-ink">{{ child.name }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>

                        <div class="rounded-xl bg-surface-tint p-5">
                            <p class="font-serif text-[1.02rem] text-ink">Chercher dans le catalogue</p>
                            <p class="mt-2 font-sans text-[0.82rem] leading-relaxed text-muted">
                                Par exposition, saison de plantation, hauteur adulte ou disponibilité.
                            </p>
                            <ul class="mt-4 space-y-1.5">
                                {% for selection in site.menuSelections %}
                                    <li><a href="{{ path('trait_show', { slug: selection.slug }) }}" class="font-sans text-[0.85rem] text-brand-ink hover:underline underline-offset-4">{{ selection.name }}</a></li>
                                {% endfor %}
                            </ul>
                            <a href="{{ path('plant_index') }}" class="mt-5 inline-flex items-center gap-1.5 font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">
                                Tout le catalogue
                                <svg class="h-3 w-3" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M1 6h13M9.5 1.5 14 6l-4.5 4.5"/></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {% set links = [
                { route: 'service_index', label: 'Paysagiste' },
                { route: 'advice_index', label: 'Conseils' },
                { route: 'news_index', label: 'Actualités' },
                { route: 'contact', label: 'Contact' },
            ] %}
            {% for link in links %}
                <a href="{{ path(link.route) }}"
                   class="rounded-full px-4 py-2 font-serif text-[1.02rem] text-body transition hover:text-brand-ink {{ app.request.attributes.get('_route') == link.route ? 'text-brand-ink underline decoration-brand decoration-2 underline-offset-8' : '' }}">
                    {{ link.label }}
                </a>
            {% endfor %}
        </nav>

        <div class="flex items-center gap-2">
            {% if profile %}
                <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" class="hidden sm:grid h-10 w-10 place-items-center rounded-full border border-line text-brand-ink transition hover:border-brand hover:bg-surface-tint" aria-label="Venir à la pépinière">
                    <svg class="h-[18px] w-[18px]" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M10 18s6-5.2 6-9.6A6 6 0 0 0 4 8.4C4 12.8 10 18 10 18Z"/><circle cx="10" cy="8.3" r="2.1"/></svg>
                </a>
                {% if profile.instagramUrl %}
                    <a href="{{ profile.instagramUrl }}" rel="noopener noreferrer nofollow" target="_blank" class="hidden sm:grid h-10 w-10 place-items-center rounded-full border border-line text-brand-ink transition hover:border-brand hover:bg-surface-tint" aria-label="Notre compte Instagram, nouvelle fenêtre">
                        <svg class="h-[18px] w-[18px]" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="4.2"/><circle cx="10" cy="10" r="3.4"/><circle cx="14.4" cy="5.6" r=".9" fill="currentColor" stroke="none"/></svg>
                    </a>
                {% endif %}
                {% if profile.phone %}
                    <a href="tel:{{ profile.phoneLink }}" class="hidden md:inline-flex items-center rounded-full bg-brand-cta px-5 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">
                        {{ profile.phone }}
                    </a>
                {% endif %}
            {% endif %}

            {# Le menu des petits écrans est un `details` : ouvert, fermé, au
               clavier, sans une ligne de script. #}
            <details class="lg:hidden [&_svg.close]:hidden [&[open]_svg.open]:hidden [&[open]_svg.close]:block">
                <summary class="grid h-10 w-10 cursor-pointer list-none place-items-center rounded-full border border-line text-brand-ink marker:hidden" aria-label="Ouvrir le menu">
                    <svg class="open h-5 w-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
                    <svg class="close h-5 w-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15"/></svg>
                </summary>
                <div class="absolute inset-x-0 top-full border-b border-line bg-surface px-4 pb-8 pt-4 shadow-lg">
                    <nav class="mx-auto flex max-w-7xl flex-col" aria-label="Navigation principale, petits écrans">
                        <a href="{{ path('nursery_index') }}" class="border-b border-line py-3 font-serif text-lg text-ink">La pépinière</a>
                        <a href="{{ path('plant_index') }}" class="border-b border-line py-3 font-serif text-lg text-ink">Nos plantes</a>
                        {% for category in site.menuCategories %}
                            <a href="{{ path('category_show', { slug: category.slug }) }}" class="border-b border-line/60 py-2 pl-4 font-sans text-sm text-muted">{{ category.name }}</a>
                        {% endfor %}
                        <a href="{{ path('plant_index') }}" class="border-b border-line/60 py-2 pl-4 font-sans text-sm text-brand-ink">Rechercher une plante</a>
                        <a href="{{ path('service_index') }}" class="border-b border-line py-3 font-serif text-lg text-ink">Paysagiste</a>
                        <a href="{{ path('advice_index') }}" class="border-b border-line py-3 font-serif text-lg text-ink">Conseils</a>
                        <a href="{{ path('news_index') }}" class="border-b border-line py-3 font-serif text-lg text-ink">Actualités</a>
                        <a href="{{ path('contact') }}" class="py-3 font-serif text-lg text-ink">Contact</a>
                    </nav>
                </div>
            </details>
        </div>
    </div>
</header>