@props([
'menuData' => [],
'hreflangAlternates' => [],
])

<header id="main-header" class="fixed z-50 w-full transition-all duration-300 ease-in-out">
    <div class="w-full lg:p-4 lg:mt-4">
        <div class="relative max-w-7xl bg-black py-6 lg:py-2 w-full mx-auto flex justify-between items-center duration-300 ease-in-out lg:rounded-full border border-[rgba(255,255,255,0.1)]">

            {{-- Logo --}}
            <a href="{{ localized_route('home') }}" class="ml-4 lg:z-65 leading-none flex" aria-label="{{ __('navigation.home') }} — Wasoria">
                <div class="font-bold text-foreground flex items-center gap-4 cursor-pointer leading-none">
                    <x-atoms.logo color="white" class="w-7 xl:w-8 duration-300 ease-in-out leading-none" />
                    <span class="block text-white leading-none font-normal text-2xl xl:text-3xl tracking-wider duration-300 ease-in-out font-science-gothic">
                        WASORIA
                    </span>
                </div>
            </a>

            {{-- Language Switcher + CTA Button (desktop only) --}}
            <div class="hidden lg:flex items-center gap-4 lg:z-65 mr-2">
                <x-language-switcher :hreflangAlternates="$hreflangAlternates" />
                <span class="h-5 w-px bg-neutral-700" aria-hidden="true"></span>
                <x-atoms.button-link href="{{ localized_route('contact') }}" :animated="false">
                    {{ __('navigation.contact_us') }}
                </x-atoms.button-link>
            </div>

            {{-- Menu Component --}}
            <x-molecules.menu :menuData="$menuData" :hreflangAlternates="$hreflangAlternates" />
        </div>
    </div>
</header>