IconTeam icon

---
/**
 * IconTeam
 * Team-blok: titel boven een grid van personen-kaarten met initialen-avatar,
 * naam, rol en skill-tags. Prop-driven.
 *
 * Props:
 * - title?: string
 * - members: { initials: string; name: string; role: string; skills?: string[] }[]
 */
interface Member {
  initials: string;
  name: string;
  role: string;
  skills?: string[];
}
interface Props {
  title?: string;
  members?: Member[];
}
const { title, members = [] } = Astro.props;
---

<section class="bl-section itm">
  <div class="bl-inner itm-inner">
    {title && <h2 class="itm__title">{title}</h2>}
    <div class="itm__grid">
      {members.map((m) => (
        <div class="itm__card">
          <div class="itm__avatar" aria-hidden="true">{m.initials}</div>
          <div class="itm__info">
            <p class="itm__name">{m.name}</p>
            <p class="itm__role">{m.role}</p>
            {m.skills && m.skills.length > 0 && (
              <div class="itm__skills">
                {m.skills.map((s) => <span class="itm__skill">{s}</span>)}
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.itm__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2rem;text-align:center}
.itm__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.itm__card{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#fff;border:1px solid #eee;border-radius:12px;transition:box-shadow .2s}
.itm__card:hover{box-shadow:0 4px 16px #00000012}
.itm__avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent, #6366f1) 0%,#818cf8 100%);color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.itm__info{flex:1;min-width:0}
.itm__name{font-size:1.05rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .15rem}
.itm__role{font-size:.9rem;color:var(--color-accent, #6366f1);margin:0 0 .75rem;font-weight:600}
.itm__skills{display:flex;flex-wrap:wrap;gap:.4rem}
.itm__skill{font-size:.8rem;background:#f0f0ff;color:#4b4b63;padding:.25rem .6rem;border-radius:4px;font-weight:600}
@media (max-width:600px){.itm__grid{grid-template-columns:1fr}}
</style>