Profile Card

---
/**
 * ProfileCard — Image-centric profile card with social links and blur effect.
 * 
 * @param {string} name - The person's full name.
 * @param {string} role - Their job title or role.
 * @param {string} avatarUrl - Optional URL string pointing to their avatar image.
 */
interface Props {
  name: string;
  role: string;
  avatarUrl?: string;
}

const { name, role, avatarUrl } = Astro.props;
---

<div class="profile-card">
  <div class="profile-card__banner"></div>
  <div class="profile-card__avatar" style={avatarUrl ? `background-image: url('${avatarUrl}'); background-size: cover;` : ''}></div>
  <h3 class="profile-card__name">{name}</h3>
  <p class="profile-card__role">{role}</p>
  <div class="profile-card__socials">
    <slot name="socials">
      <!-- Fallback generic icons if no socials slot passed -->
      <span aria-hidden="true">🐦</span>
      <span aria-hidden="true">💼</span>
      <span aria-hidden="true">🌐</span>
    </slot>
  </div>
</div>

<style>
  .profile-card { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-xl, 20px); 
    text-align: center; 
    overflow: hidden; 
    padding-bottom: var(--sp-6, 1.5rem); 
  }
  .profile-card__banner { 
    height: 80px; 
    background: linear-gradient(135deg, var(--c-primary, #6366f1), var(--c-primary-light, #c084fc)); 
  }
  .profile-card__avatar { 
    width: 80px; height: 80px; 
    background-color: var(--c-bg-elev, #334155); 
    border: 4px solid var(--c-bg, #080b14); 
    border-radius: var(--r-full, 50%); 
    margin: -40px auto 1rem; 
  }
  .profile-card__name { color: var(--c-text-1, #fff); margin: 0; }
  .profile-card__role { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); margin: 4px 0 0; }
  .profile-card__socials { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; cursor: pointer; }
</style>