@php
    $details = collect($block->get('details') ?: []);
    $achievements = collect($block->get('achievements') ?: []);
    $social = collect($block->get('social') ?: []);
    $centered = in_array($variant, ['centered', 'quote_focus'], true);
    $overlay = $variant === 'overlay_split';

    // 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
        : '';
@endphp

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('eyebrow') || $block->get('section_title'))
        <header class="mb-10 {{ $ruleAlign === 'center' ? 'text-center' : 'text-start' }}">
            @if ($block->get('eyebrow'))
                <p class="ec-eyebrow mb-3">{{ $block->get('eyebrow') }}</p>
            @endif
            @if ($block->get('section_title'))
                <{{ $headingTag }} class="ec-heading text-3xl sm:text-4xl font-black {{ $ruleClass }}">
                    {!! website_highlight($block->get('section_title')) !!}
                </{{ $headingTag }}>
            @endif
        </header>
    @endif

    <div class="{{ $centered ? 'flex flex-col items-center text-center gap-6 max-w-3xl mx-auto' : 'grid md:grid-cols-[minmax(0,22rem)_1fr] gap-10 lg:gap-16 items-start' }}
                {{ $variant === 'card' ? 'ec-surface rounded-3xl p-8 shadow-sm' : '' }}">

        <figure class="{{ $centered ? 'w-40' : 'w-full' }} shrink-0 {{ $overlay ? 'relative overflow-hidden rounded-2xl' : '' }}">
            <img src="{{ $block->get('photo') }}" alt="{{ $block->get('name') }}" loading="lazy"
                 class="w-full {{ $centered ? 'aspect-square rounded-full' : 'aspect-[4/5] rounded-2xl' }} object-cover">

            @if ($overlay && ($block->get('name') || $block->get('role')))
                {{-- Name and role sit on the portrait itself, so the person is
                     identified in the same glance as their face. --}}
                <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/45 to-transparent p-5 pt-16">
                    @if ($block->get('name'))
                        <h3 class="text-white text-2xl font-bold leading-tight">{{ $block->get('name') }}</h3>
                    @endif
                    @if ($block->get('role'))
                        <p class="ec-accent-text text-sm font-bold uppercase tracking-widest mt-1">{{ $block->get('role') }}</p>
                    @endif
                </figcaption>
            @endif
        </figure>

        <div class="flex flex-col gap-5 min-w-0">
            @unless ($overlay)
                <div class="flex flex-col gap-1">
                    @if ($block->get('badge'))
                        <span class="ec-accent self-start text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full border">{{ $block->get('badge') }}</span>
                    @endif
                    <h3 class="ec-heading text-2xl sm:text-3xl font-bold mt-2">{{ $block->get('name') }}</h3>
                    @if ($block->get('role'))
                        <p class="ec-accent font-medium">{{ $block->get('role') }}</p>
                    @endif
                </div>
            @endunless

            @if ($block->get('callout_label') || $block->get('callout_value'))
                {{-- One credential worth pulling out of the list and framing. --}}
                <div class="ec-surface self-start rounded-xl px-5 py-4 max-w-sm">
                    @if ($block->get('callout_label'))
                        <p class="ec-muted text-xs font-bold uppercase tracking-widest">{{ $block->get('callout_label') }}</p>
                    @endif
                    @if ($block->get('callout_value'))
                        <p class="ec-heading font-bold mt-1 leading-snug">{{ $block->get('callout_value') }}</p>
                    @endif
                </div>
            @endif

            @if ($block->get('quote'))
                <blockquote class="ec-muted italic text-lg leading-relaxed ec-accent-edge">{{ $block->get('quote') }}</blockquote>
            @endif

            @if ($block->get('bio'))
                <div class="ec-prose ec-muted leading-relaxed">{!! clean_html($block->get('bio')) !!}</div>
            @endif

            @if ($details->isNotEmpty())
                <dl class="grid sm:grid-cols-2 gap-3">
                    @foreach ($details as $i => $d)
                        <div class="flex items-start gap-3">
                            @if (data_get($d, 'icon'))
                                <x-website.icon :name="data_get($d, 'icon')" class="w-5 h-5 mt-0.5 ec-accent shrink-0" />
                            @endif
                            <div class="min-w-0">
                                <dt class="ec-muted text-xs uppercase tracking-wide">{{ $block->get("details.{$i}.label") ?: website_text(data_get($d, 'label')) }}</dt>
                                <dd class="font-medium">{{ $block->get("details.{$i}.value") ?: website_text(data_get($d, 'value')) }}</dd>
                            </div>
                        </div>
                    @endforeach
                </dl>
            @endif

            @if ($achievements->isNotEmpty())
                <ul class="grid gap-x-8 gap-y-4 {{ $overlay ? 'sm:grid-cols-2' : '' }}">
                    @foreach ($achievements as $i => $a)
                        <li class="flex items-start gap-3">
                            @if ($overlay)
                                <span class="ec-accent mt-0.5 shrink-0 inline-flex h-5 w-5 items-center justify-center rounded-full border border-current" aria-hidden="true">
                                    <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </span>
                            @else
                                <span class="ec-accent mt-2 w-1.5 h-1.5 rounded-full shrink-0 bg-current"></span>
                            @endif
                            <span class="ec-muted leading-relaxed">{{ $block->get("achievements.{$i}.text") ?: website_text(data_get($a, 'text')) }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif

            @if ($social->isNotEmpty())
                <div class="flex gap-3 {{ $centered ? 'justify-center' : '' }}">
                    @foreach ($social as $s)
                        @php $socialHref = safe_url(data_get($s, 'url')); @endphp
                        @continue (! $socialHref)
                        <a href="{{ $socialHref }}" target="_blank" rel="noopener noreferrer"
                           class="ec-muted hover:opacity-70 transition" aria-label="{{ data_get($s, 'icon') }}">
                            <x-website.icon :name="data_get($s, 'icon')" class="w-5 h-5" />
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
