@php
    $navLinks = [
        ['label' => 'Services', 'route' => 'services.show'],
        ['label' => 'Pricing', 'route' => 'pricing.index'],
        ['label' => 'Blog', 'route' => 'blog.index'],
        ['label' => 'FAQ', 'route' => 'faq.index'],
        ['label' => 'About', 'route' => 'about'],
        ['label' => 'Contact', 'route' => 'contact.show'],
    ];
@endphp

<header class="sticky top-0 z-50 border-b border-slate-200/80 bg-white/80 backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/80">
    <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8" aria-label="Main navigation">
        <x-public.logo />

        <div class="hidden items-center gap-8 lg:flex">
            @foreach ($navLinks as $link)
                <a
                    href="{{ route($link['route']) }}"
                    class="text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-white"
                >
                    {{ $link['label'] }}
                </a>
            @endforeach
        </div>

        <div class="flex items-center gap-3">
            <button
                type="button"
                data-dark-toggle
                class="rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
                aria-label="Toggle dark mode"
            >
                <svg class="hidden h-5 w-5 dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1.5m0 15V21m9-9h-1.5m-15 0H3m15.36-6.36-1.06 1.06M6.7 17.3l-1.06 1.06m12.73 0-1.06-1.06M6.7 6.7 5.64 5.64M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z" />
                </svg>
                <svg class="block h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.598.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
                </svg>
            </button>

            <div class="hidden items-center gap-3 sm:flex">
                @auth
                    <a
                        href="/dashboard"
                        class="rounded-full bg-brand-600 px-5 py-2 text-sm font-semibold text-white shadow-brand-glow transition hover:bg-brand-700"
                    >
                        Dashboard
                    </a>
                @else
                    <a href="{{ route('login') }}" class="text-sm font-semibold text-slate-700 hover:text-brand-600 dark:text-slate-200 dark:hover:text-white">
                        Log in
                    </a>
                    <a
                        href="{{ route('register') }}"
                        class="rounded-full bg-brand-600 px-5 py-2 text-sm font-semibold text-white shadow-brand-glow transition hover:bg-brand-700"
                    >
                        Sign up free
                    </a>
                @endauth
            </div>

            <button
                type="button"
                data-mobile-nav-toggle
                class="rounded-md p-2 text-slate-600 lg:hidden dark:text-slate-300"
                aria-label="Open main menu"
                aria-expanded="false"
            >
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
                </svg>
            </button>
        </div>
    </nav>

    <div data-mobile-nav-panel class="hidden border-t border-slate-200 px-4 pb-6 lg:hidden dark:border-slate-800">
        <div class="flex flex-col gap-1 pt-4">
            @foreach ($navLinks as $link)
                <a
                    href="{{ route($link['route']) }}"
                    class="rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
                >
                    {{ $link['label'] }}
                </a>
            @endforeach
        </div>
        <div class="mt-4 flex flex-col gap-2 border-t border-slate-200 pt-4 dark:border-slate-800">
            @auth
                <a href="/dashboard" class="rounded-full bg-brand-600 px-5 py-2 text-center text-sm font-semibold text-white">Dashboard</a>
            @else
                <a href="{{ route('login') }}" class="rounded-full px-5 py-2 text-center text-sm font-semibold text-slate-700 dark:text-slate-200">Log in</a>
                <a href="{{ route('register') }}" class="rounded-full bg-brand-600 px-5 py-2 text-center text-sm font-semibold text-white">Sign up free</a>
            @endauth
        </div>
    </div>
</header>