@props([
    'pageMode' => 'category',
    'pageSlug' => '',
])

<div class="flex items-center gap-[8px] overflow-x-auto no-scrollbar pt-[4px]" role="navigation" aria-label="Quick category and collection switcher">
    {{-- [ All Sarees ] Pill routes to /sarees --}}
    <a href="{{ url('/sarees') }}" class="pill-inactive">
        All Sarees
    </a>

    @if($pageMode === 'collection')
        {{-- Collection Switcher Pills + Saree Fabric Pills (Section 2.1 of collection_and_utility_pages_plan.md) --}}
        @php
            $collectionPills = [
                ['slug' => 'new-arrivals', 'label' => 'New Arrivals'],
                ['slug' => 'festive-edit', 'label' => 'Festive Edit'],
                ['slug' => 'best-sellers', 'label' => 'Most Loved'],
                ['slug' => 'offers', 'label' => 'Offers'],
            ];
        @endphp
        @foreach($collectionPills as $cPill)
            <a href="{{ url('/collections/' . $cPill['slug']) }}"
               class="{{ $pageSlug === $cPill['slug'] ? 'pill-active' : 'pill-inactive' }}">
                {{ $cPill['label'] }}
            </a>
        @endforeach

        @foreach($activeCategories as $cat)
            <a href="{{ url('/category/' . $cat['slug']) }}" class="pill-inactive">
                {{ $cat['shortName'] ?? $cat['name'] }}
            </a>
        @endforeach
    @else
        {{-- Single Category Switcher Pills (Section 2A.3 of single_category_view_all_page_plan.md) --}}
        @foreach($activeCategories as $cat)
            <a href="{{ url('/category/' . $cat['slug']) }}"
               class="{{ $pageSlug === $cat['slug'] ? 'pill-active' : 'pill-inactive' }}">
                {{ $cat['shortName'] ?? $cat['name'] }}
            </a>
        @endforeach
    @endif
</div>