---
interface Props {
  name: string;
  role: string;
  photo: string;
}

const { name, role, photo } = Astro.props;
const initials = name.split(' ').map((n) => n[0]).slice(0, 2).join('');
---

<div class="card">
  <div class="card-inner">
    <div class="card-fallback" aria-hidden="true">{initials}</div>
    <img
      src={`/images/team/${photo}`}
      alt={name}
      class="card-photo"
      loading="lazy"
      onerror="this.style.opacity='0'"
    />
    <div class="card-overlay">
      <p class="card-name">{name}</p>
      <p class="card-role">{role}</p>
    </div>
  </div>
</div>

<style>
  .card {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    cursor: default;
  }

  .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #0A1510;
  }

  /* Initials fallback — shown when photo fails to load */
  .card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: rgba(240, 250, 245, 0.12);
    z-index: 0;
  }

  /* Photo fills the card */
  .card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    z-index: 1;
    transition:
      transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity   0.3s ease;
  }

  .card:hover .card-photo {
    transform: scale(1.03);
  }

  /* Bottom gradient overlay */
  .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 12px 13px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.65) 50%,
      transparent 100%
    );
    z-index: 2;
    transition: background 0.35s ease;
  }

  .card:hover .card-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.48) 50%,
      transparent 100%
    );
  }

  .card-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 3px;
  }

  .card-role {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.3;
  }
</style>