@php
    $imageFirst = $variant === 'image_start';
    $ratio = ['square' => 'aspect-square', 'portrait' => 'aspect-[3/4]', 'landscape' => 'aspect-[4/3]', 'wide' => 'aspect-[16/9]', 'auto' => ''][$block->get('image_ratio', 'landscape')] ?? '';
    // The rule follows the heading's own alignment so it never floats away
    // from the text it underlines.
    // A page needs exactly one h1; which section carries it is authored.
    $headingTag = $block->get('heading_level') === 'h1' ? 'h1' : 'h2';
    $ruleAlign = ($block->get('header_align') ?? 'start') === 'center' ? 'center' : 'start';
    $ruleClass = $block->get('heading_rule') === 'accent_bar'
        ? 'ec-heading-rule ec-heading-rule--'.$ruleAlign
        : '';
    $frameClass = [
        'offset_outline' => 'ec-frame-offset',
        'border' => 'ec-frame-border',
        'tilt' => 'ec-frame-tilt',
    ][$block->get('image_frame', 'none')] ?? '';
    $bullets = collect($block->get('bullets') ?: []);
    $buttons = collect($block->get('buttons') ?: []);
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 gap-10 lg:gap-16 items-center">
        <div class="{{ $imageFirst ? 'md:order-1' : 'md:order-2' }}">
            <figure class="{{ $frameClass }} {{ $variant === 'overlap' ? 'md:-mb-16 shadow-2xl' : '' }}">
                <img src="{{ $block->get('image') }}" alt="{{ $block->get('title') }}"
                     loading="lazy" class="w-full {{ $ratio }} object-cover rounded-2xl">
                @if ($block->get('image_caption'))
                    <figcaption class="ec-muted mt-3 text-sm text-center">{{ $block->get('image_caption') }}</figcaption>
                @endif
            </figure>
        </div>
        <div class="{{ $imageFirst ? 'md:order-2' : 'md:order-1' }} flex flex-col gap-5">
            @if ($block->get('eyebrow'))
                <p class="ec-eyebrow text-sm font-semibold uppercase tracking-widest">{{ $block->get('eyebrow') }}</p>
            @endif
            <{{ $headingTag }} class="ec-heading text-3xl sm:text-4xl font-bold {{ $ruleClass }}">
                {!! website_highlight($block->get('title')) !!}
            </{{ $headingTag }}>
            @if ($block->get('body'))
                <div class="ec-prose ec-muted leading-relaxed {{ $block->get('body_accent_edge') ? 'ec-accent-edge' : '' }}">
                    {!! clean_html($block->get('body')) !!}
                </div>
            @endif
            @if ($bullets->isNotEmpty())
                <ul class="flex flex-col gap-3">
                    @foreach ($bullets as $i => $bullet)
                        <li class="flex items-start gap-3">
                            <x-website.icon :name="data_get($bullet, 'icon', 'check')" class="w-5 h-5 mt-1 shrink-0 ec-accent" />
                            <span>{{ $block->get("bullets.{$i}.text") ?: website_text(data_get($bullet, 'text')) }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
            @if ($buttons->isNotEmpty())
                <div class="flex flex-wrap gap-3 mt-2">
                    @foreach ($buttons as $i => $btn)
                        @php $btnHref = safe_url(data_get($btn, 'url')); @endphp
                        @continue (! $btnHref)
                        <a href="{{ $btnHref }}"
                           class="ec-btn ec-btn--{{ data_get($btn, 'style', 'primary') }} inline-flex items-center rounded-full px-6 py-3 font-semibold transition">
                            {{ $block->get("buttons.{$i}.label") ?: website_text(data_get($btn, 'label')) }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
