<header class="sticky top-0 z-50 bg-surface-light dark:bg-surface-dark border-b border-border-light dark:border-border-dark shadow-sm">
    <div class="px-6 lg:px-10 h-16 flex items-center justify-between max-w-[1440px] mx-auto w-full">
        <div class="flex items-center gap-4">
            <a class="flex items-center gap-3 group" href="{{ route('home') }}">
                <h2 class="text-text-main dark:text-white text-lg font-bold tracking-tight [&>img]:h-9 [&>img]:w-auto flex items-center">
                    {!! get_logo() !!}
                </h2>
            </a>
        </div>
        <nav class="hidden md:flex items-center gap-1">
            @foreach(get_menu('header') as $item)
                @include('theme::partials.menu.desktop-item', ['item' => $item, 'level' => 0])
            @endforeach
        </nav>
        <div class="flex items-center gap-3">
            <!-- Language Switcher -->
            @if ($active_languages->count() > 1)
                <div class="relative hidden sm:block" id="lang-switcher">
                    <button id="lang-switcher-btn" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
                        <span class="fi fi-{{ch_get_country_code($default_lang->locale)}} text-lg"></span>
                        <span class="text-sm font-medium uppercase">{{$default_lang->locale}}</span>
                        <span class="material-symbols-outlined text-[18px]" id="lang-arrow">expand_more</span>
                    </button>
                    <div id="lang-dropdown" class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 opacity-0 invisible transition-all duration-200 z-50">
                        @foreach($active_languages as $language)
                            @if((session()->has('locale') && $language->locale == session()->get('locale')) || $default_lang->locale == $language->locale)
                                @continue
                            @endif
                            <a href="{{route('switch_lang', [$language->locale])}}" class="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors first:rounded-t-lg last:rounded-b-lg">
                                <span class="fi fi-{{ch_get_country_code($language->locale)}} text-lg"></span>
                                <span class="text-sm font-medium uppercase">{{$language->locale}}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
            
            <div class="h-6 w-px bg-gray-200 dark:bg-gray-700 mx-1 hidden sm:block"></div>
            @auth
                <a href="{{ route('frontend.user.account') }}" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors hidden sm:flex">
                    <img alt="{{ auth()->user()->name }}" class="size-7 rounded-full" src="{{ auth()->user()->avatar ?? 'https://ui-avatars.com/api/?name=' . auth()->user()->name }}" />
                    <span class="text-sm font-medium">Account</span>
                </a>
            @else
                <a href="{{ route('login') }}" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors hidden sm:flex">
                    <span class="text-sm font-medium">Log In</span>
                </a>
            @endauth
            <button id="menu-btn" class="md:hidden p-2 text-text-main dark:text-white">
                <span class="material-symbols-outlined text-[24px]">menu</span>
            </button>
        </div>
    </div>
</header>
