@if (! empty($cats['show']))
<section class="section" id="kategorije">
  <div class="container">
    <div class="section-head reveal">
      <div>
        @if (! empty($cats['eyebrow']))
          <div class="section-eyebrow">{{ $cats['eyebrow'] }}</div>
        @endif
        @if (! empty($cats['title']))
          <h2 class="section-title">{{ $cats['title'] }}</h2>
        @endif
      </div>
      @if (function_exists('wc_get_page_id') && wc_get_page_id('shop') > 0)
        <a href="{{ get_permalink(wc_get_page_id('shop')) }}" class="section-link">
          {{ __('Pogledaj sve', 'elit-gastro') }} →
        </a>
      @endif
    </div>

    <div class="cats-grid">
      @foreach ($categories as $cat)
        @php
          // Always render the vector icon — the picker auto-defaults by
          // category name (see eg_guess_icon_for_name). Image uploads were
          // removed earlier so every cat-card stays visually consistent.
          $iconSvg = (! empty($cat['icon'])) ? \App\Icons::render($cat['icon']) : '';
        @endphp
        <a href="{{ $cat['url'] }}" class="cat-card reveal">
          <div class="cat-card__media">
            @if ($iconSvg !== '')
              {!! $iconSvg !!}
            @else
              <x-icon.placeholder stroke-width="1.6" />
            @endif
          </div>
          <div class="cat-card__body">
            <div class="cat-card__name">{{ $cat['name'] }}</div>
            <div class="cat-card__count">
              {{ $cat['count'] }}
              {{ _n('proizvod', 'proizvoda', (int) $cat['count'], 'elit-gastro') }}
            </div>
          </div>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endif