IconTeam icon

---
interface TeamMember {
  name: string;
  role: string;
  skills: string[];
}

interface Props {
  members?: TeamMember[];
  title?: string;
}

const {
  members = [
    { name: 'Lotte van den Berg', role: 'Strategy Director', skills: ['🎯 Strategie', '📊 Analytics', '💼 B2B'] },
    { name: 'Daan Visser', role: 'Creative Director', skills: ['✏️ Design', '🎨 Branding', '📸 Video'] },
    { name: 'Emma de Vries', role: 'Performance Lead', skills: ['📈 Google Ads', '📘 Meta', '💰 E-commerce'] },
    { name: 'Noah Smit', role: 'Tech Lead', skills: ['🌐 Web', '⚡ Astro', '🔍 SEO'] },
  ],
  title = 'Ons team',
} = Astro.props;
---

<section class="itm">
  {title && <h2 class="itm__title">{title}</h2>}
  <div class="itm__grid">
    {members.map((member) => (
      <div class="itm__card">
        <div class="itm__avatar" aria-hidden="true">
          {member.name.split(' ').slice(0,2).map(n => n[0]).join('')}
        </div>
        <div class="itm__info">
          <p class="itm__name">{member.name}</p>
          <p class="itm__role">{member.role}</p>
          <div class="itm__skills">
            {member.skills.map((skill) => (
              <span class="itm__skill">{skill}</span>
            ))}
          </div>
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .itm { padding: 2rem 0; }
  .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 0.2s;
  }
  .itm__card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
  .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: 0.95rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.15rem;
  }
  .itm__role {
    font-size: 0.8rem;
    color: var(--color-accent, #6366f1);
    margin: 0 0 0.75rem;
    font-weight: 600;
  }
  .itm__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .itm__skill {
    font-size: 0.72rem;
    background: #f0f0ff;
    color: #555;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
  }
  @media (max-width: 640px) {
    .itm__grid { grid-template-columns: 1fr; }
  }
</style>