<div class="card h-100 border-0 shadow hover-card overflow-hidden">
    <div class="card-body p-4 text-center">
        <div class="mb-3 mx-auto bg-{{ $color ?? 'primary' }} bg-opacity-10 text-{{ $color ?? 'primary' }} rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
            <i class="bi bi-{{ $icon ?? 'person' }} fs-1"></i>
        </div>
        <h5 class="fw-bold mb-1">{{ $name }}</h5>
        <p class="text-secondary small mb-3 text-uppercase fw-bold tracking-wide">{{ $role }}</p>
        <div class="d-flex justify-content-center gap-2">
            @if(!empty($links['linkedin']))
                <a href="{{ $links['linkedin'] }}" target="_blank" class="btn btn-sm btn-outline-primary rounded-circle" style="width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;" title="LinkedIn"><i class="bi bi-linkedin"></i></a>
            @endif
            @if(!empty($links['github']))
                <a href="{{ $links['github'] }}" target="_blank" class="btn btn-sm btn-outline-dark rounded-circle" style="width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;" title="GitHub"><i class="bi bi-github"></i></a>
            @endif
            @if(!empty($links['instagram']))
                <a href="{{ $links['instagram'] }}" target="_blank" class="btn btn-sm btn-outline-danger rounded-circle" style="width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;" title="Instagram"><i class="bi bi-instagram"></i></a>
            @endif
        </div>
    </div>
</div>
