@if(($headerData['enableTopbar'] ?? true))
    <div id="site-header-topbar" class="bg-gray-900 text-white text-[11px]">
        <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-9">
            <div class="flex items-center gap-4">
                @if(filled(data_get($headerData, 'settings.hotline_number')))
                    <span class="flex items-center gap-1.5 text-gray-300">
                        <i class="fa fa-phone text-orange-400 text-[10px]"></i>
                        <span class="font-medium">Hotline: {{ data_get($headerData, 'settings.hotline_number') }}</span>
                    </span>
                @endif
                @if(filled(data_get($headerData, 'settings.hotline_text')))
                    <span class="hidden sm:inline text-gray-500">| {{ data_get($headerData, 'settings.hotline_text') }}</span>
                @endif
            </div>
            <div class="flex items-center gap-5">
                @foreach(data_get($headerData, 'topbarLinks', []) as $link)
                    <a href="{{ $link['url'] }}" target="{{ $link['target'] ?? '_self' }}" class="text-gray-400 hover:text-white transition-colors">
                        {{ $link['label'] }}
                    </a>
                @endforeach
                <a href="{{ data_get($headerData, 'settings.order_track_url', url('/order-track')) }}" class="text-gray-400 hover:text-white transition-colors flex items-center gap-1">
                    <i class="fa fa-truck-fast text-[10px]"></i>
                    <span>{{ data_get($headerData, 'settings.order_track_label', 'Order Track') }}</span>
                </a>
            </div>
        </div>
    </div>
@endif