<div class="announcement-bar">
    Free delivery across Pakistan on orders over Rs. 5,000 &middot; Cash on Delivery available nationwide
</div>

<nav class="navbar navbar-expand-lg site-navbar py-3 sticky-top">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-2" href="{{ route('home') }}">
            <img src="{{ asset('images/logo.jpg') }}" alt="Home Heaven Decors PK" style="width:44px;height:44px;object-fit:cover;border-radius:50%;">
            <span>Home Heaven Decors <span class="text-terracotta">PK</span></span>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ request()->routeIs('shop.*') ? 'active' : '' }}" href="{{ route('shop.index') }}" data-bs-toggle="dropdown">Shop</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ route('shop.index') }}">All Products</a></li>
                        @foreach($navCategories ?? [] as $cat)
                            <li><a class="dropdown-item" href="{{ route('shop.index', ['category' => $cat->slug]) }}">{{ $cat->name }}</a></li>
                        @endforeach
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('shop.index') }}#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url('/#contact') }}">Contact</a>
                </li>
            </ul>

            <div class="d-flex align-items-center gap-3 mt-3 mt-lg-0">
                <form action="{{ route('shop.index') }}" method="GET" class="d-none d-md-flex">
                    <input type="search" name="search" value="{{ request('search') }}" class="form-control form-control-sm" placeholder="Search products..." style="min-width:200px;">
                </form>

                @auth
                    <div class="dropdown">
                        <a href="#" class="d-flex align-items-center" data-bs-toggle="dropdown" title="{{ auth()->user()->name }}">
                            <img src="{{ auth()->user()->avatarUrl(64) }}" alt="{{ auth()->user()->name }}" class="rounded-circle" style="width:34px;height:34px;object-fit:cover;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li class="px-3 py-2 d-flex align-items-center gap-2">
                                <img src="{{ auth()->user()->avatarUrl(80) }}" alt="{{ auth()->user()->name }}" class="rounded-circle" style="width:40px;height:40px;object-fit:cover;">
                                <div>
                                    <div class="fw-semibold small">{{ auth()->user()->name }}</div>
                                    <div class="text-muted-soft" style="font-size:0.75rem;">{{ auth()->user()->email }}</div>
                                </div>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('account.profile') }}">My Account</a></li>
                            <li><a class="dropdown-item" href="{{ route('account.orders.index') }}">My Orders</a></li>
                            <li><a class="dropdown-item" href="{{ route('account.addresses.index') }}">Addresses</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item">Logout</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                @else
                    <a href="{{ route('login') }}" class="fs-5" title="Login"><i class="bi bi-person"></i></a>
                @endauth

                <a href="{{ route('cart.index') }}" class="position-relative fs-5" title="Cart">
                    <i class="bi bi-bag"></i>
                    @if(($cartItemCount ?? 0) > 0)
                        <span class="cart-badge">{{ $cartItemCount }}</span>
                    @endif
                </a>
            </div>
        </div>
    </div>
</nav>
