@php($d = $data ?? [])
@php($ae = $adminEditable ?? false)
<section class="bg-white py-16">
    <div class="max-w-7xl mx-auto px-6 lg:px-10 grid md:grid-cols-2 gap-12 items-center">
        @if (($d['image_position'] ?? 'right') === 'left')
            <div class="rounded-2xl overflow-hidden aspect-[4/3] order-1">
                @if (!empty($d['image_url']))
                    <img src="{{ $d['image_url'] }}" class="w-full h-full object-cover">
                @endif
            </div>
            <div class="order-2">
                @if (!empty($d['heading']) || $ae)
                    <h2 @if($ae) contenteditable="true" data-field="heading" data-oneline="1" @endif class="text-[#0a0a0b] text-3xl font-bold tracking-tight mb-4">{{ $d['heading'] ?? '' }}</h2>
                @endif
                <p @if($ae) contenteditable="true" data-field="body" @endif class="text-neutral-600 text-[15px] leading-relaxed whitespace-pre-line">{{ $d['body'] ?? '' }}</p>
            </div>
        @else
            <div class="order-2 md:order-1">
                @if (!empty($d['heading']) || $ae)
                    <h2 @if($ae) contenteditable="true" data-field="heading" data-oneline="1" @endif class="text-[#0a0a0b] text-3xl font-bold tracking-tight mb-4">{{ $d['heading'] ?? '' }}</h2>
                @endif
                <p @if($ae) contenteditable="true" data-field="body" @endif class="text-neutral-600 text-[15px] leading-relaxed whitespace-pre-line">{{ $d['body'] ?? '' }}</p>
            </div>
            <div class="rounded-2xl overflow-hidden aspect-[4/3] order-1 md:order-2">
                @if (!empty($d['image_url']))
                    <img src="{{ $d['image_url'] }}" class="w-full h-full object-cover">
                @endif
            </div>
        @endif
    </div>
</section>