{{-- Left-column category navigation on the seller storefront, mirroring the
     catalog's (partials.catalog.category-nav): «Все товары» + the seller's own
     categories, current one highlighted, collapsed after N. Вид — панель
     «Категории» со страницы продавца из макета редизайна. --}}
@php($collapseAfter = 10)
@php($navItem = 'block rounded-[var(--radius-md)] px-3 py-[7px] text-[13.5px] leading-snug transition')
<div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-2">
    <div class="px-3 py-2 text-[11px] font-bold uppercase tracking-[1.2px] text-[var(--color-disabled)]">Категории</div>

    <a href="{{ route('seller.card', $seller) }}"
       class="{{ $navItem }} {{ ! $activeCategory ? 'bg-[var(--color-primary-soft)] font-bold text-[var(--color-primary)]' : 'text-[var(--color-slate)] hover:bg-[var(--color-canvas)]' }}">
        Все товары
    </a>

    <div x-data="{ expanded: false }" class="flex flex-col">
        @foreach ($categories as $i => $cat)
            @php($isCurrent = $activeCategory === $cat->id)
            <a href="{{ route('seller.card.category', [$seller, $cat->slug]) }}"
               @if ($i >= $collapseAfter && ! $isCurrent) x-show="expanded" x-cloak @endif
               class="{{ $navItem }} {{ $isCurrent ? 'bg-[var(--color-primary-soft)] font-bold text-[var(--color-primary)]' : 'text-[var(--color-slate)] hover:bg-[var(--color-canvas)]' }}">
                {{ $cat->name }}
            </a>
        @endforeach
        @if ($categories->count() > $collapseAfter)
            <button type="button" @click="expanded = !expanded"
                    class="px-3 py-[7px] text-left text-[13px] font-semibold text-[var(--color-primary)] transition hover:text-[var(--color-primary-dark)]">
                <span x-show="!expanded">Показать все ({{ $categories->count() }})</span>
                <span x-show="expanded" x-cloak>Свернуть</span>
            </button>
        @endif
    </div>
</div>