@php
    $cartCount = $cartCount ?? \App\Services\ThemeCartService::count();
    $navId = $navId ?? 'mainNav';
    $brandName = trim((string) ($themeBrand['name'] ?? '')) ?: \App\Services\ThemeProfileService::brandName();
    $headerLogo = !empty($setting->logo) ? $setting->logo : ($setting->dark_logo ?? null);
    $aboutPage = \App\Models\Page::where('slug', 'about-us')->where('status', 1)->first();
    $contactPage = \App\Models\Page::where('slug', 'contact')->where('status', 1)->first()
        ?: \App\Models\Page::where('slug', 'contact-us')->where('status', 1)->first();
    $signInUrl = Route::has('frontend.login')
        ? route('frontend.login')
        : (Route::has('login') ? route('login') : null);
@endphp

<header class="store-organic-header" id="storeOrganicHeader">
    {{-- Row 1: Logo + Search + Utils --}}
    <div class="store-organic-top">
        <div class="container store-organic-container">
            <div class="store-organic-top-row">
                <a href="{{ route('frontend.home') }}" class="store-organic-logo">
                    @if($headerLogo)
                        <img src="{{ asset($headerLogo) }}" alt="{{ $brandName }}">
                    @else
                        <span class="store-organic-logo-text">{{ $brandName }}</span>
                    @endif
                </a>

                <div class="store-organic-search-wrap">
                    <form action="{{ route('frontend.search') }}" method="GET" class="store-organic-search-form search-form">
                        <input type="text" name="q" class="store-organic-search-input" placeholder="Search for products, brands..." value="{{ request('q') }}" autocomplete="off">
                        <button type="submit" aria-label="Search"><i class="fas fa-search"></i></button>
                    </form>
                </div>

                <div class="store-organic-utils d-none d-md-flex">
                    <a href="{{ route('frontend.order.tracking-page') }}" class="store-organic-util-link"
                       onclick="if(typeof openTrackModal==='function'){openTrackModal();return false;}">
                        <i class="fas fa-map-marker-alt"></i> Order Tracking
                    </a>
                    <span class="store-organic-util-divider"></span>
                    @if($signInUrl)
                    <a href="{{ $signInUrl }}" class="store-organic-util-link">
                        <i class="fas fa-user"></i> Sign in
                    </a>
                    @endif
                </div>

                <div class="store-organic-top-mobile d-flex d-md-none">
                    <button type="button" class="store-organic-icon-btn" id="storeSearchToggleMobile" aria-label="Search">
                        <i class="fas fa-search"></i>
                    </button>
                    <a href="{{ route('frontend.cart') }}" class="store-organic-icon-btn" aria-label="Cart">
                        <i class="fas fa-shopping-cart"></i>
                        @if($cartCount > 0)<span class="store-organic-badge">{{ $cartCount }}</span>@endif
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Row 2: Green nav bar --}}
    <nav class="store-organic-nav {{ $navClass ?? '' }}" id="{{ $navId }}">
        <div class="container store-organic-container">
            <div class="store-organic-nav-row">
                <button type="button" class="store-organic-browse-btn" data-organic-browse aria-label="Menu">
                    <i class="fas fa-bars"></i>
                    <span>Browse Categories</span>
                </button>

                <ul class="store-organic-menu">
                    <li><a href="{{ route('frontend.home') }}" class="{{ request()->routeIs('frontend.home') ? 'active' : '' }}">Home</a></li>
                    @if($aboutPage)
                    <li><a href="{{ route('frontend.page', $aboutPage->slug) }}" class="{{ request()->route('slug') === $aboutPage->slug ? 'active' : '' }}">About</a></li>
                    @else
                    <li><a href="{{ route('frontend.page', 'about-us') }}">About</a></li>
                    @endif
                    <li><a href="{{ route('frontend.products') }}" class="{{ request()->routeIs('frontend.products') ? 'active' : '' }}">Products</a></li>
                    <li><a href="{{ route('frontend.blog.index') }}" class="{{ request()->routeIs('frontend.blog.*') ? 'active' : '' }}">Blogs</a></li>
                    @if($contactPage)
                    <li><a href="{{ route('frontend.page', $contactPage->slug) }}" class="{{ request()->route('slug') === $contactPage->slug ? 'active' : '' }}">Contact</a></li>
                    @else
                    <li><a href="{{ route('frontend.page', 'contact') }}">Contact</a></li>
                    @endif
                </ul>

                <div class="store-organic-nav-actions">
                    <a href="{{ route('frontend.cart') }}" class="store-organic-nav-icon" aria-label="Cart">
                        <i class="fas fa-bag-shopping"></i>
                        <span class="store-organic-badge store-organic-badge--nav">{{ $cartCount }}</span>
                    </a>
                    <button type="button" class="store-organic-nav-icon d-lg-none" data-toggle-nav aria-label="Menu">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </div>
            </div>

            {{-- Mobile dropdown menu (no category list — use Products / Browse) --}}
            <div class="store-organic-mobile-menu">
                <a href="{{ route('frontend.home') }}">Home</a>
                @if($aboutPage)
                <a href="{{ route('frontend.page', $aboutPage->slug) }}">About</a>
                @else
                <a href="{{ route('frontend.page', 'about-us') }}">About</a>
                @endif
                <a href="{{ route('frontend.products') }}">Products</a>
                <a href="{{ route('frontend.combo-offers') }}">Combo Offer</a>
                <a href="{{ route('frontend.blog.index') }}">Blogs</a>
                @if($contactPage)
                <a href="{{ route('frontend.page', $contactPage->slug) }}">Contact</a>
                @else
                <a href="{{ route('frontend.page', 'contact') }}">Contact</a>
                @endif
                <a href="{{ route('frontend.order.tracking-page') }}"
                   onclick="if(typeof openTrackModal==='function'){openTrackModal();return false;}">Order Tracking</a>
                @if($signInUrl)
                <a href="{{ $signInUrl }}">Sign in</a>
                @endif
            </div>
        </div>
    </nav>
</header>

@push('scripts')
<script>
(function () {
    var browseBtn = document.querySelector('[data-organic-browse]');
    if (browseBtn) {
        browseBtn.addEventListener('click', function (e) {
            if (window.innerWidth < 992) {
                e.preventDefault();
                var nav = document.getElementById('mainNav') || document.querySelector('.store-organic-nav');
                if (nav) nav.classList.toggle('open');
                return;
            }
            e.preventDefault();
            var sidebar = document.getElementById('heroCatSidebar');
            if (sidebar) {
                sidebar.scrollIntoView({ behavior: 'smooth', block: 'start' });
                return;
            }
            window.location.href = @json(route('frontend.home') . '#heroCatSidebar');
        });
    }

    var mobileSearch = document.getElementById('storeSearchToggleMobile');
    if (mobileSearch && typeof window.openStoreSearchPanel === 'function') {
        mobileSearch.addEventListener('click', window.openStoreSearchPanel);
    }
})();
</script>
@endpush