@if(!empty($showWelcomeSpacer))
    <div class="mt-10 px-4 sm:px-6 lg:px-8" aria-hidden="true">
        <div class="h-20 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70"></div>
    </div>
@endif

@foreach(($variants ?? []) as $variant)
    @if($variant === 'tags')
        <section class="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
            <div class="mb-5 h-8 w-48 animate-pulse rounded-xl bg-nova-800/70"></div>
            <div class="flex flex-wrap gap-2">
                <div class="h-9 w-24 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-32 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-28 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-36 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-24 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-32 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-28 animate-pulse rounded-full bg-nova-800/70"></div>
                <div class="h-9 w-36 animate-pulse rounded-full bg-nova-800/70"></div>
            </div>
        </section>
    @elseif($variant === 'cta')
        <section class="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
            <div class="h-40 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70"></div>
        </section>
    @else
        @php
            $showSubtitle = in_array($variant, ['collections', 'groups', 'news'], true);
            $gridClass = match ($variant) {
                'creators' => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
                'news' => 'grid-cols-1',
                'categories' => 'grid-cols-2 lg:grid-cols-4',
                'collections' => 'grid-cols-1 lg:grid-cols-2 xl:grid-cols-3',
                'groups' => 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4',
                default => 'grid-cols-2 xl:grid-cols-4',
            };
            $cardClass = match ($variant) {
                'categories' => 'h-28 rounded-2xl',
                'news' => 'h-24 rounded-2xl',
                'creators' => 'h-64 rounded-2xl',
                'collections', 'groups' => 'h-80 rounded-[28px]',
                default => 'aspect-[4/3] rounded-2xl',
            };
            $cardCount = match ($variant) {
                'creators' => 6,
                'news' => 4,
                default => 4,
            };
        @endphp
        <section class="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
            <div class="mb-5 flex items-center justify-between gap-4">
                <div>
                    <div class="h-8 w-48 animate-pulse rounded-xl bg-nova-800/70"></div>
                    @if($showSubtitle)
                        <div class="mt-3 h-4 w-80 max-w-full animate-pulse rounded bg-nova-800/60"></div>
                    @endif
                </div>
                <div class="hidden h-5 w-24 animate-pulse rounded bg-nova-800/60 sm:block"></div>
            </div>
            <div class="grid gap-4 {{ $gridClass }}">
                @for($i = 0; $i < $cardCount; $i++)
                    <div class="animate-pulse bg-nova-800/70 {{ $cardClass }}"></div>
                @endfor
            </div>
        </section>
    @endif
@endforeach