@props(['title' => 'Blog', 'logo' => null])

<header x-data="{ mobileOpen: false, scrolled: false }"
    x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 8)"
    :class="scrolled ? 'shadow-md' : 'shadow-sm'"
    class="sticky top-0 z-[9999] bg-white transition-shadow duration-200">

    <!-- Top bar -->
    <div class="border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 gap-4">

                <!-- Logo -->
                <a href="{{ config('filamentblog.route.home.url') ?? config('app.url') }}" class="flex items-center gap-2.5 shrink-0">
                    <img src="{{ $logo ?: asset('images/logo.png') }}" alt="Logo" class="h-9 w-auto">
                    <span class="text-xl font-extrabold text-gray-900 tracking-tight leading-none">
                        {{ $title ?: config('app.name', 'Natagara News') }}
                    </span>
                </a>

                <!-- Desktop Nav -->
                <nav class="hidden md:flex items-center gap-6">
                    <a href="{{ route('filamentblog.post.index') }}"
                        class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors {{ request()->routeIs('filamentblog.post.index') ? 'text-gray-900 font-semibold' : '' }}">
                        Beranda
                    </a>
                    <a href="{{ route('filamentblog.post.all') }}"
                        class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors {{ request()->routeIs('filamentblog.post.all') ? 'text-gray-900 font-semibold' : '' }}">
                        Semua Artikel
                    </a>

                    <!-- Categories Dropdown -->
                    <div class="relative group">
                        <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors py-2">
                            Kategori
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 transition-transform group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="absolute left-0 top-full pt-1 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-150 origin-top-left">
                            <div class="bg-white border border-gray-100 rounded-xl shadow-xl overflow-hidden min-w-[180px]">
                                <x-blog-header-category />
                            </div>
                        </div>
                    </div>


                </nav>

                <!-- Search & Mobile toggle -->
                <div class="flex items-center gap-3 ml-auto">
                    <!-- Search -->
                    <form action="{{ route('filamentblog.post.search') }}" method="GET" class="hidden sm:block">
                        <div class="relative">
                            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <input type="text" name="query" value="{{ request('query') }}"
                                placeholder="Cari artikel..."
                                class="w-52 pl-10 pr-4 py-2 text-sm bg-gray-50 border border-gray-200 rounded-full outline-none focus:bg-white focus:border-gray-400 focus:w-64 transition-all duration-200 placeholder-gray-400">
                            @error('query')
                                <p class="absolute top-full mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </form>

                    <!-- Mobile menu button -->
                    <button @click="mobileOpen = !mobileOpen" class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                        <svg x-show="!mobileOpen" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg x-show="mobileOpen" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile menu -->
    <div x-show="mobileOpen" x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0" class="md:hidden bg-white border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 py-4 space-y-1">
            <!-- Mobile search -->
            <form action="{{ route('filamentblog.post.search') }}" method="GET" class="mb-3">
                <div class="relative">
                    <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <input type="text" name="query" value="{{ request('query') }}" placeholder="Cari artikel..."
                        class="w-full pl-10 pr-4 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-gray-400 placeholder-gray-400">
                </div>
            </form>
            <a href="{{ route('filamentblog.post.index') }}" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Beranda</a>
            <a href="{{ route('filamentblog.post.all') }}" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Semua Artikel</a>
            

        </div>
    </div>
</header>