@use('App\Support\Img')
@props(['person'])
@php
    $words = preg_split('/\s+/', trim($person->name));
    $last = count($words) > 1 ? array_pop($words) : null;
    $first = $last ? implode(' ', $words) : null;
    $last = $last ?? $words[0];

    $links = array_values(array_filter([
        ['github', $person->github, 'GitHub'],
        ['linkedin', $person->linkedin, 'LinkedIn'],
        ['facebook', $person->facebook, 'Facebook'],
        ['mail', $person->email ? 'mailto:'.$person->email : null, 'Email'],
    ], fn ($l) => $l[1]));

    $dots = 'background-image:radial-gradient(#4c1d95 1.3px,transparent 1.5px);background-size:9px 9px';
@endphp
{{-- Fixed-size card: width and height never change, whatever image is uploaded. --}}
<article class="group relative flex w-full max-w-[15rem] flex-col overflow-hidden rounded-3xl border-2 border-indigo-900 bg-gradient-to-b from-violet-100 via-indigo-50 to-white text-indigo-950 shadow-lg shadow-indigo-900/20 transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-indigo-900/30">
    <div class="pointer-events-none absolute -left-14 -top-2 h-11 w-40 -rotate-45 bg-gradient-to-r from-indigo-900 via-indigo-700 to-violet-400"></div>
    <div class="pointer-events-none absolute left-3 top-24 h-14 w-5 opacity-60" style="{{ $dots }}"></div>
    <div class="pointer-events-none absolute right-3 top-3 h-10 w-10 opacity-60" style="{{ $dots }}"></div>

    {{-- Photo box: fixed size, the whole photo always fits inside (nothing is cropped) --}}
    <div class="relative z-10 h-56 px-2 pt-4">
        @if($person->photo)
            <img src="{{ Img::url($person->photo) }}" alt="{{ $person->name }}" loading="lazy"
                 class="h-full w-full object-contain object-bottom">
        @else
            <svg viewBox="0 0 200 240" class="h-full w-full px-4 text-violet-300" aria-hidden="true">
                <circle cx="100" cy="85" r="42" fill="currentColor"/>
                <path d="M20 240c0-55 36-90 80-90s80 35 80 90z" fill="currentColor"/>
            </svg>
        @endif
    </div>

    {{-- Info panel --}}
    <div class="relative z-20 flex-1 rounded-t-3xl bg-white px-4 pb-5 pt-4 shadow-[0_-6px_18px_rgba(76,29,149,0.10)]">
        <h3 class="truncate whitespace-nowrap text-[15px] font-extrabold leading-tight" title="{{ $person->name }}">
            @if($first)<span class="text-indigo-950">{{ $first }}</span> @endif<span class="text-indigo-800">{{ $last }}</span>
        </h3>
        <div class="mt-2 h-0.5 w-full bg-gradient-to-r from-indigo-900 via-violet-400 to-transparent"></div>

        <p class="mt-2.5 flex min-h-[2.25rem] items-start gap-2 text-xs font-semibold leading-snug text-indigo-950">
            <x-icon name="briefcase" class="mt-px h-4 w-4 shrink-0 text-indigo-900" />
            <span>{{ $person->designation }}</span>
        </p>

        <div class="mt-3 flex min-h-[1.75rem] items-center justify-center gap-2">
            @foreach($links as [$icon, $url, $label])
                @unless($loop->first)<span class="h-4 w-px bg-indigo-200"></span>@endunless
                <a href="{{ $url }}" @if($icon !== 'mail') target="_blank" rel="noopener" @endif aria-label="{{ $label }}"
                   class="flex h-7 w-7 items-center justify-center rounded-full bg-indigo-950 text-white transition hover:scale-110 hover:bg-indigo-700">
                    <x-icon :name="$icon" class="h-3.5 w-3.5" />
                </a>
            @endforeach
        </div>
    </div>

    <div class="pointer-events-none absolute -bottom-4 -right-12 z-30 h-7 w-36 -rotate-45 bg-gradient-to-r from-violet-300 to-indigo-900"></div>
</article>