@php
    $collectionItems = collect(is_array($collections ?? null) ? $collections : [])->filter()->take(3)->values();
    $coverFallback = 'https://files.skinbase.org/default/missing_md.webp';
@endphp

@if ($collectionItems->isNotEmpty())
    <section class="mt-14 px-4 sm:px-6 lg:px-8">
        <div class="mb-5 flex items-center justify-between gap-4">
            <div>
                <h2 class="text-xl font-bold text-white">Trending Collections</h2>
                <p class="mt-1 max-w-2xl text-sm text-nova-300">Collections getting the strongest mix of follows, saves, and engagement right now.</p>
            </div>
            <a href="/collections/trending" class="shrink-0 text-sm text-nova-300 transition hover:text-white">All collections →</a>
        </div>

        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
            @foreach ($collectionItems as $collection)
                <article class="group overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(12,19,30,0.96),rgba(5,10,18,0.96))] shadow-[0_22px_70px_rgba(2,6,23,0.28)] transition hover:border-white/15">
                    <a href="{{ $collection['url'] ?? '#' }}" class="block">
                        <div class="relative aspect-[16/10] overflow-hidden bg-slate-900">
                            <img src="{{ $collection['cover_image'] ?? $coverFallback }}" alt="{{ $collection['title'] ?? 'Collection' }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy" decoding="async">
                            <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent"></div>
                            <div class="absolute left-4 top-4 flex flex-wrap gap-2">
                                @if (!empty($collection['badge_label']))
                                    <span class="rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">{{ $collection['badge_label'] }}</span>
                                @endif
                                @if (!empty($collection['type']))
                                    <span class="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-white/75">{{ str_replace('_', ' ', $collection['type']) }}</span>
                                @endif
                            </div>
                        </div>
                    </a>

                    <div class="px-5 py-5">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <a href="{{ $collection['url'] ?? '#' }}" class="block truncate text-lg font-semibold text-white transition hover:text-sky-100">{{ $collection['title'] ?? 'Collection' }}</a>
                                @if (!empty($collection['subtitle']))
                                    <p class="mt-1 truncate text-sm text-slate-300">{{ $collection['subtitle'] }}</p>
                                @endif
                            </div>
                            @if (!empty(data_get($collection, 'owner.username')))
                                <span class="shrink-0 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100/80">@{{ data_get($collection, 'owner.username') }}</span>
                            @endif
                        </div>

                        @if (!empty($collection['description_excerpt']))
                            <p class="mt-3 text-sm leading-6 text-slate-300">{{ $collection['description_excerpt'] }}</p>
                        @endif

                        <div class="mt-4 flex flex-wrap gap-3 text-xs text-slate-400">
                            @if ((int) ($collection['artworks_count'] ?? 0) > 0)
                                <span>{{ number_format((int) ($collection['artworks_count'] ?? 0)) }} artworks</span>
                            @endif
                            @if ((int) ($collection['followers_count'] ?? 0) > 0)
                                <span>{{ number_format((int) ($collection['followers_count'] ?? 0)) }} followers</span>
                            @endif
                            @if ((int) ($collection['saves_count'] ?? 0) > 0)
                                <span>{{ number_format((int) ($collection['saves_count'] ?? 0)) }} saves</span>
                            @endif
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
@endif