{{-- Blog category filter pills — static rendering, JS filtering is Epic 5 --}}
<div class="max-w-7xl mx-auto px-4 py-4">
    <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
        {{-- "All" pill — active by default --}}
        <span class="px-4 py-2 rounded-full bg-primary text-primary-foreground text-sm whitespace-nowrap cursor-pointer font-medium"
            aria-current="true">
            {{ __('blog.categories.all') }}
        </span>

        @foreach(['innovation', 'technology', 'events', 'research', 'news'] as $categoryKey)
        <span class="px-4 py-2 rounded-full bg-muted text-muted-foreground text-sm whitespace-nowrap cursor-pointer hover:bg-muted/80 transition-colors">
            {{ __("blog.categories.{$categoryKey}") }}
        </span>
        @endforeach
    </div>
</div>