@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')] ?? '';
    $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="{{ $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
            <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @if ($block->get('body'))
                <div class="ec-prose ec-muted leading-relaxed">{!! 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") ?: 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") ?: data_get($btn, 'label') }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
