@php
    $nav = [
        ['label' => 'Home', 'route' => 'home'],
        ['label' => 'About', 'route' => 'about'],
        ['label' => 'Founders', 'route' => 'founders'],
        ['label' => 'Our Team', 'route' => 'team'],
        ['label' => 'Companies', 'route' => 'companies'],
        ['label' => 'Associate', 'route' => 'associate'],
        ['label' => 'Services', 'route' => 'services'],
        ['label' => 'Initiatives', 'route' => 'initiatives'],
        ['label' => 'Gallery', 'route' => 'gallery'],
        ['label' => 'Careers', 'route' => 'careers'],
        ['label' => 'Contact', 'route' => 'contact'],
    ];
@endphp

<div class="bg-gerg-500 text-sm text-white hidden lg:block">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2 lg:px-8">
        <a href="mailto:{{ config('gerg.email') }}" class="hover:text-gerg-100 transition">{{ config('gerg.email') }}</a>
        <a href="tel:{{ preg_replace('/\s+/', '', config('gerg.phone')) }}" class="hover:text-gerg-100 transition">{{ config('gerg.phone') }}</a>
        <span class="text-gerg-100">{{ config('gerg.hours') }}</span>
    </div>
</div>

<header id="site-header" class="sticky top-0 z-50 border-b border-gerg-grey/50 bg-white/95 backdrop-blur-md transition-shadow">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 lg:px-8 lg:py-4">
        @include('partials.logo')

        <nav class="hidden items-center gap-0.5 xl:flex" aria-label="Main navigation">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}"
                   class="rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs($item['route']) ? 'bg-gerg-50 text-gerg-600' : 'text-gerg-800 hover:bg-gerg-50 hover:text-gerg-500' }}">
                    {{ $item['label'] }}
                </a>
            @endforeach
        </nav>

        <div class="flex items-center gap-3">
            <a href="{{ route('contact') }}" class="btn-primary hidden sm:inline-flex text-sm !py-2.5 !px-5">Request Quote</a>
            <button type="button" id="mobile-menu-btn" class="rounded-lg p-2 text-gerg-800 hover:bg-gerg-50 xl:hidden" aria-label="Open menu" aria-expanded="false">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
    </div>

    <div id="mobile-menu" class="hidden border-t border-gerg-grey/50 bg-white xl:hidden">
        <nav class="flex flex-col gap-1 px-4 py-4" aria-label="Mobile navigation">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}"
                   class="rounded-lg px-4 py-3 text-sm font-medium {{ request()->routeIs($item['route']) ? 'bg-gerg-50 text-gerg-600' : 'text-gerg-800 hover:bg-gerg-50' }}">
                    {{ $item['label'] }}
                </a>
            @endforeach
            <a href="{{ route('contact') }}" class="btn-primary mt-2 text-center">Request Quote</a>
        </nav>
    </div>
</header>