@php
    $sectionItems = collect(is_array($items ?? null) ? $items : [])
        ->filter(fn ($item) => !data_get($item, 'maturity.should_hide', false))
        ->values();
    $sectionLayout = $layout ?? 'grid';
    $sectionColumns = $columns ?? 'xl:grid-cols-4';
    $shouldRenderEmpty = !empty($emptyMessage);
@endphp

@if ($sectionItems->isNotEmpty() || $shouldRenderEmpty)
    <section class="mt-14 px-4 sm:px-6 lg:px-8">
        <div class="mb-5 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
                @if (!empty($eyebrow))
                    <p class="text-[0.7rem] font-semibold uppercase tracking-[0.28em] text-sky-200/70">{{ $eyebrow }}</p>
                @endif
                <h2 class="text-xl font-bold text-white">{{ $title }}</h2>
                @if (!empty($description))
                    <p class="mt-1 max-w-2xl text-sm text-slate-300">{{ $description }}</p>
                @endif
            </div>
            @if (!empty($href))
                <a href="{{ $href }}" class="text-sm text-nova-300 transition hover:text-white">
                    See all →
                </a>
            @endif
        </div>

        @if ($sectionItems->isNotEmpty())
            <div class="{{ $sectionLayout === 'rail' ? 'flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 ' . $sectionColumns . ' lg:grid lg:overflow-visible' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 ' . $sectionColumns }}">
                @foreach ($sectionItems as $index => $item)
                    @include('web.home.sections.artwork-card', [
                        'item' => $item,
                        'layout' => $sectionLayout,
                        'badge' => $badge ?? null,
                        'badgeClass' => $badge_class ?? null,
                        'sizes' => $sectionLayout === 'rail'
                            ? '(max-width: 640px) 72vw, (max-width: 1024px) 44vw, 240px'
                            : '(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw',
                        'idPrefix' => Str::slug((string) $title, '-'),
                        'index' => $index,
                    ])
                @endforeach
            </div>
        @else
            <div class="rounded-2xl border border-white/5 bg-nova-800/40 px-6 py-10 text-center">
                <p class="text-sm text-soft">{{ $emptyMessage }}</p>
                @if (!empty($emptyDescription))
                    <p class="mt-1 text-xs text-nova-400">{{ $emptyDescription }}</p>
                @endif
                @if (!empty($emptyCtaHref) && !empty($emptyCtaLabel))
                    <a href="{{ $emptyCtaHref }}" class="mt-4 inline-flex items-center rounded-xl bg-nova-700 px-4 py-2 text-sm font-medium text-white transition hover:bg-nova-600">
                        {{ $emptyCtaLabel }} →
                    </a>
                @endif
            </div>
        @endif
    </section>
@endif