@php
    $swiperClass = $swiperClass ?? 'portfolio-swiper';
    $sliderItems = $items ?? [];
    $lightboxTrigger = $lightboxTrigger ?? 'archive';
@endphp

<div class="relative -mx-4 sm:-mx-6 lg:-mx-8">
    <div class="swiper {{ $swiperClass }} px-5">
        <div class="swiper-wrapper py-[2rem]">
            @foreach ($sliderItems as $index => $item)
                @php
                    $slides = \Modules\Frontend\app\Support\GalleryMediaSlides::fromContentListRow($item);
                    $title = $item['name'] ?? $item['title'] ?? '';
                    $category = $item['categories'][0]['name'] ?? null;
                    $coverImage = check_file($item['image'] ?? '');
                    if ($coverImage === '' && count($slides)) {
                        foreach ($slides as $s) {
                            if (($s['type'] ?? '') === 'image' && !empty($s['src'])) {
                                $coverImage = $s['src'];
                                break;
                            }
                        }
                    }
                @endphp
                @if (count($slides) > 0)
                    <div class="swiper-slide">
                        <button
                            type="button"
                            class="block w-full aspect-square rounded-2xl relative overflow-hidden group cursor-pointer transform-gpu transition-transform duration-500 hover:scale-105 text-left"
                            data-lightbox-trigger="{{ $lightboxTrigger }}"
                            data-gallery-slides='@json($slides)'
                            data-gallery-index="{{ $index }}"
                            aria-label="{{ $title !== '' ? 'Open gallery: '.$title : 'Open gallery' }}"
                        >
                            @if ($coverImage !== '')
                                <img src="{{ $coverImage }}" alt="{{ $title !== '' ? $title : 'Portfolio item ' . ($index + 1) }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" loading="lazy">
                            @else
                                <div class="w-full h-full flex items-center justify-center bg-black/60 min-h-[12rem]">
                                    <i class="ph ph-play-circle text-5xl text-white/80" aria-hidden="true"></i>
                                </div>
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent flex items-end p-6 pointer-events-none">
                                <div class="w-full">
                                    @if (!empty($category))
                                        <p class="text-xs text-gray-300 uppercase tracking-wider mb-1">{{ $category }}</p>
                                    @endif
                                    <h4 class="text-2xl font-bold">{{ $title !== '' ? $title : 'Portfolio' }}</h4>
                                </div>
                            </div>
                        </button>
                    </div>
                @endif
            @endforeach
        </div>

        <div class="swiper-pagination !bottom-0"></div>
    </div>
</div>