@forelse($mediaAssets as $asset)
<div class="card-luxury overflow-hidden bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex flex-col justify-between hover:shadow-lg transition-all duration-300 relative group"
     style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"
     data-category="{{ $asset->galleryCategory->slug ?? 'other' }}"
     data-title="{{ strtolower($asset->title) }}"
     data-caption="{{ strtolower($asset->caption) }}">
    
    <!-- Media Wrapper -->
    <div class="relative overflow-hidden aspect-[4/3] cursor-pointer"
         @click="openLightbox({{ $asset->id }}, '{{ asset($asset->file_path) }}', '{{ $asset->file_type }}', '{{ addslashes($asset->title) }}', '{{ addslashes($asset->caption ?? $asset->alt_text) }}', '{{ $asset->embed_url }}', '{{ $asset->apartmentType->name ?? '' }}', '{{ $asset->apartmentType->slug ?? '' }}')">
        
        <!-- WebP Responsive Picture tag -->
        <picture>
            @if($asset->variants->where('variant_type', 'webp')->first() && file_exists(public_path($asset->variants->where('variant_type', 'webp')->first()->file_path)))
                <source srcset="{{ asset($asset->variants->where('variant_type', 'webp')->first()->file_path) }}" type="image/webp">
            @endif
            <img src="{{ asset($asset->file_path) }}" 
                 alt="{{ $asset->alt_text ?? $asset->title }}" 
                 width="640" height="480"
                 loading="lazy" 
                 class="w-full h-full object-cover transform transition-transform duration-[6s] group-hover:scale-105">
        </picture>

        <!-- Dark Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div class="text-white space-y-1">
                <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block">
                    {{ $asset->galleryCategory->name ?? 'Visual' }}
                </span>
                <h4 class="text-xs font-bold font-sans line-clamp-1 leading-snug">
                    {{ $asset->title }}
                </h4>
            </div>
        </div>

        <!-- Floating Badge Category -->
        <div class="absolute top-3 left-3 bg-[#080D2B]/90 text-[#D6A84F] text-[8px] font-bold uppercase tracking-widest px-2 py-0.5" style="border-radius: 0.1rem;">
            {{ $asset->galleryCategory->name ?? 'Suite' }}
        </div>

        <!-- Media Type Icon Overlays -->
        @if($asset->file_type === 'video')
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div class="w-12 h-12 rounded-full bg-slate-950/80 border-2 border-white/60 text-white flex items-center justify-center shadow-2xl transition-transform group-hover:scale-110">
                    <svg class="w-5 h-5 fill-current ml-0.5" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                </div>
            </div>
        @elseif($asset->file_type === '3d_tour')
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div class="w-12 h-12 rounded-full bg-slate-950/80 border-2 border-[#D6A84F]/60 text-[#D6A84F] flex items-center justify-center shadow-2xl transition-transform group-hover:scale-110">
                    <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </div>
            </div>
        @endif
    </div>

    <!-- Metadata Details Card Footer -->
    <div class="p-4 bg-white dark:bg-slate-900 flex-grow flex flex-col justify-between space-y-3">
        <div class="space-y-1">
            <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider line-clamp-1">
                {{ $asset->title }}
            </h3>
            <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium line-clamp-2 leading-relaxed">
                {{ $asset->caption ?? $asset->alt_text ?? 'Verified visual preview from Kevron Suites and Apartments, Ikeja.' }}
            </p>
        </div>

        <div class="flex items-center justify-between pt-2.5 border-t border-slate-100 dark:border-slate-800/80">
            @if($asset->apartmentType)
                <a href="{{ url('/apartments/' . $asset->apartmentType->slug) }}" 
                   class="text-[9px] font-bold text-blue-900 dark:text-cyan-400 hover:underline uppercase tracking-wider">
                    {{ $asset->apartmentType->name }}
                </a>
            @else
                <span class="text-[9px] font-semibold text-slate-400 uppercase tracking-wider">
                    Adeniyi Jones Branch
                </span>
            @endif

            <button type="button" 
                    @click="openLightbox({{ $asset->id }}, '{{ asset($asset->file_path) }}', '{{ $asset->file_type }}', '{{ addslashes($asset->title) }}', '{{ addslashes($asset->caption ?? $asset->alt_text) }}', '{{ $asset->embed_url }}', '{{ $asset->apartmentType->name ?? '' }}', '{{ $asset->apartmentType->slug ?? '' }}')"
                    class="text-[9px] font-bold text-[#D6A84F] hover:underline uppercase tracking-wider">
                Enlarge View
            </button>
        </div>
    </div>
</div>
@empty
<div class="col-span-full py-16 text-center space-y-3 bg-slate-50 dark:bg-slate-950 border border-dashed border-slate-200 dark:border-slate-800" style="border-radius: 0.1rem;">
    <svg class="w-8 h-8 mx-auto text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
    <div class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">No Visual Assets Found</div>
    <p class="text-[11px] text-slate-400 max-w-xs mx-auto">Try refining your search terms or choosing a different en-suite category.</p>
</div>
@endforelse