@php
  $locale = app()->getLocale();
  $num = str_pad($index + 1, 2, '0', STR_PAD_LEFT);
  $featured = $index === 0 ? ' collection-showcase__item--featured' : '';
  $delay = $index > 0 && $index < 4 ? ' reveal-delay-'.$index : '';
@endphp
<a href="{{ collection_url($collection) }}" class="collection-showcase__item reveal{{ $featured }}{{ $delay }}">
  <div class="collection-showcase__media">
    <img class="collection-showcase__image" src="{{ media_url($collection->cover_image) }}" alt="{{ $collection->getTranslation('name', $locale) }}" loading="lazy" decoding="async">
    <div class="collection-showcase__shade"></div>
    <span class="collection-showcase__index">{{ $num }}</span>
    <div class="collection-showcase__meta">
      <p class="collection-showcase__name">{{ $collection->getTranslation('name', $locale) }}</p>
      <p class="collection-showcase__cat">{{ $collection->category?->getTranslation('name', $locale) }}</p>
    </div>
    <span class="collection-showcase__arrow" aria-hidden="true">
      <svg width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.2"/></svg>
    </span>
  </div>
</a>