@php
    $details = collect($block->get('details') ?: []);
    $achievements = collect($block->get('achievements') ?: []);
    $social = collect($block->get('social') ?: []);
    $centered = in_array($variant, ['centered', 'quote_focus'], true);
@endphp
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('section_title'))
        <h2 class="ec-heading text-3xl sm:text-4xl font-bold text-center mb-12">{{ $block->get('section_title') }}</h2>
    @endif

    <div class="{{ $centered ? 'flex flex-col items-center text-center gap-6 max-w-3xl mx-auto' : 'grid md:grid-cols-[minmax(0,20rem)_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">
            <img src="{{ $block->get('photo') }}" alt="{{ $block->get('name') }}" loading="lazy"
                 class="w-full {{ $centered ? 'aspect-square rounded-full' : 'aspect-[3/4] rounded-2xl' }} object-cover">
        </figure>

        <div class="flex flex-col gap-5 min-w-0">
            <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>

            @if ($block->get('quote'))
                <blockquote class="ec-muted italic text-lg leading-relaxed border-s-4 ps-4">{{ $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") ?: data_get($d, 'label') }}</dt>
                                <dd class="font-medium">{{ $block->get("details.{$i}.value") ?: data_get($d, 'value') }}</dd>
                            </div>
                        </div>
                    @endforeach
                </dl>
            @endif

            @if ($achievements->isNotEmpty())
                <ul class="flex flex-col gap-2">
                    @foreach ($achievements as $i => $a)
                        <li class="flex items-start gap-3">
                            <span class="ec-accent mt-2 w-1.5 h-1.5 rounded-full shrink-0 bg-current"></span>
                            <span class="ec-muted leading-relaxed">{{ $block->get("achievements.{$i}.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>
