@php
$settings = $section->settings ?? [];
$columns = $settings['columns'] ?? 2;
$colClass = match($columns) {
'3' => 'md:grid-cols-3',
'4' => 'md:grid-cols-4',
default => 'md:grid-cols-2',
};
@endphp

@php
    $pt = $settings['padding_top'] ?? '48px';
    $pb = $settings['padding_bottom'] ?? '48px';
    $bg = $settings['bg_color'] ?? 'transparent';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section class="relative overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    {{-- Refined Background Effect --}}
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

    <div class="grid grid-cols-1 {{ $colClass }} gap-8">
        @foreach ($settings['items'] ?? [] as $banner)
        @php $bannerColor = $banner['color'] ?? 'var(--brand-500)'; @endphp
        <a href="{{ $banner['link'] ?? '#' }}"
            class="group relative h-[350px] md:h-[400px] rounded-3xl overflow-hidden flex flex-col justify-end p-8 md:p-10 transition-all duration-700 hover:shadow-2xl border border-border-subtle active:scale-[0.99]"
            style="background-color: {{ $bannerColor }}">

            @if($banner['image'] ?? false)
            <img src="{{ str_starts_with($banner['image'], 'http') ? $banner['image'] : asset('storage/' . $banner['image']) }}" 
                class="absolute inset-0 w-full h-full object-cover transition-all duration-1000 group-hover:scale-105 opacity-60 group-hover:opacity-80">
            @endif

            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent group-hover:from-brand-500/60 transition-all duration-700"></div>

            <div class="relative z-10 space-y-4">
                <span
                    class="inline-block px-3 py-1 bg-white/10 backdrop-blur-xl rounded-lg text-[10px] font-700 uppercase text-white mb-2 tracking-widest border border-white/20">
                    {{ $banner['subtitle'] ?? 'Exclusive Assets' }}
                </span>
                <h3 class="text-3xl md:text-4xl font-display font-800 text-white mb-4 leading-tight tracking-tight group-hover:translate-x-1 transition-transform duration-500">
                    {{ $banner['title'] ?? 'Digital Marketplace' }}
                </h3>
                <div
                    class="flex items-center gap-2 text-white/90 font-800 text-[11px] tracking-wide group-hover:gap-3 transition-all duration-500 group-hover:text-white">
                    Explore Now
                    <i data-lucide="arrow-right" class="w-4 h-4 stroke-[2.5]"></i>
                </div>
            </div>
        </a>
        @endforeach
    </div>
</sectio