@php
    $isHome = request()->routeIs(
        'pages.home',
        'pages.about',
        'pages.free-trial',
        'pages.spa.*',
        'pages.news.*',
        'pages.facilities.*',
        'pages.courses.week',
        'pages.courses.show',
        'pages.coaches.index',
        'pages.coaches.show'
    );
@endphp

<header
    x-data="{
        open: false,
        hideLogo: false,
        isMobile: false,
        init() {
            const mq = window.matchMedia('(max-width: 767px)');
            const updateIsMobile = () => {
                this.isMobile = mq.matches;
                if (!this.isMobile) this.hideLogo = false;
            };

            updateIsMobile();
            if (mq.addEventListener) mq.addEventListener('change', updateIsMobile);
            else mq.addListener(updateIsMobile);

            const onScroll = () => {
                if (!this.isMobile) return;
                this.hideLogo = window.scrollY > 200;
            };
            window.addEventListener('scroll', onScroll, { passive: true });
            onScroll();
        },
    }"
    x-on:keydown.escape.window="open = false"
    class="{{ $isHome
        ? 'pointer-events-none fixed top-0 left-0 w-full z-50 px-6 py-6 md:px-12 md:py-10 text-white drop-shadow-[0_2px_14px_rgba(0,0,0,0.55)]'
        : 'sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur px-4 py-3'
    }}"
>
    <div class="mx-auto max-w-7xl">
        <div class="flex items-start justify-between">
            <a
                href="{{ route('pages.home') }}"
                class="pointer-events-auto relative z-50 inline-flex items-center transition-all duration-300 ease-out will-change-transform"
                x-bind:class="hideLogo ? '-translate-y-24 opacity-0 pointer-events-none' : 'translate-y-0 opacity-100'"
                aria-label="{{ config('app.name') }}"
            >
                <img
                    src="{{ asset('assets/img/logo.png') }}"
                    alt="{{ config('app.name') }}"
                    class="block h-[130px] w-auto"
                    loading="eager"
                    decoding="async"
                >
            </a>

            <div class="pointer-events-auto relative z-50 flex items-center gap-3">
                <a
                    href="{{ route('pages.free-trial') }}"
                    class="relative z-[50] inline-flex h-11 w-11 items-center justify-center rounded-full bg-neutral-900 text-white backdrop-blur transition-colors hover:bg-neutral-800"
                    aria-label="預約免費體驗"
                    title="預約免費體驗"
                >
                    <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" aria-hidden="true">
                        <path
                            d="M12 20h9"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                        />
                        <path
                            d="M16.5 3.5a2.121 2.121 0 0 1 3 3L8 18l-4 1 1-4L16.5 3.5z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linejoin="round"
                        />
                    </svg>
                </a>

                <button
                    type="button"
                    class="group relative z-[70] inline-flex items-center gap-3 rounded-full bg-neutral-900 px-5 py-3 text-white backdrop-blur cursor-pointer"
                    x-on:click.stop="open = !open"
                    x-bind:aria-expanded="open.toString()"
                    aria-controls="ms-menu-panel"
                    aria-label="Toggle menu"
                >
                    <span class="text-sm font-semibold tracking-wide uppercase" x-text="open ? 'Close' : 'Menu'"></span>

                    <span class="relative w-5 h-5" aria-hidden="true">
                        <span
                            class="absolute left-0 top-[6px] h-0.5 w-full rounded bg-white transition-all duration-300 ease-out group-hover:top-1/2 group-hover:-translate-y-1/2"
                            x-bind:class="open ? 'top-1/2 -translate-y-1/2 rotate-45' : ''"
                        ></span>
                        <span
                            class="absolute left-0 top-[12px] h-0.5 w-full rounded bg-white transition-all duration-300 ease-out group-hover:top-1/2 group-hover:-translate-y-1/2"
                            x-bind:class="open ? 'top-1/2 -translate-y-1/2 -rotate-45' : ''"
                        ></span>
                    </span>
                </button>

                {{-- <div
                    x-show="open"
                    x-cloak
                    x-transition.opacity
                    class="fixed inset-0 z-[55] bg-black/40"
                    x-on:click="open = false"
                    aria-hidden="true"
                ></div> --}}

                <nav
                    id="ms-menu-panel"
                    aria-label="Main menu"
                    x-show="open"
                    x-cloak
                    x-transition
                    class="absolute right-0 top-0 z-[60] w-72 origin-top-right rounded-[30px] bg-neutral-900 text-white pt-16 px-10 pb-12 shadow-2xl"
                >
                    <div class="ml-2">
                        <div class="flex items-center gap-3 pb-5">
                            <span class="h-1.5 w-1.5 rounded-full bg-white"></span>
                            <span class="text-xs uppercase tracking-[0.18em] text-white/40">Menu</span>
                        </div>

                        <ul class="m-0 list-none border-l border-dashed border-white/20 p-0">
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] bg-red-500 opacity-0 transition-opacity group-hover:opacity-100"></span>
                                <a href="{{ route('pages.about') }}" class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2" x-on:click="open = false">關於我們</a>
                            </li>
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] bg-red-500 opacity-0 transition-opacity group-hover:opacity-100"></span>
                                <a href="{{ route('pages.news.index') }}" class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2" x-on:click="open = false">最新消息</a>
                            </li>
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] bg-red-500 opacity-0 transition-opacity group-hover:opacity-100"></span>
                                <a href="{{ route('pages.courses.week') }}" class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2" x-on:click="open = false">本週課表</a>
                            </li>
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] bg-red-500 opacity-0 transition-opacity group-hover:opacity-100"></span>
                                <a href="{{ route('pages.facilities.show', ['slug' => 'anping']) }}" class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2" x-on:click="open = false">設施介紹</a>
                            </li>
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] bg-red-500 opacity-0 transition-opacity group-hover:opacity-100"></span>
                                <a href="{{ route('pages.coaches.index') }}" class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2" x-on:click="open = false">菁英教練群</a>
                            </li>
                            <li class="relative group">
                                <span class="absolute left-[-1px] top-0 h-full w-[2px] {{ request()->routeIs('pages.spa.*') ? 'bg-[#b6c800] opacity-100' : 'bg-[#b6c800] opacity-0 transition-opacity group-hover:opacity-100' }}"></span>
                                <a
                                    href="{{ route('pages.spa.index') }}"
                                    class="block py-2 pl-8 text-xl font-medium transition-transform group-hover:translate-x-2 {{ request()->routeIs('pages.spa.*') ? 'text-[#b6c800]' : '' }}"
                                    x-on:click="open = false"
                                >
                                    怡SPA
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
