IconColumns icon

---
/**
 * IconColumns
 * 3-kolom icoon-layout met koptekst en subtitel
 */
interface ColumnItem {
  icon: string;
  title: string;
  desc: string;
}
interface Props {
  headline?: string;
  items?: ColumnItem[];
}
const { headline = 'Wat BLURR voor jou doet', items = [
  { icon: '🎯', title: 'Gerichte strategie', desc: 'Geen losse acties maar een samenhangende aanpak die aansluit op jouw groeifase en budget.' },
  { icon: '⚡', title: 'Snelle uitvoering', desc: 'Van idee naar live campagne in twee weken. Wij bewegen snel zonder in te leveren op kwaliteit.' },
  { icon: '📈', title: 'Meetbare groei', desc: 'Transparante rapportages die aantonen wat de investering oplevert — elke maand opnieuw.' },
] } = Astro.props;
---

<section class="icol-section">
  {headline && <h2 class="icol-headline">{headline}</h2>}
  <div class="icol-grid">
    {items.map(item => (
      <div class="icol-col">
        <div class="icol-icon">{item.icon}</div>
        <h3 class="icol-title">{item.title}</h3>
        <p class="icol-desc">{item.desc}</p>
      </div>
    ))}
  </div>
</section>

<style>
  .icol-section {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    padding: 56px 24px;
    font-family: system-ui, sans-serif;
    max-width: 960px;
    margin: 0 auto;
  }
  .icol-headline {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 40px;
  }
  .icol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  @media (max-width: 640px) {
    .icol-grid { grid-template-columns: 1fr; }
  }
  .icol-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .icol-icon {
    font-size: 2.2rem;
    line-height: 1;
  }
  .icol-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .icol-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #4b5563;
  }
</style>