@php
    $items = [
        [
            'id' => '001',
            'title' => 'About us',
            'link' => '/about-us',
        ],
        [
            'id' => '002',
            'title' => 'Services',
            'link' => '/services',
        ],
        [
            'id' => '003',
            'title' => 'Our Approach',
            'link' => '/our-approach',
        ],
        [
            'id' => '004',
            'title' => 'Core Values',
            'link' => '/about-us#core-values',
        ],
        [
            'id' => '005',
            'title' => 'Mission & Vision',
            'link' => '/about-us#mission-vision',
        ],
    ];
@endphp

<ul class="flex flex-col lg:flex-row lg:justify-center gap-y-6 gap-x-4 text-gray-700 text-sm">
    @foreach ($items as $item)
        <li wire:key="item-{{ $item['id'] }}">
            <a href="{{ $item['link'] }}" class="hover:text-primary-700">
                {{ $item['title'] }}
            </a>
        </li>  
    @endforeach
    <li class="sm:hidden flex w-full pt-3">
        <a href="/contact-us" class="btn btn-md btn-solid btn-solid-primary text-white rounded-xl w-full justify-center" wire:navigate>
            Let's discuss
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" class="ml-2">
                <path d="M5 12h14"></path>
                <path d="m12 5 7 7-7 7"></path>
            </svg>
        </a>
    </li>
</ul>