@php
    $image = $url($data['image'] ?? null);
    $alt = ($data['image_alt'] ?? '') ?: ($pageTitle ?? '');
    $items = $lines($data['items'] ?? '');
    $tags = $lines($data['tags'] ?? '');
    $hasCallout = count($tags) || filled($data['callout_title'] ?? null);
    $order = ($data['image_side'] ?? 'left') === 'right' ? ['copy', 'media'] : ['media', 'copy'];
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        <div @class(['home-split home-split--equal', 'home-split--center' => ! empty($data['centered'])])>
            @foreach($order as $column)
                @if($column === 'media')
                    <div class="min-w-0">
                        @if($hasCallout)
                            <div class="detail-callout">
                                @if(filled($data['callout_eyebrow'] ?? null))
                                    <p class="detail-callout__eyebrow">{{ $data['callout_eyebrow'] }}</p>
                                @endif
                                @if(filled($data['callout_title'] ?? null))
                                    <h3 class="detail-callout__title">{{ $data['callout_title'] }}</h3>
                                @endif
                                @if(count($tags))
                                    <ul class="detail-tags mt-6">
                                        @foreach($tags as $tag)
                                            <li class="detail-tags__item">{{ $tag }}</li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        @endif
                        @if($image !== '')
                            <figure @class(['detail-frame', 'mt-8' => $hasCallout])>
                                <img src="{{ $image }}" alt="{{ $alt }}" 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>
                        @endif
                    </div>
                @else
                    <div class="min-w-0">
                        @if(filled($data['kicker'] ?? null))
                            <p class="home-kicker">{{ $data['kicker'] }}</p>
                        @endif
                        @if(filled($data['body'] ?? null))
                            <div @class(['prose-premium max-w-none', 'mt-3' => filled($data['kicker'] ?? null)])>{!! $data['body'] !!}</div>
                        @endif
                        @if(filled($data['list_title'] ?? null))
                            <h2 class="home-section-title mt-10 !text-lg">{{ $data['list_title'] }}</h2>
                        @endif
                        @if(count($items))
                            @if(($data['list_style'] ?? 'rail') === 'checklist')
                                <ul class="home-checklist mt-5">
                                    @foreach($items as $item)
                                        <li>{{ $item }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <ol class="detail-rail mt-5">
                                    @foreach($items as $i => $item)
                                        <li class="detail-rail__item">
                                            <span class="detail-rail__num">{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>
                                            <span class="detail-rail__text">{{ $item }}</span>
                                        </li>
                                    @endforeach
                                </ol>
                            @endif
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>