{{-- resources/views/components/explorecards.blade.php --}}
@if($latest && $latest->count())
<div class="mt-6">
    {{-- Judul Explore --}}
    <h2 class="text-xl font-bold mb-4">Explore</h2>

    {{-- Grid Card --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
        @foreach($latest as $item)
            <article class="group rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm hover:bg-slate-50 transition dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">

                {{-- Cover / Thumbnail --}}
                @if($item->media && $item->media->count())
                    <img src="{{ $item->media->first()->url }}" alt="{{ $item->title }}" class="w-full h-40 object-cover rounded-xl mb-3">
                @else
                    <div class="w-full h-40 bg-slate-100 rounded-xl mb-3 flex items-center justify-center text-slate-400 text-sm">
                        No image
                    </div>
                @endif

                {{-- Info kecil --}}
                <div class="flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mb-1">
                    @if($item->category)
                        <span class="inline-flex items-center rounded-full bg-indigo-600/10 text-indigo-700 px-2 py-1 font-medium dark:text-indigo-200">
                            {{ $item->category }}
                        </span>
                    @endif
                    <span class="inline-flex items-center rounded-full bg-slate-900/5 px-2 py-1 font-medium text-slate-700 dark:bg-white/10 dark:text-slate-200">
                        {{ $item->status ?? '-' }}
                    </span>
                    <span>•</span>
                    <span>{{ $item->start_at?->format('d M Y, H:i') ?? '-' }}</span>
                </div>

                {{-- Title --}}
                <h3 class="mt-1 text-base font-semibold tracking-tight text-slate-800 dark:text-slate-100">
                    {{ $item->title }}
                </h3>

                {{-- Description --}}
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
                    {{ \Illuminate\Support\Str::limit($item->excerpt ?? $item->description ?? '-', 80) }}
                </p>

                {{-- Footer --}}
                <div class="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                    <a href="{{ route('public.kegiatan.show', $item->slug) }}" class="font-medium text-rose-600 hover:text-rose-700 dark:text-rose-300 dark:hover:text-rose-200">
                        Lihat detail →
                    </a>
                    <span>{{ $item->price_type === 'gratis' ? 'Gratis' : 'Berbayar' }}</span>
                </div>

            </article>
        @endforeach
    </div>
</div>
@endif