@php
    $style = $data['style'] ?? 'related';
    $items = array_values(array_filter($data['items'] ?? [], fn ($i) => filled($i['title'] ?? null)));
    $action = ($data['action_text'] ?? '') ?: 'Learn more →';
    $linkUrl = filled($data['link_text'] ?? null) ? $href($data['link_url'] ?? null, '#') : null;
@endphp
@if(count($items) || $preview)
    <section class="{{ $cls }}" {{ $attrs }}>
        <div class="container-page">
            @include('builder.partials.head', ['centered' => false, 'linkUrl' => $linkUrl, 'linkText' => $data['link_text'] ?? null])

            @if(! count($items))
                <p class="mt-8 rounded-xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">Add items to show related cards.</p>
            @elseif($style === 'chips')
                <div class="location-area-grid mt-10">
                    @foreach($items as $item)
                        <a href="{{ $href($item['url'] ?? null, '#') }}" class="location-area-chip">
                            @if(filled($item['label'] ?? null))
                                <span class="location-area-chip__type">{{ $item['label'] }}</span>
                            @endif
                            {{ $item['title'] }}
                        </a>
                    @endforeach
                </div>
            @elseif($style === 'related')
                <div class="detail-related mt-10">
                    @foreach($items as $item)
                        <a href="{{ $href($item['url'] ?? null, '#') }}" class="detail-related__item group">
                            <h3 class="detail-related__title">{{ $item['title'] }}</h3>
                            @if(filled($item['text'] ?? null))
                                <p class="detail-related__text">{{ $item['text'] }}</p>
                            @endif
                            <span class="detail-related__action">{{ $action }}</span>
                        </a>
                    @endforeach
                </div>
            @else
                <div @class(['home-card-grid !mt-0', 'home-card-grid--services' => $style === 'cards'])>
                    @foreach($items as $item)
                        <a href="{{ $href($item['url'] ?? null, '#') }}" @class(['home-card group', 'home-card--study' => $style === 'stories'])>
                            @if(filled($item['label'] ?? null))
                                <p class="home-list__category">{{ $item['label'] }}</p>
                            @endif
                            <h3 class="home-card__title">{{ $item['title'] }}</h3>
                            @if(filled($item['text'] ?? null))
                                <p class="home-card__text">{{ $item['text'] }}</p>
                            @endif
                            <span class="home-card__action">{{ $action }}</span>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
@endif