@props(['transparent' => false])

{{-- Sticky Header con Smart Booking --}}
<header x-data="{ scrolled: {{ $transparent ? 'false' : 'true' }} }"
    @scroll.window="scrolled = {{ $transparent ? 'window.scrollY > 100' : 'true' }}"
    :class="{
        'bg-white/95 dark:bg-umami-dark/95 backdrop-blur shadow-sm': scrolled,
        'bg-transparent': !scrolled
    }" class="fixed top-0 inset-x-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-28 md:h-36">
            {{-- Logo --}}
            <a href="{{ route('home') }}" class="flex items-center">
                <img src="/images/logo-umami-official.png" alt="Umami Beer" class="h-24 md:h-28"
                    :class="{ 'brightness-0 invert': (!scrolled && !darkMode) || (scrolled && darkMode) }" />
            </a>

            {{-- Desktop Navigation --}}
            <nav class="hidden md:flex items-center gap-8">
                @foreach ([
                    ['label' => 'menu', 'route' => 'menu.food'],
                    ['label' => 'menu_drink', 'route' => 'menu.drink'], // Need to add this key
                    ['label' => 'birre', 'route' => 'birre'],
                    ['label' => 'ordina_online', 'route' => 'order.create'],
                    ['label' => 'chi_siamo', 'route' => 'chi-siamo'],
                    ['label' => 'galleria', 'route' => 'galleria'],
                    ['label' => 'blog', 'route' => 'blog.index']
                ] as $item)
                    <a href="{{ route($item['route'], ['locale' => app()->getLocale()]) }}"
                        class="text-sm font-bold uppercase tracking-widest transition-colors duration-300"
                        :class="scrolled ? 'text-umami-dark hover:text-umami-accent' : 'text-white hover:text-umami-accent'">
                        {{ __($item['label']) }}
                    </a>
                @endforeach
            </nav>

            {{-- CTA Button & Language --}}
            <div class="hidden md:flex items-center gap-4">
                {{-- Lang Switcher --}}
                <div class="flex items-center gap-2 text-sm font-bold">
                    <a href="{{ route(Route::currentRouteName() ?? 'home', array_merge(request()->route()->parameters(), ['locale' => 'it'])) }}" 
                       class="transition-colors"
                       :class="{
                           'text-umami-accent': {{ json_encode(app()->getLocale() === 'it') }},
                           'text-umami-dark hover:text-umami-accent': !{{ json_encode(app()->getLocale() === 'it') }} && scrolled,
                           'text-white hover:text-umami-accent': !{{ json_encode(app()->getLocale() === 'it') }} && !scrolled
                       }">IT</a>
                    <span :class="scrolled ? 'text-gray-300' : 'text-white/50'">|</span>
                    <a href="{{ route(Route::currentRouteName() ?? 'home', array_merge(request()->route()->parameters(), ['locale' => 'en'])) }}" 
                       class="transition-colors"
                       :class="{
                           'text-umami-accent': {{ json_encode(app()->getLocale() === 'en') }},
                           'text-umami-dark hover:text-umami-accent': !{{ json_encode(app()->getLocale() === 'en') }} && scrolled,
                           'text-white hover:text-umami-accent': !{{ json_encode(app()->getLocale() === 'en') }} && !scrolled
                       }">EN</a>
                </div>

                <a href="tel:{{ str_replace(' ', '', config('umami.phone', '3922043500')) }}"
                    class="text-sm font-medium transition-colors"
                    :class="scrolled ? 'text-umami-text dark:text-umami-border' : 'text-white'">
                    <span class="hidden lg:inline">{{ config('umami.phone', '392 204 3500') }}</span>
                </a>
                @auth
                    <a href="{{ route('admin.dashboard') }}" class="text-sm font-medium transition-colors"
                        :class="scrolled ? 'text-umami-text hover:text-umami-accent dark:text-umami-border' : 'text-white hover:text-amber-300'">
                        Dashboard
                    </a>
                @else
                    <a href="{{ route('login', ['locale' => app()->getLocale()]) }}" class="text-sm font-medium transition-colors"
                        :class="scrolled ? 'text-umami-text hover:text-umami-accent dark:text-umami-border' : 'text-white hover:text-amber-300'">
                        {{ __('Accedi') }}
                    </a>
                @endauth
                <a href="#prenota" @click.prevent="$dispatch('open-booking')" class="
                        px-5 py-2.5 rounded-full
                        bg-umami-accent text-white font-semibold
                        hover:bg-umami-accent/85
                        transition-colors
                        shadow-lg shadow-umami-accent/25
                    ">
                    {{ __('prenota') }}
                </a>
            </div>

            {{-- Mobile Menu Button --}}
            <button @click="mobileMenu = !mobileMenu" class="md:hidden p-2 rounded-lg"
                :class="scrolled ? 'text-umami-text dark:text-umami-border' : 'text-white'" aria-label="Menu">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path x-show="!mobileMenu" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 6h16M4 12h16M4 18h16" />
                    <path x-show="mobileMenu" x-cloak stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>

    {{-- Mobile Menu Dropdown --}}
    <div x-show="mobileMenu" x-cloak x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
        class="md:hidden bg-white dark:bg-umami-dark border-t dark:border-umami-dark/80 shadow-lg">
        <nav class="container mx-auto px-4 py-4 flex flex-col gap-1">
            {{-- Mobile Lang Switcher --}}
            <div class="flex items-center justify-center gap-4 py-2 mb-2 border-b border-gray-100 dark:border-gray-800">
                <a href="{{ route(Route::currentRouteName() ?? 'home', array_merge(request()->route()->parameters(), ['locale' => 'it'])) }}" 
                   class="font-bold {{ app()->getLocale() === 'it' ? 'text-umami-accent' : 'text-gray-500 dark:text-gray-400' }}">IT</a>
                <span class="text-gray-300">|</span>
                <a href="{{ route(Route::currentRouteName() ?? 'home', array_merge(request()->route()->parameters(), ['locale' => 'en'])) }}" 
                   class="font-bold {{ app()->getLocale() === 'en' ? 'text-umami-accent' : 'text-gray-500 dark:text-gray-400' }}">EN</a>
            </div>

            <a href="{{ route('menu.food', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('menu') }}
            </a>
            <a href="{{ route('menu.drink', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('menu_drink') }}
            </a>
            <a href="{{ route('birre', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('birre') }}
            </a>
            <a href="{{ route('order.create', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-bold text-umami-accent rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('ordina_online') }}
            </a>
            <a href="{{ route('chi-siamo', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('chi_siamo') }}
            </a>
            <a href="{{ route('galleria', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('galleria') }}
            </a>
            <a href="{{ route('blog.index', ['locale' => app()->getLocale()]) }}"
                class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                {{ __('blog') }}
            </a>
            <hr class="my-2 dark:border-umami-dark/80" />
            @auth
                <a href="{{ route('admin.dashboard') }}"
                    class="py-3 px-4 text-umami-accent font-semibold rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                    Dashboard
                </a>
            @else
                <a href="{{ route('login', ['locale' => app()->getLocale()]) }}"
                    class="py-3 px-4 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-umami-dark/80 transition-colors">
                    {{ __('Accedi') }}
                </a>
            @endauth
            <a href="tel:{{ str_replace(' ', '', config('umami.phone', '3922043500')) }}"
                class="py-3 px-4 text-umami-accent font-semibold flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                Chiama per prenotare
            </a>
        </nav>
    </div>

    {{-- Slot for page-specific sub-navigation (e.g. category bar on order page) --}}
    @stack('header-bottom')
</header>