@php
    $style = $data['style'] ?? 'mosaic';
    $items = array_values(array_filter($data['items'] ?? [], fn ($i) => filled($i['title'] ?? null) || filled($i['description'] ?? null)));
    $image = $style === 'spotlight' ? '' : $url($data['image'] ?? null);
    $split = $image !== '';
    $order = ($data['image_side'] ?? 'right') === 'left' ? ['media', 'copy'] : ['copy', 'media'];
    $footer = filled($data['footer_text'] ?? null) ? ['text' => $data['footer_text'], 'url' => $href($data['footer_url'] ?? null, '#')] : null;
@endphp

@if($style === 'spotlight')
    <section class="detail-spotlight pb-section pb-section--detail-cards {{ $vis }}" {{ $attrs }}>
        <div class="container-page relative">
            @include('builder.partials.head', ['centered' => true, 'linkUrl' => null, 'linkText' => null])

            <ul class="detail-spotlight__grid">
                @foreach($items as $item)
                    <li>
                        @if(filled($item['url'] ?? null))
                            <a href="{{ $href($item['url']) }}" class="detail-spotlight__card block h-full">
                        @else
                            <div class="detail-spotlight__card h-full">
                        @endif
                            <h3 class="detail-spotlight__card-title">{{ $item['title'] ?? '' }}</h3>
                            @if(filled($item['description'] ?? null))
                                <p class="detail-spotlight__card-text">{{ $item['description'] }}</p>
                            @endif
                            @if(filled($item['url'] ?? null))
                                <span class="detail-spotlight__card-action">{{ ($item['link_text'] ?? '') ?: 'Learn more →' }}</span>
                            @endif
                        @if(filled($item['url'] ?? null))
                            </a>
                        @else
                            </div>
                        @endif
                    </li>
                @endforeach
            </ul>

            @if($footer)
                <div class="mt-8 text-center">
                    <a href="{{ $footer['url'] }}" class="home-text-link !text-teal-200 hover:!text-white">{{ $footer['text'] }}</a>
                </div>
            @endif
        </div>
    </section>
@else
    @php
        $listClass = match ($style) {
            'quotes' => 'detail-challenges',
            'benefits' => 'home-benefit-grid',
            default => $split ? 'detail-mosaic detail-mosaic--stack' : 'detail-mosaic',
        };
    @endphp
    <section class="{{ $cls }}" {{ $attrs }}>
        <div class="container-page">
            @if($split)
                <div class="home-split home-split--equal home-split--center">
                    @foreach($order as $column)
                        @if($column === 'media')
                            <figure class="detail-frame">
                                <img src="{{ $image }}" alt="{{ ($data['image_alt'] ?? '') ?: ($data['title'] ?? '') }}" width="720" height="480" class="home-editorial-photo" loading="lazy" decoding="async">
                                @if(filled($data['image_caption'] ?? null))
                                    <figcaption class="home-figure-caption mt-3">{{ $data['image_caption'] }}</figcaption>
                                @endif
                            </figure>
                        @else
                            <div class="min-w-0">
                                @include('builder.partials.head', ['centered' => false, 'linkUrl' => null, 'linkText' => null])
                                @include('builder.blocks.partials.card-list', ['listClass' => $listClass.' mt-10'])
                            </div>
                        @endif
                    @endforeach
                </div>
            @else
                @include('builder.partials.head', ['centered' => true, 'linkUrl' => null, 'linkText' => null])
                @include('builder.blocks.partials.card-list', ['listClass' => $listClass.' mt-12'])
            @endif

            @if($footer)
                <div class="mt-10 text-center">
                    <a href="{{ $footer['url'] }}" class="home-text-link">{{ $footer['text'] }}</a>
                </div>
            @endif
        </div>
    </section>
@endif