@php
    $spotlightBanners = $spotlightBanners ?? collect();
    $mediaUrl = function ($path) {
        if (!$path) return null;
        if (str_starts_with($path, 'http://') || str_starts_with($path, 'https://')) return $path;
        return asset($path);
    };
@endphp

@if(!empty($hp['show_spotlight_grid']) && $spotlightBanners->count() > 0)
<section class="gm-section gm-spotlight-section" data-section="spotlight-grid">
    <div class="container">
        <div class="gm-spotlight-grid">
            @foreach($spotlightBanners as $banner)
            @php
                $src = $mediaUrl($banner->image);
                $features = array_values(array_filter(array_map('trim', explode('|', $banner->subtitle ?? ''))));
            @endphp
            <a href="{{ $banner->link ?: route('frontend.products') }}" class="gm-spotlight-card">
                @if($src)
                <img src="{{ $src }}" alt="{{ strip_tags($banner->title ?? 'Spotlight') }}" class="gm-spotlight-bg" loading="lazy">
                @endif
                <span class="gm-spotlight-overlay" aria-hidden="true"></span>
                <span class="gm-spotlight-body">
                    @if($banner->title)
                    <span class="gm-spotlight-title">{!! $banner->title !!}</span>
                    @endif
                    @if(count($features))
                    <ul class="gm-spotlight-features">
                        @foreach($features as $feature)
                        <li>{{ $feature }}</li>
                        @endforeach
                    </ul>
                    @endif
                    @if($banner->button_text)
                    <span class="gm-spotlight-btn">{{ $banner->button_text }}</span>
                    @endif
                </span>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif