@php
    $cartCount = $cartCount ?? \App\Services\ThemeCartService::count();
    $menuItems = \App\Services\ThemeMenuService::items('cloth');
    $navLogo = !empty($setting->dark_logo) ? $setting->dark_logo : ($setting->logo ?? null);
    $phone = $setting->phone ?? '01700000000';
    $signInUrl = Route::has('frontend.login') ? route('frontend.login') : (Route::has('login') ? route('login') : null);
    $socials = \App\Models\SocialMedia::where('status', 1)->orderBy('sort_order')->get();
@endphp

<header class="cloth-store-header" id="clothStoreHeader">
    {{-- Red top bar --}}
    <div class="cloth-topbar">
        <div class="container cloth-topbar-inner">
            <a href="tel:{{ preg_replace('/\D/', '', $phone) }}" class="cloth-topbar-link">
                <i class="fas fa-phone-alt"></i> Call Now
            </a>
            <span class="cloth-topbar-welcome">Welcome to {{ strtoupper($setting->name ?? 'TOP TEN MART') }}</span>
            <div class="cloth-topbar-social">
                @forelse($socials as $social)
                <a href="{{ $social->url }}" target="_blank" rel="noopener" aria-label="{{ $social->platform }}">
                    <i class="{{ $social->icon ?? 'fab fa-facebook-f' }}"></i>
                </a>
                @empty
                <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="#" aria-label="X"><i class="fab fa-x-twitter"></i></a>
                <a href="#" aria-label="Pinterest"><i class="fab fa-pinterest-p"></i></a>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Main white header --}}
    <div class="cloth-mainbar">
        <div class="container cloth-mainbar-inner">
            <a href="{{ route('frontend.home') }}" class="cloth-brand-logo">
                @if($navLogo)
                    <img src="{{ asset($navLogo) }}" alt="{{ $setting->name ?? 'Top Ten Mart' }}">
                @else
                    <span class="cloth-brand-box">
                        <span class="cloth-brand-mark">T</span>
                        <span class="cloth-brand-text">
                            <strong>TOP TEN</strong>
                            <small>mart Ltd.</small>
                        </span>
                    </span>
                @endif
            </a>

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

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

        {{-- Mobile menu drawer --}}
        <div class="cloth-mobile-drawer d-lg-none" id="clothMobileDrawer">
            @include('themes.shared.nav-menu-list', ['menuItems' => $menuItems, 'menuClass' => 'cloth-mobile-menu'])
        </div>
    </div>
</header>