<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 min-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
                <div class="relative hidden sm:block" id="header-user-menu">
                    <button id="header-user-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">
                        <img src="{{ auth()->user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(auth()->user()->name) . '&size=64' }}"
                             alt="{{ auth()->user()->name }}"
                             class="size-7 rounded-full object-cover flex-shrink-0" />
                        <span class="text-sm font-medium text-text-main dark:text-white max-w-[120px] truncate">
                            {{ auth()->user()->name }}
                        </span>
                        <span class="material-symbols-outlined text-[18px] text-text-muted dark:text-gray-400" id="header-user-arrow">expand_more</span>
                    </button>

                    <div id="header-user-dropdown"
                         class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-border-light dark:border-border-dark overflow-hidden z-50">

                        <div class="px-4 py-3 border-b border-border-light dark:border-border-dark">
                            <p class="text-xs font-semibold text-text-main dark:text-white truncate">{{ auth()->user()->name }}</p>
                            <p class="text-xs text-text-muted dark:text-gray-400 truncate">{{ auth()->user()->email }}</p>
                        </div>

                        {{-- Module-injected links (e.g. "SEO Agents") --}}
                        @php $headerModuleItems = app('module.account.menu')->sortBy('order'); @endphp
                        @if($headerModuleItems->isNotEmpty())
                            <div class="py-1">
                                @foreach($headerModuleItems as $item)
                                    @if(!isset($item['condition']) || call_user_func($item['condition']))
                                        <a href="{{ route($item['route']) }}"
                                           class="flex items-center gap-3 px-4 py-2 text-sm text-text-muted dark:text-gray-400 hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                            <span class="material-symbols-outlined text-[16px]">{{ $item['icon'] }}</span>
                                            {{ $item['label'] }}
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                            <div class="border-t border-border-light dark:border-border-dark"></div>
                        @endif

                        {{-- Extra items pushed by individual views --}}
                        @stack('header_user_dropdown')

                        <div class="py-1">
                            <a href="{{ route('frontend.user.account') }}"
                               class="flex items-center gap-3 px-4 py-2 text-sm text-text-muted dark:text-gray-400 hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                <span class="material-symbols-outlined text-[16px]">settings</span>
                                Account Settings
                            </a>
                        </div>

                        <div class="border-t border-border-light dark:border-border-dark py-1">
                            <form id="header-logout-form" action="{{ route('logout') }}" method="POST" class="hidden">@csrf</form>
                            <button onclick="document.getElementById('header-logout-form').submit()"
                                    class="w-full flex items-center gap-3 px-4 py-2 text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                                <span class="material-symbols-outlined text-[16px]">logout</span>
                                Sign Out
                            </button>
                        </div>
                    </div>
                </div>
            @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>

<script>
(function () {
    var btn      = document.getElementById('header-user-btn');
    var dropdown = document.getElementById('header-user-dropdown');
    var arrow    = document.getElementById('header-user-arrow');
    if (!btn || !dropdown) return;
    btn.addEventListener('click', function (e) {
        e.stopPropagation();
        var open = !dropdown.classList.contains('hidden');
        dropdown.classList.toggle('hidden', open);
        if (arrow) arrow.textContent = open ? 'expand_more' : 'expand_less';
    });
    document.addEventListener('click', function () {
        dropdown.classList.add('hidden');
        if (arrow) arrow.textContent = 'expand_more';
    });
})();
</script>
