{% set currentRoute = app.request.attributes.get('_route') %}
{% set isHomepage = currentRoute == 'homepage' %}
{% set isShop = currentRoute in ['shop', 'shop_product', 'shop_checkout', 'shop_checkout_cart', 'shop_checkout_success', 'shop_checkout_payment_pending', 'shop_checkout_payment_unconfirmed'] %}
{% set isHome = currentRoute == 'home' %}
{% set isFindUs = currentRoute in ['find-us', 'depots_index'] %}
{% set isContact = currentRoute == 'contact' %}
{% set isWithdrawal = currentRoute starts with 'shop_withdrawal' %}
{% set accountUrl = app.user ? path('app_account') : path('app_login') %}

<header class="{{ isWithdrawal ? 'relative bg-primary' : 'absolute top-full' }} z-50 w-full">
    <nav class="relative w-full">
        <div class="site-nav-backdrop" aria-hidden="true"></div>

        <div
            :class="{ 'py-2! md:py-3!': scrolled, 'transition-[padding] duration-300': navReady }"
            class="relative mx-auto flex max-w-[1440px] items-center justify-between px-4 py-4 md:px-16"
        >
            <div class="flex items-center gap-1 md:hidden">
                <button
                    type="button"
                    class="flex h-11 w-11 items-center justify-start text-white"
                    :aria-expanded="mobileMenuOpen.toString()"
                    aria-label="{{ 'theme.nav.open_menu'|trans }}"
                    @click="toggleMobileMenu()"
                >
                    <span aria-hidden="true" class="material-symbols-outlined text-[30px]">menu</span>
                </button>

                {{ include('partials/_language_switcher.html.twig', {
                    attributes: 'class="inline-flex min-h-11 items-center justify-center px-1 font-label text-[12px] font-semibold tracking-[0.14em] text-white/80 transition-colors hover:text-white"'
                }) }}
            </div>

            <div class="hidden items-center gap-8 md:flex">
                <a href="{{ path('homepage') }}" class="shrink-0">
                    <twig:theme:BrandLogo
                        variant="light"
                        class="!h-20 !w-auto overflow-visible"
                        imageClass="!h-full !w-auto scale-125 object-contain"
                    />
                </a>
                {% block navigation_desktop_links %}
                    <div class="hidden gap-6 md:flex">
                        <a href="{{ path('home') }}" class="{{ isHome ? 'border-b-2 border-white pb-1 font-semibold text-white' : 'text-white/80 hover:text-white' }} transition-colors duration-300">{{ 'theme.nav.history'|trans }}</a>
                        <a href="{{ path('shop') }}" class="{{ isShop ? 'border-b-2 border-white pb-1 font-semibold text-white' : 'text-white/80 hover:text-white' }} transition-colors duration-300">{{ 'theme.nav.shop'|trans }}</a>
                        <a href="{{ path('find-us') }}" class="{{ isFindUs ? 'border-b-2 border-white pb-1 font-semibold text-white' : 'text-white/80 hover:text-white' }} transition-colors duration-300">{{ 'theme.nav.find_us'|trans }}</a>
                        <a href="{{ path('contact') }}" class="{{ isContact ? 'border-b-2 border-white pb-1 font-semibold text-white' : 'text-white/80 hover:text-white' }} transition-colors duration-300">{{ 'theme.nav.contact'|trans }}</a>
                    </div>
                {% endblock %}
            </div>

            <a href="{{ path('homepage') }}" class="absolute top-4 left-1/2 -translate-x-1/2 md:hidden">
                <twig:theme:BrandLogo
                    variant="light"
                    class="!h-12 !w-auto"
                    imageClass="!h-full !w-auto object-contain"
                />
            </a>

            {% block navigation_actions %}
                <div class="flex items-center gap-0 lg:gap-2">
                    {{ include('partials/_language_switcher.html.twig', {
                        attributes: 'class="hidden min-h-11 items-center justify-center px-1 font-label text-[12px] font-semibold tracking-[0.14em] text-white/80 transition-colors hover:text-white md:inline-flex lg:px-2"'
                    }) }}

                    <a
                        href="{{ accountUrl }}"
                        class="relative flex h-11 w-11 items-center justify-center text-white transition-colors hover:text-secondary lg:hidden"
                        aria-label="{{ 'theme.nav.account'|trans }}"
                    >
                        <span aria-hidden="true" class="material-symbols-outlined text-[32px] leading-none">person</span>
                    </a>

                    <a
                        href="{{ accountUrl }}"
                        class="relative hidden items-center justify-center px-2 py-2 text-white transition-colors hover:text-secondary md:px-3 lg:flex"
                        aria-label="{{ 'theme.nav.account'|trans }}"
                    >
                        <span class="text-white/80 transition-colors duration-300 hover:text-white">
                            {{ app.user ? 'theme.nav.my_account'|trans : 'theme.nav.account'|trans }}
                        </span>
                    </a>

                    <button
                        type="button"
                        class="relative flex h-11 w-11 cursor-pointer items-center justify-center text-white transition-colors hover:text-secondary"
                        aria-label="{{ 'theme.nav.cart'|trans }}"
                        @click="openCart()"
                    >
                        <span aria-hidden="true" class="material-symbols-outlined text-[28px]">shopping_bag</span>
                        <span class="absolute top-0 right-0 flex h-4 min-w-4 items-center justify-center bg-primary px-1 text-[10px] font-bold text-white cart-items-count">0</span>
                    </button>
                </div>
            {% endblock %}
        </div>

        <div class="fixed inset-x-0 top-[var(--announcement-offset,0px)] bottom-0 z-[70] bg-surface-container text-primary backdrop-blur-xl md:hidden" x-cloak x-show="mobileMenuOpen" x-transition.opacity.duration.250ms>
            <div class="flex min-h-full flex-col px-4 pb-10 pt-6">
                <div class="flex items-center justify-between">
                    <button
                        type="button"
                        class="inline-flex h-12 w-12 items-center justify-center border border-primary/10 text-primary transition hover:bg-white/60"
                        aria-label="{{ 'theme.nav.close_menu'|trans }}"
                        @click="mobileMenuOpen = false"
                    >
                        <span aria-hidden="true" class="material-symbols-outlined text-[28px]">close</span>
                    </button>
                    <a href="{{ path('homepage') }}">
                        <twig:theme:BrandLogo
                            class="!h-12 !w-auto"
                            imageClass="!h-full !w-auto object-contain"
                        />
                    </a>
                    <span class="w-12"></span>
                </div>

                {% block navigation_mobile_links %}
                    <div class="flex flex-1 flex-col items-center justify-center gap-8 text-center">
                        <a href="{{ path('homepage') }}" class="font-label text-[28px] uppercase tracking-[0.22em] text-primary" @click="mobileMenuOpen = false">{{ 'theme.nav.home'|trans }}</a>
                        <a href="{{ path('home') }}" class="font-label text-[28px] uppercase tracking-[0.22em] text-primary" @click="mobileMenuOpen = false">{{ 'theme.nav.history'|trans }}</a>
                        <a href="{{ path('shop') }}" class="font-label text-[28px] uppercase tracking-[0.22em] text-primary" @click="mobileMenuOpen = false">{{ 'theme.nav.shop'|trans }}</a>
                        <a href="{{ path('find-us') }}" class="font-label text-[28px] uppercase tracking-[0.22em] text-primary" @click="mobileMenuOpen = false">{{ 'theme.nav.find_us'|trans }}</a>
                        <a href="{{ path('contact') }}" class="font-label text-[28px] uppercase tracking-[0.22em] text-primary" @click="mobileMenuOpen = false">{{ 'theme.nav.contact'|trans }}</a>
                    </div>
                {% endblock %}

                {% block navigation_mobile_footer %}
                    <div class="border-t border-primary/10 pt-6">
                        <p class="text-center font-label text-[12px] uppercase tracking-[0.2em] text-primary/60">{{ 'theme.nav.tagline'|trans }}</p>
                        {{ include('partials/_language_switcher.html.twig', {
                            attributes: 'class="mx-auto mt-5 inline-flex min-h-11 items-center justify-center border border-primary/15 px-5 font-label text-[12px] font-semibold tracking-[0.14em] text-primary transition-colors hover:border-primary hover:bg-primary hover:text-white"'
                        }) }}
                    </div>
                {% endblock %}
            </div>
        </div>
    </nav>
</header>
