@php
    $cartCount = $cartCount ?? \App\Services\ThemeCartService::count();
    $pageMenuItems = \App\Services\ThemeMenuService::items('jewelry', 'pages');
    $categoryMenuItems = \App\Services\ThemeMenuService::items('jewelry', 'categories');
    $navLogo = !empty($setting->logo) ? $setting->logo : ($setting->dark_logo ?? null);
    $phone = $setting->phone ?? '01716-522922';
    $phoneDisplay = preg_match('/^\d{5}-\d{6}$/', $phone) ? $phone : (strlen(preg_replace('/\D/', '', $phone)) >= 11
        ? substr(preg_replace('/\D/', '', $phone), 0, 5) . '-' . substr(preg_replace('/\D/', '', $phone), 5)
        : $phone);
    $signInUrl = Route::has('frontend.login') ? route('frontend.login') : (Route::has('login') ? route('login') : null);
    $findStoreUrl = !empty($setting->address)
        ? 'https://www.google.com/maps/search/?api=1&query=' . urlencode($setting->address)
        : route('frontend.page', 'contact');
@endphp

<header class="kunjo-header" id="kunjoHeader">
    {{-- Row 1: Search | Logo | Icons --}}
    <div class="kunjo-row kunjo-row-top">
        <div class="container kunjo-row-top-inner">
            <form action="{{ route('frontend.products') }}" method="GET" class="kunjo-search-box">
                <input type="search" name="q" placeholder="Search products" aria-label="Search products">
                <button type="submit" aria-label="Search"><i class="fas fa-search"></i></button>
            </form>

            <a href="{{ route('frontend.home') }}" class="kunjo-logo-center">
                @if($navLogo)
                    <img src="{{ asset($navLogo) }}" alt="{{ $setting->name ?? 'Kunjo Jewellers' }}">
                @else
                    <span class="kunjo-logo-mark" aria-hidden="true">KJ</span>
                    <span class="kunjo-logo-name">KUNJO JEWELLERS</span>
                    <span class="kunjo-logo-tag">Art of Elegance</span>
                @endif
            </a>

            <div class="kunjo-util-icons">
                <button type="button" class="kunjo-util-btn d-lg-none" id="storeSearchToggle" aria-label="Search">
                    <i class="fas fa-search"></i>
                </button>
                @if($signInUrl)
                <a href="{{ $signInUrl }}" class="kunjo-util-btn" aria-label="Account">
                    <i class="far fa-user"></i>
                </a>
                @endif
                <a href="{{ route('frontend.cart') }}" class="kunjo-util-btn" aria-label="Cart">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="kunjo-util-badge">{{ $cartCount }}</span>
                </a>
                <button type="button" class="kunjo-util-btn kunjo-menu-btn d-lg-none" data-toggle-nav aria-label="Menu">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </div>

    {{-- Row 2: Browse Categories | Main Menu | Phone + Find Store --}}
    <div class="kunjo-row kunjo-row-nav d-none d-lg-block">
        <div class="container kunjo-row-nav-inner">
            <div class="kunjo-browse-wrap" id="kunjoBrowseWrap">
                <button type="button" class="kunjo-browse-btn" id="kunjoBrowseBtn" aria-expanded="false">
                    Browse Categories <i class="fas fa-chevron-down"></i>
                </button>
                <div class="kunjo-browse-panel" id="kunjoBrowsePanel">
                    @foreach($categoryMenuItems as $item)
                        @if(!empty($item['children']))
                        <div class="kunjo-browse-group">
                            <a href="{{ $item['url'] }}" class="kunjo-browse-parent">{{ $item['label'] }}</a>
                            @foreach($item['children'] as $child)
                            <a href="{{ $child['url'] }}" class="kunjo-browse-child">{{ $child['label'] }}</a>
                            @endforeach
                        </div>
                        @else
                        <a href="{{ $item['url'] }}" class="kunjo-browse-link">{{ $item['label'] }}</a>
                        @endif
                    @endforeach
                </div>
            </div>

            <nav class="kunjo-main-menu">
                @include('themes.shared.nav-menu-list', ['menuItems' => $pageMenuItems, 'menuClass' => 'kunjo-main-menu-list'])
            </nav>

            <div class="kunjo-nav-meta">
                <a href="tel:{{ preg_replace('/\D/', '', $phone) }}" class="kunjo-nav-meta-link">
                    <i class="fas fa-phone-alt"></i> {{ $phoneDisplay }}
                </a>
                <a href="{{ $findStoreUrl }}" class="kunjo-nav-meta-link" target="_blank" rel="noopener">
                    <i class="fas fa-map-marker-alt"></i> Find Store
                </a>
            </div>
        </div>
    </div>

    {{-- Mobile drawer --}}
    <div class="kunjo-mobile-drawer d-lg-none">
        <div class="kunjo-mobile-tabs">
            <button type="button" class="kunjo-mobile-tab active" data-kunjo-tab="categories">Categories</button>
            <button type="button" class="kunjo-mobile-tab" data-kunjo-tab="menu">Menu</button>
        </div>
        <div class="kunjo-mobile-panel active" data-kunjo-panel="categories">
            @include('themes.shared.nav-menu-list', ['menuItems' => $categoryMenuItems, 'menuClass' => 'kunjo-mobile-menu'])
        </div>
        <div class="kunjo-mobile-panel" data-kunjo-panel="menu">
            @include('themes.shared.nav-menu-list', ['menuItems' => $pageMenuItems, 'menuClass' => 'kunjo-mobile-menu'])
        </div>
        <div class="kunjo-mobile-meta">
            <a href="tel:{{ preg_replace('/\D/', '', $phone) }}"><i class="fas fa-phone-alt"></i> {{ $phoneDisplay }}</a>
            <a href="{{ $findStoreUrl }}" target="_blank" rel="noopener"><i class="fas fa-map-marker-alt"></i> Find Store</a>
        </div>
    </div>
</header>

<script>
(function () {
    document.querySelectorAll('[data-kunjo-tab]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var tab = btn.getAttribute('data-kunjo-tab');
            document.querySelectorAll('[data-kunjo-tab]').forEach(function (b) { b.classList.toggle('active', b === btn); });
            document.querySelectorAll('[data-kunjo-panel]').forEach(function (p) {
                p.classList.toggle('active', p.getAttribute('data-kunjo-panel') === tab);
            });
        });
    });

    var browseWrap = document.getElementById('kunjoBrowseWrap');
    var browseBtn = document.getElementById('kunjoBrowseBtn');
    if (browseBtn && browseWrap) {
        browseBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            var open = browseWrap.classList.toggle('open');
            browseBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
        });
        document.addEventListener('click', function (e) {
            if (!browseWrap.contains(e.target)) {
                browseWrap.classList.remove('open');
                browseBtn.setAttribute('aria-expanded', 'false');
            }
        });
    }

})();
</script>