@if(filled(data_get($headerData, 'primaryMenus')))
    <div class="site-header__primary-nav hidden md:block border-b border-gray-200 bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4">
            <nav class="flex items-center py-2 no-scrollbar overflow-x-auto">
                @foreach(data_get($headerData, 'primaryMenus', []) as $item)
                    @php
                        $itemPath = trim(parse_url($item['url'] ?? '#', PHP_URL_PATH) ?? '', '/');
                        $isActive = $itemPath !== '' && $itemPath === trim(request()->path(), '/');
                        $hasChildren = filled($item['children'] ?? null);
                    @endphp
                    <div class="flex-shrink-0">
                        <a href="{{ $hasChildren ? '#' : $item['url'] }}"
                           target="{{ $hasChildren ? '_self' : ($item['target'] ?? '_self') }}"
                           data-has-children="{{ $hasChildren ? '1' : '' }}"
                           class="desktop-nav-link whitespace-nowrap px-3.5 py-2 text-sm font-medium rounded-lg transition-all duration-200 inline-flex items-center
                           {{ $isActive ? 'bg-orange-500 text-white shadow-sm' : 'text-gray-700 hover:bg-orange-50 hover:text-orange-600' }}">
                            @if(filled($item['icon'] ?? null))
                                <i class="{{ $item['icon'] }} mr-1.5"></i>
                            @endif
                            {{ $item['title'] }}
                            @if($hasChildren)
                                <i class="fa fa-chevron-down text-[9px] ml-1.5 {{ $isActive ? 'text-white/70' : 'text-gray-400' }}"></i>
                            @endif
                        </a>
                        @if($hasChildren)
                            <div class="desktop-dd-menu"
                                 style="display:none;position:fixed;min-width:220px;padding-top:4px;z-index:150;">
                                <div class="bg-white border border-gray-200 rounded-lg shadow-lg py-2">
                                    @foreach($item['children'] as $child)
                                        @php
                                            $childPath = trim(parse_url($child['url'] ?? '#', PHP_URL_PATH) ?? '', '/');
                                            $isChildActive = $childPath !== '' && $childPath === trim(request()->path(), '/');
                                        @endphp
                                        <a href="{{ $child['url'] }}" target="{{ $child['target'] ?? '_self' }}"
                                           class="block px-4 py-2 text-sm {{ $isChildActive ? 'text-orange-600 font-medium bg-orange-50' : 'text-gray-600 hover:text-orange-600 hover:bg-orange-50' }} transition-colors">
                                            {{ $child['title'] }}
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach

                @if(filled(data_get($headerData, 'submenuMenus')))
                    <span class="w-px h-5 bg-gray-200 mx-2 flex-shrink-0"></span>
                    @foreach(data_get($headerData, 'submenuMenus', []) as $item)
                        @php
                            $itemPath = trim(parse_url($item['url'] ?? '#', PHP_URL_PATH) ?? '', '/');
                            $isActive = $itemPath !== '' && $itemPath === trim(request()->path(), '/');
                        @endphp
                        <a href="{{ $item['url'] }}" target="{{ $item['target'] ?? '_self' }}"
                           class="whitespace-nowrap px-3 py-1.5 text-xs font-medium text-gray-500 hover:text-orange-500 transition-colors flex-shrink-0">
                            {{ $item['title'] }}
                        </a>
                    @endforeach
                @endif
            </nav>
        </div>
    </div>
@endif