{# templates/visiteur/components/_navbar.html.twig #}

{% set currentPath = app.request.pathinfo %}

{% set navItems = [
    { label: "Accueil", path: path('app_home'), route: '/' },
    { label: "À propos", path: path('app_about'), route: '/a-propos' },
    { label: "Programmes", path: path('app_programmes'), route: '/programmes' },
    { label: "Construction-Vente", path: path('app_construction_vente'), route: '/construction-vente' },
    { label: "Galerie", path: path('app_gallery'), route: '/galerie' },
    { label: "Actualités", path: path('app_news'), route: '/actualites' },
    { label: "Contact", path: path('app_contact'), route: '/contact' }
] %}

<header 
    class="sticky top-0 z-50 bg-accent text-accent-foreground shadow-lg"
>
    <div class="container mx-auto flex items-center justify-between px-4 py-3">
        {# Logo #}
        <a href="{{ path('app_home') }}" class="flex items-center gap-2">
            <div class="flex h-10 w-10 items-center justify-center rounded bg-primary font-heading text-lg font-black text-primary-foreground">
                L
            </div>
            <span class="font-heading text-2xl font-bold tracking-wider">
                LUXIM
            </span>
        </a>

        {# Desktop nav #}
        <nav class="hidden items-center gap-1 lg:flex">
            {% for item in navItems %}
                {% set isActive = (currentPath == item.route) %}
                <a
                    href="{{ item.path }}"
                    class="rounded px-3 py-2 font-heading font-medium transition-colors hover:bg-primary/20 hover:text-primary {{ isActive ? 'bg-primary/10 text-primary' : '' }}"
                >
                    {{ item.label }}
                </a>
            {% endfor %}
        </nav>

        {# CTA Desktop #}
        <a href="{{ path('app_login') }}" class="hidden lg:block">
            <button class="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm bg-primary font-heading font-semibold text-primary-foreground hover:bg-primary/90">
                Espace client
            </button>
        </a>

        {# Mobile toggle #}
        <button
            class="lg:hidden"
            data-mobile-menu-button
            aria-label="Menu"
        >
            <div id="icon-open">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </div>
            <div id="icon-close" class="hidden">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </div>
        </button>
    </div>

    {# Mobile nav #}
    <nav 
        data-mobile-menu
        class="hidden border-t border-border/20 bg-accent lg:hidden"
    >
        <div class="container mx-auto flex flex-col gap-1 px-4 py-4">
            {% for item in navItems %}
                {% set isActive = (currentPath == item.route) %}
                <a
                    href="{{ item.path }}"
                    class="rounded px-4 py-3 font-heading font-medium transition-colors hover:bg-primary/20 {{ isActive ? 'bg-primary/10 text-primary' : '' }}"
                >
                    {{ item.label }}
                </a>
            {% endfor %}
            <a href="{{ path('app_login') }}">
                <button class="mt-2 w-full inline-flex items-center justify-center rounded-md px-4 py-2 text-sm bg-primary font-heading font-semibold text-primary-foreground">
                    Espace client
                </button>
            </a>
        </div>
    </nav>
</header>