@php
    $variant = $variant ?? 'sub';
    $wide = $wide ?? false;

    $widthClass = match(true) {
        $wide => 'w-full',
        $variant === 'top' => 'w-[180px]',
        $variant === 'header' => 'w-[170px]',
        default => 'w-[150px]',
    };

    // Color theme per variant
    $theme = match($variant){
        'header' => ['header' => 'from-amber-600 to-orange-600', 'ring' => 'ring-amber-500/40', 'border' => 'border-amber-500/30', 'avatar' => 'from-amber-400 to-orange-500'],
        'top' => ['header' => 'from-indigo-600 to-purple-600', 'ring' => 'ring-indigo-500/40', 'border' => 'border-indigo-500/30', 'avatar' => 'from-indigo-400 to-purple-500'],
        'sub' => ['header' => 'from-blue-600 to-cyan-600', 'ring' => 'ring-blue-500/40', 'border' => 'border-blue-500/30', 'avatar' => 'from-blue-400 to-cyan-500'],
        'bidang' => ['header' => 'from-violet-600 to-fuchsia-600', 'ring' => 'ring-violet-500/40', 'border' => 'border-violet-500/30', 'avatar' => 'from-violet-400 to-fuchsia-500'],
        'member' => ['header' => 'from-slate-700 to-slate-600', 'ring' => 'ring-slate-500/40', 'border' => 'border-slate-500/30', 'avatar' => 'from-slate-400 to-slate-500'],
        default => ['header' => 'from-indigo-600 to-purple-600', 'ring' => 'ring-indigo-500/40', 'border' => 'border-indigo-500/30', 'avatar' => 'from-indigo-400 to-purple-500'],
    };

    $initials = '';
    if(!empty($name) && $name !== '—' && $name !== '-'){
        $parts = explode(' ', trim($name));
        $initials = strtoupper(substr($parts[0] ?? '', 0, 1) . substr($parts[1] ?? '', 0, 1));
    }
@endphp

<div class="{{ $widthClass }} rounded-lg overflow-hidden border {{ $theme['border'] }} bg-gradient-to-b from-white to-slate-50 dark:from-slate-900 dark:to-slate-950 shadow-lg shadow-black/40 mx-auto group hover:scale-[1.02] hover:shadow-xl transition-all duration-200 ring-1 {{ $theme['ring'] }}">
    <!-- Top: Role/Title -->
    <div class="px-2 py-1 bg-gradient-to-r {{ $theme['header'] }} text-center relative">
        <p class="text-[7px] font-extrabold uppercase tracking-wider text-white leading-tight truncate" title="{{ $role }}">{{ $role }}</p>
        <!-- Decorative dot -->
        <div class="absolute top-1 right-1.5 w-1 h-1 rounded-full bg-white/60"></div>
    </div>

    <!-- Body: name + photo -->
    <div class="px-2 py-1.5 text-gray-800 dark:text-gray-100">
        <div class="flex items-center gap-1.5">
            @if(!empty($photo))
                <img src="{{ asset('storage/'.$photo) }}" alt="{{ $name }}" class="w-7 h-7 rounded-full object-cover ring-2 {{ $theme['ring'] }} shrink-0 shadow-md">
            @else
                <div class="w-7 h-7 rounded-full bg-gradient-to-br {{ $theme['avatar'] }} flex items-center justify-center ring-2 {{ $theme['ring'] }} shrink-0 shadow-md">
                    <span class="text-white text-[8px] font-extrabold tracking-wider">{{ $initials ?: '?' }}</span>
                </div>
            @endif
            <div class="flex-1 min-w-0 text-left">
                <div class="text-[9px] font-bold leading-tight truncate" title="{{ $name }}">{{ $name }}</div>
                @if(!empty($noInduk))
                    <div class="text-[7px] text-gray-500 dark:text-gray-400 font-mono leading-tight truncate flex items-center gap-0.5">
                        <span class="opacity-60">#</span>{{ $noInduk }}
                    </div>
                @endif
                @if(!empty($rayon))
                    <div class="text-[7px] text-indigo-600 dark:text-indigo-400 font-bold uppercase tracking-wide truncate leading-tight">{{ $rayon }}</div>
                @endif
            </div>
        </div>
    </div>
</div>