<header class="relative">
    <!-- Top Bar -->
    <div class="bg-emerald-800 text-white text-sm hidden lg:block">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-9">
                <div class="flex items-center space-x-5">
                    <span class="text-emerald-200"><i class="fas fa-truck mr-1.5"></i>Free delivery on orders over $150</span>
                    <span class="text-emerald-300">|</span>
                    <span class="text-emerald-200"><i class="fas fa-undo mr-1.5"></i>30-day easy returns</span>
                </div>
                <div class="flex items-center space-x-5">
                    <div class="flex space-x-3">
                        <a href="#" class="text-emerald-200 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-emerald-200 hover:text-white transition"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-emerald-200 hover:text-white transition"><i class="fab fa-tiktok"></i></a>
                    </div>
                    <span class="text-emerald-300">|</span>
                    <div class="relative group">
                        <button class="text-emerald-200 hover:text-white transition flex items-center gap-1.5 text-xs uppercase tracking-wider font-medium" id="languageDropdown">
                            <i class="fas fa-globe mr-1"></i> EN <i class="fas fa-chevron-down text-[8px] ml-0.5"></i>
                        </button>
                        <div class="absolute right-0 mt-1.5 w-32 bg-white rounded-lg shadow-xl border border-gray-100 py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <a href="#" class="block px-4 py-2 text-xs text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 font-medium">English</a>
                            <a href="#" class="block px-4 py-2 text-xs text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 font-medium">Spanish</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Header -->
    <div class="bg-white border-b border-gray-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 lg:h-20">
                <!-- Mobile Menu Toggle -->
                <button class="lg:hidden p-2 -ml-2 text-gray-600 hover:text-emerald-600" type="button" onclick="toggleMobileMenu()">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>

                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex-shrink-0">
                    <img src="{{ asset('images/aphro_logod.png') }}" class="h-10 lg:h-12 w-auto" alt="Aphrodailymart">
                </a>

                <!-- Search Bar (Desktop) -->
                <form action="{{ route('search') }}" method="GET" class="hidden md:block flex-1 max-w-xl mx-6 lg:mx-10">
                    <div class="relative">
                        <input type="search" name="query" placeholder="Search for products, categories..." class="w-full pl-4 pr-12 py-2.5 bg-gray-50 border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white transition-all placeholder:text-gray-400">
                        <button type="submit" class="absolute right-1.5 top-1/2 -translate-y-1/2 bg-emerald-600 hover:bg-emerald-700 text-white p-2 rounded-full transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </button>
                    </div>
                </form>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-1 lg:space-x-3">
                    <!-- Track (Desktop) -->
                    <a href="/order/track" class="hidden lg:flex items-center px-3 py-2 text-gray-600 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50 text-sm font-medium">
                        <svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
                        <span class="hidden xl:inline">Track Order</span>
                    </a>

                    <!-- Cart -->
                    <a href="{{ route('cart.index') }}" class="relative p-2.5 text-gray-600 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        <span id="cart-count-badge" data-cart-count class="absolute -top-0.5 -right-0.5 inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-emerald-600 rounded-full">{{ session('cart') ? array_sum(array_column(session('cart'), 'quantity')) : 0 }}</span>
                    </a>

                    <!-- Sign In / Account -->
                    @guest
                        <a href="{{ route('login') }}" class="hidden sm:inline-flex items-center px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-full transition-colors">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            Sign In
                        </a>
                    @else
                        <div class="relative group">
                            <button class="flex items-center p-2.5 text-gray-600 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            </button>
                            <div class="absolute right-0 mt-2 w-52 bg-white rounded-xl shadow-xl border border-gray-100 py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                                <div class="px-4 py-2 border-b border-gray-100">
                                    <p class="text-sm font-semibold text-gray-800">{{ auth()->user()->name ?? 'User' }}</p>
                                    <p class="text-xs text-gray-500">{{ auth()->user()->email ?? '' }}</p>
                                </div>
                                <a href="/account/" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700"><svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg> Dashboard</a>
                                <a href="{{ route('account.orders') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700"><svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg> My Orders</a>
                                <a href="{{ route('account.settings') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700"><svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Settings</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <form method="POST" action="{{ route('logout') }}" id="logout-form">
                                    @csrf
                                    <button type="submit" class="flex items-center w-full px-4 py-2.5 text-sm text-red-600 hover:bg-red-50"><svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg> Sign Out</button>
                                </form>
                            </div>
                        </div>
                    @endguest

                    <!-- Mobile Search Toggle -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-emerald-600" type="button" onclick="document.getElementById('mobileSearch').classList.toggle('hidden')">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Search Bar -->
    <div class="hidden md:hidden bg-white border-b border-gray-100 px-4 py-3" id="mobileSearch">
        <form action="{{ route('search') }}" method="GET">
            <div class="relative">
                <input type="search" name="query" placeholder="Search products..." class="w-full pl-4 pr-12 py-2.5 bg-gray-50 border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                <button type="submit" class="absolute right-1.5 top-1/2 -translate-y-1/2 bg-emerald-600 text-white p-2 rounded-full"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></button>
            </div>
        </form>
    </div>

    <!-- Category Navigation -->
    <nav class="bg-gradient-to-r from-emerald-700 via-emerald-600 to-emerald-500 shadow-sm sticky top-0 z-40">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-12">
                <!-- Mobile: toggle + scroll -->
                <button class="lg:hidden p-1.5 text-white/80 hover:text-white" type="button" onclick="toggleCategoryMenu()">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
                <div class="flex lg:hidden items-center gap-1 overflow-x-auto w-full scrollbar-hide py-1 mx-2">
                    <a href="/products/index" class="flex-shrink-0 px-3 py-1.5 text-white/90 hover:text-white text-xs font-medium bg-white/10 hover:bg-white/20 rounded-full transition-colors whitespace-nowrap">All</a>
                    @foreach($categories->take(6) as $category)
                        <a href="{{ route('category.show', $category->slug) }}" class="flex-shrink-0 px-3 py-1.5 text-white/90 hover:text-white text-xs font-medium bg-white/10 hover:bg-white/20 rounded-full transition-colors whitespace-nowrap">{{ $category->name }}</a>
                    @endforeach
                </div>

                <div class="hidden lg:flex lg:items-center w-full" id="navbarNav">
                    <ul class="flex flex-row items-center w-full">
                        <li class="group" style="position:static">
                            <a href="/products/index" class="flex items-center px-4 py-3 text-white/90 hover:text-white text-sm font-medium border-r border-white/10 transition-colors gap-1.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                                All Products
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </a>
                            <div class="absolute left-0 right-0 top-full bg-white shadow-2xl border-t-4 border-emerald-500 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 rounded-b-2xl overflow-hidden">
                                <div class="container mx-auto">
                                    <div class="bg-gradient-to-r from-emerald-50 to-white px-8 py-4 border-b border-gray-100">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
                                                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                                                </div>
                                                <div>
                                                    <h3 class="text-base font-bold text-gray-800">Shop by Category</h3>
                                                    <p class="text-xs text-gray-500">Find exactly what you need</p>
                                                </div>
                                            </div>
                                            <a href="/products/index" class="group/btn inline-flex items-center gap-1.5 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-lg transition-all shadow-sm hover:shadow-md">
                                                View All
                                                <svg class="w-3.5 h-3.5 transition-transform group-hover/btn:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="px-8 py-6">
                                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
                                            @foreach($categories as $category)
                                                <div class="group/cat rounded-xl p-3 transition-all duration-200 hover:bg-emerald-50 hover:shadow-sm hover:-translate-y-0.5 border border-transparent hover:border-emerald-100">
                                                    <a href="{{ route('category.show', $category->slug) }}" class="flex items-center gap-2 text-emerald-700 font-semibold text-sm mb-2 pb-1.5 border-b border-emerald-100 group-hover/cat:border-emerald-300 transition-all">
                                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 group-hover/cat:bg-emerald-600 transition-colors"></span>
                                                        {{ $category->name }}
                                                    </a>
                                                    @if($category->subcategories->count() > 0)
                                                        <ul class="space-y-0.5">
                                                            @foreach($category->subcategories as $subcategory)
                                                                <li>
                                                                    <a href="{{ route('subcategory.show', ['category' => $category->slug, 'subcategory' => $subcategory->slug]) }}" class="block px-2 py-1 text-sm text-gray-500 hover:text-emerald-700 rounded-md hover:bg-white transition-all">{{ $subcategory->name }}</a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        @foreach($categories->take(4) as $category)
                            <li class="relative group">
                                <a href="{{ route('category.show', $category->slug) }}" class="flex items-center px-4 py-3 text-white/90 hover:text-white text-sm font-medium border-r border-white/10 transition-colors gap-1">
                                    {{ $category->name }}
                                    @if($category->subcategories->count() > 0)
                                        <svg class="w-3 h-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                    @endif
                                </a>
                                @if($category->subcategories->count() > 0)
                                    <div class="absolute left-0 top-full bg-white rounded-b-xl shadow-2xl border-t-2 border-emerald-400 py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 min-w-[200px] origin-top">
                                        <div class="py-1">
                                            @foreach($category->subcategories as $subcategory)
                                                <a href="{{ route('subcategory.show', ['category' => $category->slug, 'subcategory' => $subcategory->slug]) }}" class="flex items-center gap-3 px-5 py-2.5 text-sm text-gray-600 hover:text-emerald-700 hover:bg-emerald-50 transition-all">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-gray-300 hover:bg-emerald-500 transition-colors"></span>
                                                    {{ $subcategory->name }}
                                                </a>
                                            @endforeach
                                        </div>
                                        <div class="border-t border-gray-50 px-5 py-2">
                                            <a href="{{ route('category.show', $category->slug) }}" class="text-xs text-emerald-600 hover:text-emerald-700 font-medium transition-colors">View All →</a>
                                        </div>
                                    </div>
                                @endif
                            </li>
                        @endforeach

                        <li class="ml-auto">
                            <a href="{{ route('contact') }}" class="flex items-center px-4 py-3 text-white/90 hover:text-white text-sm font-medium transition-colors">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                Contact
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('blog.index') }}" class="flex items-center px-4 py-3 text-white/90 hover:text-white text-sm font-medium transition-colors">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                                Blog
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- Category Dropdown (Mobile) -->
    <div class="hidden lg:hidden bg-emerald-800 border-t border-emerald-500 shadow-xl" id="categoryDropdown">
        <div class="container mx-auto px-4 py-3">
            <div class="grid grid-cols-2 gap-2">
                <a href="/products/index" class="flex items-center gap-2 px-3 py-2.5 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                    All Products
                </a>
                @foreach($categories as $category)
                    <a href="{{ route('category.show', $category->slug) }}" class="flex items-center gap-2 px-3 py-2.5 bg-white/10 hover:bg-white/20 text-white/90 hover:text-white text-sm font-medium rounded-lg transition-colors">
                        <span class="w-2 h-2 rounded-full bg-emerald-300 flex-shrink-0"></span>
                        {{ $category->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <div class="fixed inset-0 bg-black/50 z-[60] hidden lg:hidden" id="mobileMenuOverlay" onclick="toggleMobileMenu()"></div>
    <div class="fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-white z-[70] shadow-2xl" id="mobileMenu">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between p-4 border-b border-gray-100">
                <img src="{{ asset('images/aphro_logod.png') }}" class="h-8 w-auto" alt="Aphrodailymart">
                <button class="p-1.5 text-gray-400 hover:text-gray-600" type="button" onclick="toggleMobileMenu()">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-4">
                <div class="space-y-1">
                    <button onclick="toggleMobileAccordion('all')" class="flex items-center justify-between w-full px-3 py-2.5 text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg text-sm font-medium transition-colors">
                        <span class="flex items-center">
                            <svg class="w-5 h-5 mr-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                            All Products
                        </span>
                        <svg class="w-4 h-4 transition-transform mobile-chevron-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div id="mobileSub-all" class="ml-5 space-y-1 hidden border-l-2 border-emerald-100 pl-3">
                        <a href="/products/index" class="flex items-center px-3 py-2 text-sm text-emerald-700 hover:bg-emerald-50 rounded-lg font-medium transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            View All Products
                        </a>
                        @foreach($categories as $category)
                            <div class="rounded-lg">
                                <a href="{{ route('category.show', $category->slug) }}" class="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg transition-colors font-medium">
                                    {{ $category->name }}
                                </a>
                                @if($category->subcategories->count() > 0)
                                    <div class="ml-3 mt-0.5 space-y-0.5">
                                        @foreach($category->subcategories as $subcategory)
                                            <a href="{{ route('subcategory.show', ['category' => $category->slug, 'subcategory' => $subcategory->slug]) }}" class="block px-3 py-1.5 text-sm text-gray-500 hover:text-emerald-700 rounded-lg hover:bg-emerald-50 transition-colors">{{ $subcategory->name }}</a>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="border-t border-gray-100 mt-4 pt-4 space-y-1">
                    <a href="{{ route('home') }}" class="flex items-center px-3 py-2.5 text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg text-sm font-medium transition-colors">
                        <svg class="w-5 h-5 mr-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                        Home
                    </a>
                    <a href="{{ route('contact') }}" class="flex items-center px-3 py-2.5 text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg text-sm font-medium transition-colors">
                        <svg class="w-5 h-5 mr-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        Contact Us
                    </a>
                    <a href="{{ route('blog.index') }}" class="flex items-center px-3 py-2.5 text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg text-sm font-medium transition-colors">
                        <svg class="w-5 h-5 mr-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                        Blog
                    </a>
                </div>
            </div>
            @guest
            <div class="p-4 border-t border-gray-100">
                <a href="{{ route('login') }}" class="flex items-center justify-center px-4 py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-full transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>
                    Sign In
                </a>
            </div>
            @endguest
        </div>
    </div>

    <script>
    function toggleMobileAccordion(index) {
        var sub = document.getElementById('mobileSub-' + index);
        var chevron = document.querySelector('.mobile-chevron-' + index);
        if (sub) {
            sub.classList.toggle('hidden');
            if (chevron) chevron.classList.toggle('rotate-180');
        }
    }

    function toggleMobileMenu() {
        var menu = document.getElementById('mobileMenu');
        var overlay = document.getElementById('mobileMenuOverlay');
        if (!menu) return;

        if (!menu.classList.contains('menu--open')) {
            menu.classList.add('menu--open');
            overlay.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        } else {
            menu.classList.remove('menu--open');
            overlay.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    }

    function toggleCategoryMenu() {
        var dropdown = document.getElementById('categoryDropdown');
        if (dropdown) {
            if (dropdown.classList.contains('hidden')) {
                dropdown.classList.remove('hidden');
            } else {
                dropdown.classList.add('hidden');
            }
        }
    }
    </script>
</header>

<style>
.rotate-180 { transform: rotate(180deg); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
#mobileMenu { transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
#mobileMenu.menu--open { transform: translateX(0); }
</style>
