@php
    $links = [
        ['label' => 'Home', 'route' => 'home'],
        ['label' => 'Book', 'route' => 'book'],
        ['label' => 'Yachts', 'route' => 'yachts'],
        ['label' => 'Destinations', 'route' => 'destinations'],
        ['label' => 'Experiences', 'route' => 'experiences'],
        ['label' => 'Contact', 'route' => 'contact'],
    ];
@endphp

<nav
    x-data="{
        scrolled: false,
        open: false,
        solid: {{ request()->routeIs('home') ? 'false' : 'true' }},
        theme: document.documentElement.getAttribute('data-theme') || 'day',
        toggleTheme() {
            this.theme = this.theme === 'night' ? 'day' : 'night';
            document.documentElement.setAttribute('data-theme', this.theme);
            try { localStorage.setItem('sy-theme', this.theme); } catch (e) {}
        }
    }"
    x-init="scrolled = window.scrollY > 40; window.addEventListener('scroll', () => scrolled = window.scrollY > 40, { passive: true })"
    :class="(scrolled || open || solid) ? 'sy-nav--solid' : ''"
    class="sy-nav"
>
    <div class="sy-container flex items-center justify-between py-5 lg:py-6">
        {{-- Logo --}}
        <a href="{{ route('home') }}" class="sy-logo">
            <span class="sy-logo__name">Saint<b>Yachting</b></span>
            <span class="sy-logo__sub">Mykonos</span>
        </a>

        {{-- Desktop links --}}
        <div class="hidden items-center gap-9 lg:flex">
            @foreach ($links as $link)
                <a
                    href="{{ route($link['route']) }}"
                    class="sy-nav__link"
                    @if (request()->routeIs($link['route'])) aria-current="page" @endif
                >{{ $link['label'] }}</a>
            @endforeach

            <button
                type="button"
                class="sy-nav__theme"
                :class="{ 'is-day': theme === 'day' }"
                @click="toggleTheme()"
                :aria-label="theme === 'night' ? 'Switch to light mode' : 'Switch to dark mode'"
                title="Toggle light / dark mode"
            >
                <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 18h6"/>
                    <path d="M10 21h4"/>
                    <path d="M12 3a6 6 0 0 0-3.7 10.7c.6.5.9 1 1 1.8h5.4c.1-.8.4-1.3 1-1.8A6 6 0 0 0 12 3Z"/>
                </svg>
            </button>
        </div>

        {{-- Mobile toggle --}}
        <button
            type="button"
            class="flex flex-col gap-[6px] p-2 lg:hidden"
            @click="open = !open"
            :aria-expanded="open"
            aria-label="Toggle menu"
        >
            <span class="block h-px w-7 bg-white transition" :class="open && 'translate-y-[7px] rotate-45'"></span>
            <span class="block h-px w-7 bg-white transition" :class="open && 'opacity-0'"></span>
            <span class="block h-px w-7 bg-white transition" :class="open && '-translate-y-[7px] -rotate-45'"></span>
        </button>
    </div>

    {{-- Mobile menu --}}
    <div
        x-show="open"
        x-transition.opacity
        x-cloak
        class="border-t border-white/10 bg-ink/95 backdrop-blur-md lg:hidden"
    >
        <div class="sy-container flex flex-col gap-6 py-8">
            @foreach ($links as $link)
                <a
                    href="{{ route($link['route']) }}"
                    class="sy-nav__link"
                    @click="open = false"
                    @if (request()->routeIs($link['route'])) aria-current="page" @endif
                >{{ $link['label'] }}</a>
            @endforeach

            <button
                type="button"
                class="sy-nav__link sy-nav__theme-row"
                :class="{ 'is-day': theme === 'day' }"
                @click="toggleTheme()"
            >
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 18h6"/>
                    <path d="M10 21h4"/>
                    <path d="M12 3a6 6 0 0 0-3.7 10.7c.6.5.9 1 1 1.8h5.4c.1-.8.4-1.3 1-1.8A6 6 0 0 0 12 3Z"/>
                </svg>
                <span x-text="theme === 'night' ? 'Light Mode' : 'Dark Mode'"></span>
            </button>
        </div>
    </div>
</nav>