@use('App\Support\Img')
@props(['member'])
@php
    $dept = $member->department?->code ?: $member->department?->name;
    $meta = collect([$dept, $member->batch ? 'Batch '.$member->batch : null, $member->section ? 'Sec '.$member->section : null])->filter()->implode(' · ');

    $socials = collect([
        'linkedin' => [$member->linkedin, 'LinkedIn'],
        'facebook' => [$member->facebook, 'Facebook'],
        'github' => [$member->github, 'GitHub'],
    ])->filter(fn ($s) => $s[0]);
@endphp

@once
<style>
    .mc { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 1.5rem 1rem 1.1rem; text-align: center; border-radius: 1rem;
        border: 1px solid #e2e8f0; background: radial-gradient(240px circle at 50% 0%, rgba(99, 102, 241, .10), transparent 70%), #fff;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .mc:hover { transform: translateY(-4px); border-color: #c7d2fe; box-shadow: 0 16px 28px -16px rgba(79, 70, 229, .40); }
    .dark .mc { border-color: #1e293b; background: radial-gradient(240px circle at 50% 0%, rgba(99, 102, 241, .18), transparent 70%), rgba(15, 23, 42, .75); }
    .dark .mc:hover { border-color: rgba(129, 140, 248, .5); box-shadow: 0 16px 28px -16px rgba(99, 102, 241, .5); }

    .mc-ring { padding: 3px; border-radius: 9999px; background: linear-gradient(135deg, #3b82f6, #f59e0b); }
    .mc-avatar { display: block; width: 5.25rem; height: 5.25rem; border-radius: 9999px; object-fit: cover; background: #fff; border: 3px solid #fff; }
    .dark .mc-avatar { border-color: #0f172a; background: #0f172a; }

    .mc-name { width: 100%; margin: .9rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; color: #0f172a; }
    .dark .mc-name { color: #fff; }
    .mc-meta { margin: .2rem 0 0; font-size: .8rem; color: #64748b; }
    .dark .mc-meta { color: #94a3b8; }

    .mc-social { display: flex; justify-content: center; gap: .5rem; margin-top: auto; padding-top: 1rem; min-height: 3.35rem; }
    .mc-s { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; cursor: pointer;
        background: #f1f5f9; color: #475569; transition: all .2s ease; }
    .dark .mc-s { background: rgba(30, 41, 59, .8); color: #cbd5e1; }
    .mc-s:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 14px -8px rgba(15, 23, 42, .6); }
    .mc-s:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
    .mc-linkedin:hover { background: #0a66c2; }
    .mc-facebook:hover { background: #1877f2; }
    .mc-github:hover { background: #24292f; }
</style>
@endonce

<article class="mc">
    <span class="mc-ring"><img src="{{ Img::avatar($member->photo, $member->name) }}" alt="{{ $member->name }}" loading="lazy" class="mc-avatar"></span>
    <h3 class="mc-name" title="{{ $member->name }}">{{ $member->name }}</h3>
    <p class="mc-meta">{{ $meta }}</p>

    <div class="mc-social">
        @foreach($socials as $net => [$url, $label])
            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="mc-s mc-{{ $net }}" aria-label="{{ $label }}" title="{{ $label }}">
                <x-icon :name="$net" class="h-4 w-4" />
            </a>
        @endforeach
    </div>
</article>