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

{{-- Hamburger button (mobile only, outside nav overlay) --}}
<button
    class="lg:hidden flex items-center justify-center mr-2"
    data-menu-toggle
    aria-label="{{ __('navigation.open_menu') }}"
    aria-expanded="false"
    aria-controls="main-nav">
    <x-atoms.icon name="menu" class="!w-6 !h-6 text-white" />
</button>

{{-- Navigation overlay --}}
<nav
    id="main-nav"
    aria-label="{{ __('navigation.main_navigation') }}"
    class="absolute w-full flex items-center justify-center z-60"
    data-nav-overlay>
    <div class="fixed lg:static top-0 lg:top-auto left-0 lg:left-auto w-screen lg:w-full h-screen lg:h-auto bg-background lg:bg-transparent duration-300 ease-in-out lg:translate-x-0 translate-x-[-100%] px-4 py-8 lg:px-0 lg:py-0 flex flex-col lg:flex-row lg:items-center lg:justify-center overflow-hidden lg:overflow-visible"
        data-nav-overlay-inner>

        {{-- Mobile header: Logo + Close button --}}
        <div class="flex lg:hidden justify-between items-center mb-8">
            <div class="flex items-end gap-4">
                <x-atoms.logo color="white" class="w-10" />
                <span class="text-white text-3xl font-normal font-science-gothic">WASORIA</span>
            </div>
            <button
                data-menu-close
                aria-label="{{ __('navigation.close_menu') }}"
                class="relative w-6 h-6 flex items-center justify-center">
                <span class="absolute h-0.5 w-full bg-foreground rotate-45"></span>
                <span class="absolute h-0.5 w-full bg-foreground -rotate-45"></span>
            </button>
        </div>

        {{-- Nav list container --}}
        <div id="header-nav-list-container" class="transition-transform duration-300 ease-in-out overflow-y-auto lg:overflow-visible flex-1 lg:flex-none min-h-0 lg:min-h-auto relative lg:static">
            <ul class="flex flex-col lg:flex-row gap-4 xl:gap-0 text-foreground lg:text-white text-2xl lg:text-lg relative lg:static">
                @foreach($menuData as $item)
                @php
                $mobileOnlyClass = !empty($item['mobileOnly']) ? 'lg:hidden' : '';
                @endphp

                <li class="{{ $mobileOnlyClass }}" @if(empty($item['items'])) data-nav-simple-link @endif>
                    @if(!empty($item['items']))
                    {{-- Item with submenu --}}
                    <x-molecules.sub-menu
                        :label="$item['label']"
                        :baseHref="$item['baseHref'] ?? ''"
                        :items="$item['items']"
                        :id="$item['key']" />
                    @else
                    {{-- Simple link --}}
                    <a href="{{ localized_route($item['route']) }}" class="hover:underline p-4 block">
                        {{ __($item['label']) }}
                    </a>
                    @endif
                </li>
                @endforeach
            </ul>
        </div>

        {{-- Language Switcher (mobile) --}}
        <div class="lg:hidden flex justify-center py-4">
            <x-language-switcher :hreflangAlternates="$hreflangAlternates" />
        </div>
    </div>
</nav>