@use('App\Models\Setting')
@php
$links = [
    ['Home', 'home', 'home'], ['About', 'about', 'about'], ['Members', 'members.index', 'members.*'],
    ['Events', 'events.index', 'events.*'], ['Committee', 'committee', 'committee'],
    ['Achievements', 'achievements', 'achievements'], ['Join', 'join', 'join'],
];
@endphp
<header x-data="{ open: false }" class="sticky top-0 z-50 border-b border-slate-200/60 bg-white/60 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-950/50">
    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
        <a href="{{ route('home') }}" class="flex min-w-0 items-center gap-3">
            <x-logo class="h-9 w-9 shrink-0" />
            <span class="truncate text-sm font-bold text-slate-900 dark:text-white sm:text-base">{{ Setting::get('club_name', 'UU Computer Programming Club') }}</span>
        </a>

        <nav class="hidden items-center gap-1 lg:flex" aria-label="Main">
            @foreach($links as [$label, $route, $pattern])
                <a href="{{ route($route) }}" @class(['rounded-lg px-3 py-2 text-sm font-medium transition', 'bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300' => request()->routeIs($pattern), 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800' => ! request()->routeIs($pattern)])>{{ $label }}</a>
            @endforeach
        </nav>

        <div class="flex items-center gap-2">
            <button type="button" @click="$store.theme.toggle()" class="rounded-xl p-2 text-slate-600 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800" aria-label="Toggle dark mode">
                <x-icon name="sun" class="hidden h-5 w-5 dark:block"/><x-icon name="moon" class="h-5 w-5 dark:hidden"/>
            </button>
            @auth
                <a href="{{ route('dashboard') }}" class="btn btn-primary hidden lg:inline-flex">Dashboard</a>
            @else
                <a href="{{ route('login') }}" class="btn btn-primary hidden lg:inline-flex">Log in</a>
            @endauth
            <button type="button" @click="open = !open" class="rounded-xl p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden" aria-label="Menu" :aria-expanded="open">
                <x-icon name="menu" x-show="!open" class="h-6 w-6"/><x-icon name="x" x-show="open" x-cloak class="h-6 w-6"/>
            </button>
        </div>
    </div>

    <div x-show="open" x-cloak x-transition class="border-t border-slate-200/60 bg-white/90 px-4 pb-4 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/90 lg:hidden">
        <nav class="flex flex-col gap-1 py-3">
            @foreach($links as [$label, $route, $pattern])
                <a href="{{ route($route) }}" @class(['rounded-lg px-3 py-2.5 text-sm font-medium', 'bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300' => request()->routeIs($pattern), 'text-slate-700 dark:text-slate-300' => ! request()->routeIs($pattern)])>{{ $label }}</a>
            @endforeach
        </nav>
        @auth
            <a href="{{ route('dashboard') }}" class="btn btn-primary w-full">Dashboard</a>
        @else
            <a href="{{ route('login') }}" class="btn btn-primary w-full">Log in</a>
        @endauth
    </div>
</header>