@props([
    'disableHeader' => false,
])

@php
    $headerIconBtnClass = 'rounded-lg border border-border/70 bg-background/50 p-2 text-foreground shadow-none backdrop-blur-sm outline-none ring-0 transition-colors hover:border-border hover:bg-background/70 hover:text-foreground focus:outline-none focus:ring-0';

    $headerIconBtnBlurClass = '!rounded-lg !border-white/35 !bg-white/20 !p-2 !text-foreground !shadow-none backdrop-blur-sm outline-none ring-0 transition-colors hover:!border-white/45 hover:!bg-white/30 hover:!text-foreground focus:outline-none focus:ring-0';

    $themeToggleClass = 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg border border-border/70 bg-background/50 px-2 py-2 text-sm font-medium text-foreground shadow-none backdrop-blur-sm transition-all duration-200 outline-none ring-0 hover:border-border hover:bg-background/70 hover:text-foreground active:bg-background/80 focus:outline-none focus:ring-0';

    $themeToggleBlurClass = '!rounded-lg !border-white/35 !bg-white/20 !px-2 !py-2 !text-foreground !shadow-none backdrop-blur-sm outline-none ring-0 transition-all duration-200 hover:!border-white/45 hover:!bg-white/30 hover:!text-foreground active:!bg-white/25 focus:outline-none focus:ring-0';

    $loginBtnClass = 'shadow-sm backdrop-blur-sm border border-brand/40 bg-brand/95 hover:bg-brand/85 active:bg-brand/80';

    $loginBtnBlurClass = '!border-white/25 !bg-brand/90 !shadow-sm backdrop-blur-sm hover:!bg-brand/80 active:!bg-brand/75';

    $mobileMenuBtnClass = 'rounded-full border border-border/70 bg-background/50 text-foreground shadow-none backdrop-blur-sm outline-none ring-0 transition-colors hover:border-border hover:bg-background/70 hover:text-foreground focus:outline-none focus:ring-0';

    $mobileMenuBtnBlurClass = '!rounded-full !border-white/35 !bg-white/20 !text-foreground !shadow-none backdrop-blur-sm outline-none ring-0 transition-colors hover:!border-white/45 hover:!bg-white/30 hover:!text-foreground focus:outline-none focus:ring-0';
@endphp

<header
    id="front-site-header"
    x-ref="frontSiteHeader"
    class="sticky top-0 z-50 transition-all duration-300 border-b border-border/60 bg-card"
    :class="scrolled
        ? 'border-b border-border/80 bg-card/40 shadow-soft backdrop-blur-md'
        : 'border-b border-border/60 bg-card'"
>
    <div class="container">
        {{-- Mobile --}}
        <div class="relative flex h-16 items-center lg:hidden">
            @if (!$disableHeader)
            <div class="absolute inset-y-0 left-0 z-10 flex items-center">
                <x-buttons.icon
                    variant="ghost"
                    size="sm"
                    :class="$mobileMenuBtnClass"
                    ::class="scrolled ? '@js($mobileMenuBtnBlurClass)' : ''"
                    @click="toggleMobile()"
                    aria-label="Open menu"
                >
                    <x-heroicon-o-bars-3 x-show="!mobileOpen" class="h-6 w-6" />
                    <x-heroicon-o-x-mark x-show="mobileOpen" x-cloak class="h-6 w-6" />
                </x-buttons.icon>
            </div>
            @endif

            <a
                href="{{ route('home') }}"
                class="absolute left-1/2 flex shrink-0 -translate-x-1/2 items-center"
                aria-label="{{ config('app.name') }} home"
            >
                <x-common.logo class="h-8 w-auto sm:h-9" />
            </a>

            @if (!$disableHeader)
            <div class="absolute inset-y-0 right-0 z-10 flex items-center gap-2">
                <x-buttons.icon
                    variant="ghost"
                    size="sm"
                    :class="$headerIconBtnClass"
                    ::class="scrolled ? '@js($headerIconBtnBlurClass)' : ''"
                    title="Cart"
                >
                    <x-heroicon-o-shopping-cart class="h-5 w-5 shrink-0" />
                </x-buttons.icon>

                @auth('user')
                    <x-common.auth.user-dropdown
                        guard="user"
                        :menu-items="config('user-nav.dropdown-items')"
                        :logout-route="route('user.logout')"
                    />
                @else
                    @if(!Route::is('user.login'))
                    <x-forms.button
                        href="{{ route('user.login') }}"
                            size="sm"
                            :class="$loginBtnClass"
                            ::class="scrolled ? '@js($loginBtnBlurClass)' : ''"
                        >
                            {{ __('auth.login.button.login') }}
                        </x-forms.button>
                    @endif
                @endauth
            </div>
            @endif
        </div>

        {{--
            Desktop: [ Logo (fixed) ] [ Items (flex-1) ]
            Items → [ Menu (flex-1) ] [ Other items (shrink-0) ]
        --}}
        <div class="hidden h-[4.25rem] items-stretch lg:flex">
            <div class="flex w-40 shrink-0 items-center sm:w-44 lg:w-48">
                <a href="{{ route('home') }}" class="flex shrink-0 items-center" aria-label="{{ config('app.name') }} home">
                    <x-common.logo class="h-8 w-auto max-w-full sm:h-9" />
                </a>
            </div>

            <div class="flex min-w-0 flex-1 items-center">
                @if (!$disableHeader)
                <div
                    class="flex min-w-0 flex-1 items-center justify-center transition-colors"
                    :class="scrolled
                        ? '[&_.front-nav-link]:!text-foreground [&_.front-nav-link:hover]:!bg-white/15 [&_.front-nav-trigger]:!text-foreground [&_.front-nav-trigger:hover]:!bg-white/15'
                        : ''"
                >
                    <x-layouts.front.navigation.desktop />
                </div>

                <div class="flex shrink-0 items-center gap-2 pl-4 sm:gap-3 sm:pl-6">
                    <x-buttons.icon
                        variant="ghost"
                        size="sm"
                        :class="$headerIconBtnClass"
                        ::class="scrolled ? '@js($headerIconBtnBlurClass)' : ''"
                        title="Cart"
                    >
                        <x-heroicon-o-shopping-cart class="h-5 w-5 shrink-0" />
                    </x-buttons.icon>

                    <x-common.theme-toggle
                        :class="$themeToggleClass"
                        ::class="scrolled ? '@js($themeToggleBlurClass)' : ''"
                    />

                    @auth('user')
                        <x-common.auth.user-dropdown
                            guard="user"
                            :menu-items="config('user-nav.dropdown-items')"
                            :logout-route="route('user.logout')"
                        />
                    @else
                        @if(!Route::is('user.login'))
                            <x-forms.button
                                href="{{ route('user.login') }}"
                                :class="$loginBtnClass"
                                ::class="scrolled ? '@js($loginBtnBlurClass)' : ''"
                            >
                                {{ __('auth.login.button.login') }}
                            </x-forms.button>
                        @endif
                    @endauth
                </div>
                @else
                <div class="flex min-w-0 flex-1 items-center justify-end">
                    <x-common.theme-toggle
                        :class="$themeToggleClass"
                        ::class="scrolled ? '@js($themeToggleBlurClass)' : ''"
                    />
                </div>
                @endif
            </div>
        </div>
    </div>
</header>