@if (isset($featuredRecords) && $featuredRecords->isNotEmpty())
    <section class="theme-card p-3 sm:p-4">
        <div class="flex items-center justify-between gap-3 mb-4">
            <div>
                <h2 class="text-base sm:text-lg font-semibold">{{ __('messages.featured_records') }}</h2>
                <p class="text-xs sm:text-sm theme-inline-muted">{{ __('messages.featured_records_subtitle') }}</p>
            </div>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-4 xl:grid-cols-6 gap-2 sm:gap-3">
            @foreach ($featuredRecords as $record)
                @php
                    $categoryLabel = match ($record['type']) {
                        'internet' => __('messages.sighting_category_internet'),
                        'mobile' => __('messages.sighting_category_mobile'),
                        'vehicle' => __('messages.sighting_category_vehicle'),
                        default => __('messages.sighting_category_unknown'),
                    };
                @endphp

                <a href="{{ $record['details_url'] }}" class="theme-featured-spotlight block overflow-hidden group">
                    <div class="relative aspect-[16/9] overflow-hidden" data-featured-media>
                        @if (! empty($record['thumbnail_url']))
                            <div class="h-full w-full flex items-center justify-center bg-[var(--theme-bg)]/45 dark:bg-[var(--theme-bg)]/35">
                                <img
                                    src="{{ $record['thumbnail_url'] }}"
                                    alt="{{ $record['title'] }}"
                                    class="h-full w-full object-contain object-center transition duration-300 group-hover:scale-[1.02]"
                                    loading="lazy"
                                    onerror="this.remove()"
                                >
                            </div>
                        @else
                            <div class="h-full w-full flex items-center justify-center text-sm font-semibold text-white/90 bg-gradient-to-br from-[var(--theme-primary)] via-[var(--theme-primary-soft)] to-[var(--theme-primary-strong)]">
                                {{ __('messages.asset_images') }}
                            </div>
                        @endif

                        <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-transparent"></div>

                        <div class="absolute top-2 left-2 right-2 flex items-center justify-between gap-1">
                            <span class="theme-chip border-white/35 bg-black/35 text-white !text-[10px] !px-1.5 !py-0.5">{{ $categoryLabel }}</span>
                            <span class="theme-featured-badge !text-[10px] !px-1.5 !py-0.5">#{{ $record['featured_order'] ?? 1 }}</span>
                        </div>

                        <div class="absolute bottom-2 left-2 right-2 flex items-center justify-end">
                            @if (($record['featured_remaining_days'] ?? null) !== null)
                                <span class="theme-chip border-white/35 bg-black/35 text-white !text-[10px] !px-1.5 !py-0.5">
                                    {{ __('messages.featured_expires_in', ['days' => $record['featured_remaining_days']]) }}
                                </span>
                            @else
                                <span class="theme-chip border-white/35 bg-black/35 text-white !text-[10px] !px-1.5 !py-0.5">
                                    {{ __('messages.featured_no_expiry') }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="p-2 sm:p-2.5 space-y-1">
                        <h3 class="font-semibold text-[11px] sm:text-xs text-[var(--theme-text)] truncate">{{ $record['title'] }}</h3>
                        <p class="text-[10px] font-mono theme-inline-muted truncate">{{ __('messages.reference_number') }}: {{ $record['reference_number'] }}</p>
                        <p class="text-[10px] sm:text-[11px] font-mono text-[var(--theme-text)]/85 truncate">{{ $record['identifier'] }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </section>
@endif