ListProcess list

---
/**
 * ListProcess
 * Verticaal procesdiagram met nummercirkel, verbindingslijn, titel en beschrijving per stap.
 *
 * Props:
 * - steps?: Array<{ title: string; desc?: string }>
 */
interface Props {
  steps?: { title: string; desc?: string }[];
}

const {
  steps = [
    { title: 'Kennismaking', desc: 'Gratis gesprek om jouw doelen te begrijpen.' },
    { title: 'Strategie', desc: 'Maatwerk plan op basis van jouw markt.' },
    { title: 'Executie', desc: 'Wij gaan live met campagnes en content.' },
    { title: 'Groeien', desc: 'Optimaliseren tot de resultaten spreken.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-proc-section">
  <div class="bl-inner bl-inner--narrow">
    <div class="lst-proc">
      {steps.map((step, i) => (
        <div class="lst-proc__step">
          <div class="lst-proc__left">
            <div class="lst-proc__circle">{String(i + 1).padStart(2, '0')}</div>
            {i < steps.length - 1 && <div class="lst-proc__line"></div>}
          </div>
          <div class="lst-proc__content">
            <strong class="lst-proc__title">{step.title}</strong>
            {step.desc && <p class="lst-proc__desc">{step.desc}</p>}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.lst-proc{display:flex;flex-direction:column}
.lst-proc__step{display:flex;gap:1.25rem}
.lst-proc__left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.lst-proc__circle{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--color-accent, #6366f1);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.04em}
.lst-proc__line{width:2px;flex:1;background:#e5e5e5;min-height:1.5rem;margin:.2rem 0}
.lst-proc__content{padding-bottom:1.75rem;padding-top:.25rem}
.lst-proc__title{display:block;font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.2rem}
.lst-proc__desc{margin:0;font-size:.9375rem;color:var(--color-muted, #555);line-height:1.55}
</style>