@props(['services', 'activeKey'])

{{--
    Plain links styled as tabs, not a client-side JS tab switcher: each
    service gets its own real, indexable URL (/services/data,
    /services/electricity, ...), which is better for SEO and means the tab
    bar needs zero JavaScript to work.
--}}
<nav class="flex flex-wrap justify-center gap-2 border-b border-slate-200 pb-px dark:border-slate-800" aria-label="Service types">
    @foreach ($services as $key => $service)
        <a
            href="{{ route('services.show', $key) }}"
            @if ($key === $activeKey) aria-current="page" @endif
            class="rounded-t-lg border-b-2 px-4 py-3 text-sm font-semibold transition
                {{ $key === $activeKey
                    ? 'border-brand-600 text-brand-700 dark:text-brand-400'
                    : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200' }}"
        >
            {{ $service['label'] }}
        </a>
    @endforeach
</nav>