IconNumbers icon

---
/**
 * IconNumbers
 * Genummerde stappen met icoon en beschrijving
 */
interface NumberItem {
  icon: string;
  number: string;
  title: string;
  desc: string;
}
interface Props {
  items?: NumberItem[];
}
const { items = [
  { icon: '🔍', number: '01', title: 'Intake & analyse', desc: 'We verkennen jouw markt, doelgroep en concurrenten. Alles om een strategie te bouwen die echt werkt.' },
  { icon: '📋', number: '02', title: 'Strategisch plan', desc: 'Een concreet marketingplan met prioriteiten, kanalen en KPI\'s — goedgekeurd door jou.' },
  { icon: '🚀', number: '03', title: 'Uitvoering & lancering', desc: 'Ons team zet alles live. Van campagnes tot content — snel en zorgvuldig.' },
  { icon: '📊', number: '04', title: 'Meten & optimaliseren', desc: 'Wekelijkse monitoring en maandelijkse optimalisatieronde zorgen voor blijvende groei.' },
] } = Astro.props;
---

<div class="inum-wrap">
  {items.map(item => (
    <div class="inum-item">
      <div class="inum-left">
        <span class="inum-number">{item.number}</span>
        <div class="inum-line"></div>
      </div>
      <div class="inum-body">
        <span class="inum-icon">{item.icon}</span>
        <h3 class="inum-title">{item.title}</h3>
        <p class="inum-desc">{item.desc}</p>
      </div>
    </div>
  ))}
</div>

<style>
  .inum-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 620px;
    font-family: system-ui, sans-serif;
    padding: 24px;
  }
  .inum-item {
    display: flex;
    gap: 20px;
  }
  .inum-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }
  .inum-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .inum-line {
    width: 2px;
    flex: 1;
    background: #e5e7eb;
    margin: 4px 0;
  }
  .inum-item:last-child .inum-line { display: none; }
  .inum-body {
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .inum-item:last-child .inum-body { padding-bottom: 0; }
  .inum-icon { font-size: 1.2rem; }
  .inum-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .inum-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: #6b7280;
  }
</style>