@php($data = $section['data'] ?? [])
@php($isVision = $variant === 'vision')
<section id="{{ $variant }}" class="relative overflow-hidden {{ $isVision ? 'py-24 md:py-32' : 'bg-olive py-24 text-cream md:py-32' }}">
    <div class="bg-leaf pointer-events-none absolute inset-0 {{ $isVision ? 'opacity-[.04]' : 'opacity-[.06]' }}"></div>
    <div class="container-page relative grid items-center gap-12 md:grid-cols-2 md:gap-20">
        <div class="space-y-7 {{ $isVision ? 'order-2 md:order-1' : 'order-2 md:order-2' }}">
            <div class="relative inline-flex"><div class="absolute inset-0 rounded-2xl {{ $isVision ? 'bg-cedar/20' : 'bg-cream/20' }} opacity-60 blur-xl"></div><div class="relative grid h-14 w-14 place-items-center rounded-2xl {{ $isVision ? 'bg-gradient-to-br from-cedar/15 to-cedar/5 text-cedar ring-1 ring-cedar/20' : 'bg-cream/10 text-cream ring-1 ring-cream/25' }}">
                @if ($isVision)<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44"/><path d="m13.56 11.747 4.332-.924"/><path d="m16 21-3.105-6.21"/><path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z"/><path d="m6.158 8.633 1.114 4.456"/><path d="m8 21 3.105-6.21"/><circle cx="12" cy="13" r="2"/></svg>@else<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/></svg>@endif
            </div></div>
            <div class="rule-leaf"><span class="block h-px w-8 {{ $isVision ? 'bg-cedar' : 'bg-cream/40' }}"></span><span class="eyebrow {{ $isVision ? '' : 'text-cream/70' }}">{{ $data['eyebrow'] ?? '' }}</span></div>
            <h2 class="display-xl">{{ $data['title_lead'] ?? '' }} <em class="font-light">{{ $data['title_emphasis'] ?? '' }}</em></h2>
            <div class="space-y-5 leading-relaxed {{ $isVision ? 'text-foreground/75' : 'text-cream/85' }}">@foreach ($data['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</div>
        </div>
        <div class="{{ $isVision ? 'order-1 md:order-2' : 'order-1 md:order-1' }}">@if ($media)<img class="w-full rounded-2xl {{ $isVision ? 'shadow-xl' : 'bg-cream shadow-xl' }}" src="{{ $media->url() }}" alt="{{ $media->translation($locale)?->alt_text ?? '' }}" loading="lazy">@endif</div>
    </div>
    @can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" :section-key="'about.' . $variant" :key="'about-inline-'.$locale.'-'.$variant" />@endcan
</section>