@props([
    'heading' => 'Personal Information',
    'person' => [],
    'kin' => [],
    'photoUrl' => null,
])

@php
    $fullName = data_get($person, 'name');
    $email = data_get($person, 'email');
    $cell = data_get($person, 'cell') ?? data_get($person, 'phone');
    $address = trim((data_get($person, 'address_physical') ?? ''));

    $kinName = data_get($kin, 'name');
    $kinEmail = data_get($kin, 'email');
    $kinCell = data_get($kin, 'primary_contact') ?? data_get($kin, 'secondary_contact');
    $kinAddress = trim((data_get($kin, 'address') ?? ''));
@endphp

<x-filament::section class="mt-6">
    <x-slot name="heading">{{ $heading }}</x-slot>

    {{-- TOP: Profile image --}}
    <div class="flex flex-col items-center">
        @if($photoUrl)
            <img src="{{ $photoUrl }}" alt="Profile Photo" class="h-28 w-28 rounded-full object-cover ring-2 ring-gray-200" />
        @else
            <div class="flex h-28 w-28 items-center justify-center rounded-full bg-gray-100 text-gray-400 ring-2 ring-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4Zm0 2c-3.33 0-6 2.24-6 5v1h12v-1c0-2.76-2.67-5-6-5Z"/>
                </svg>
            </div>
        @endif
    </div>

    {{-- Compact summaries --}}
    <div class="mt-6 grid gap-6 md:grid-cols-2">
        {{-- Personal summary --}}
        <div class="space-y-2">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-600">Personal</h3>
            <dl class="grid grid-cols-[130px_1fr] gap-y-1 text-sm">
                <dt class="text-gray-500">Full Name</dt>
                <dd class="font-medium text-gray-900">{{ $fullName ?: '—' }}</dd>

                <dt class="text-gray-500">Email</dt>
                <dd class="font-mono">{{ $email ?: '—' }}</dd>

                <dt class="text-gray-500">Cell</dt>
                <dd class="font-mono">{{ $cell ?: '—' }}</dd>

                <dt class="text-gray-500">Address</dt>
                <dd class="whitespace-pre-line">{{ $address ?: '—' }}</dd>
            </dl>
        </div>

        {{-- Next of kin summary --}}
        <div class="space-y-2">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-600">Next of Kin</h3>
            <dl class="grid grid-cols-[130px_1fr] gap-y-1 text-sm">
                <dt class="text-gray-500">Full Name</dt>
                <dd class="font-medium text-gray-900">{{ $kinName ?: '—' }}</dd>

                <dt class="text-gray-500">Email</dt>
                <dd class="font-mono">{{ $kinEmail ?: '—' }}</dd>

                <dt class="text-gray-500">Cell</dt>
                <dd class="font-mono">{{ $kinCell ?: '—' }}</dd>

                <dt class="text-gray-500">Address</dt>
                <dd class="whitespace-pre-line">{{ $kinAddress ?: '—' }}</dd>
            </dl>
        </div>
    </div>

</x-filament::section>