@php
    $siteName = app()->getLocale() === 'bn' ? settings('site_name_bn', settings('site_name', 'Offer Hat')) : settings('site_name', 'Offer Hat');
    $logo = settings('logo');
@endphp
<div class="top-bar py-1 d-none d-md-block">
    <div class="container d-flex justify-content-between align-items-center">
        <span><i class="bi bi-megaphone me-1"></i>{{ settings('top_bar_text', __('Cash on Delivery nationwide')) }}</span>
        <div class="d-flex align-items-center gap-3">
            <a href="tel:{{ settings('contact_phone') }}" class="text-white"><i class="bi bi-telephone me-1"></i>{{ settings('contact_phone') }}</a>
            <span class="vr"></span>
            @foreach(config('shop.locales') as $code => $label)
                <a href="{{ route('locale.switch', $code) }}"
                   class="text-white {{ app()->getLocale() === $code ? 'fw-bold text-decoration-underline' : 'opacity-75' }}">{{ $label }}</a>
            @endforeach
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg bg-white shadow-sm sticky-top-nav">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="{{ route('home') }}">
            @if($logo)<img src="{{ \Illuminate\Support\Facades\Storage::url($logo) }}" alt="{{ $siteName }}" style="height:38px">@else{{ $siteName }}@endif
        </a>

        <form action="{{ route('shop') }}" method="GET" class="d-none d-lg-flex flex-grow-1 mx-4" style="max-width:560px">
            <div class="input-group">
                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="{{ __('Search products...') }}">
                <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
            </div>
        </form>

        <div class="d-flex align-items-center gap-2 gap-lg-3">
            @auth
                @if(auth()->user()->isAdmin())
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-sm btn-outline-secondary d-none d-md-inline"><i class="bi bi-speedometer2"></i></a>
                @endif
                <a href="{{ route('account.wishlist') }}" class="position-relative text-dark fs-5" title="{{ __('Wishlist') }}"><i class="bi bi-heart"></i></a>
                <div class="dropdown">
                    <a href="#" class="text-dark fs-5" data-bs-toggle="dropdown"><i class="bi bi-person-circle"></i></a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="{{ route('account.dashboard') }}">{{ __('My Account') }}</a></li>
                        <li><a class="dropdown-item" href="{{ route('account.orders') }}">{{ __('Order Details') }}</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form action="{{ route('logout') }}" method="POST">@csrf
                                <button class="dropdown-item" type="submit">{{ __('Logout') }}</button>
                            </form>
                        </li>
                    </ul>
                </div>
            @else
                <a href="{{ route('login') }}" class="text-dark fs-5" title="{{ __('Login') }}"><i class="bi bi-person-circle"></i></a>
            @endauth

            <a href="{{ route('cart.index') }}" class="position-relative text-dark fs-5" title="{{ __('Cart') }}">
                <i class="bi bi-cart3"></i>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary" style="font-size:.6rem">{{ $cartCount ?? 0 }}</span>
            </a>
        </div>
    </div>
</nav>

<div class="cat-bar d-none d-lg-block">
    <div class="container">
        <ul class="nav">
            <li class="nav-item"><a class="nav-link fw-semibold" href="{{ route('home') }}"><i class="bi bi-house-door me-1"></i>{{ __('Home') }}</a></li>
            <li class="nav-item"><a class="nav-link" href="{{ route('shop') }}">{{ __('Shop') }}</a></li>
            @foreach(($navCategories ?? []) as $cat)
                @if($cat->children->isNotEmpty())
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="{{ route('category', $cat->slug) }}" data-bs-toggle="dropdown">{{ $cat->title }}</a>
                        <ul class="dropdown-menu">
                            @foreach($cat->children as $child)
                                <li><a class="dropdown-item" href="{{ route('category', $child->slug) }}">{{ $child->title }}</a></li>
                            @endforeach
                        </ul>
                    </li>
                @else
                    <li class="nav-item"><a class="nav-link" href="{{ route('category', $cat->slug) }}">{{ $cat->title }}</a></li>
                @endif
            @endforeach
            <li class="nav-item"><a class="nav-link" href="{{ route('blog.index') }}">{{ __('Blog') }}</a></li>
        </ul>
    </div>
</div>

<!-- Mobile search -->
<div class="container d-lg-none mt-2">
    <form action="{{ route('shop') }}" method="GET">
        <div class="input-group">
            <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="{{ __('Search products...') }}">
            <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
        </div>
    </form>
</div>