ListSteps list

---
/**
 * ListSteps
 * Genummerde stappenlijst. Elke stap: nummer, titel en beschrijving.
 *
 * Props:
 * - items?: Array<{ title: string; desc?: string }>   (nummers worden auto-gegenereerd)
 */
interface Props {
  items?: { title: string; desc?: string }[];
}

const {
  items = [
    { title: 'Boek een gratis gesprek', desc: 'Geheel vrijblijvend.' },
    { title: 'Ontvang je strategie', desc: 'Binnen enkele werkdagen.' },
    { title: 'Start met groeien', desc: 'Snel live met je eerste campagnes.' },
  ],
} = Astro.props;

const pad = (n: number) => String(n).padStart(2, '0');
---

<section class="bl-section lst-steps-section">
  <div class="bl-inner bl-inner--narrow">
    <div class="lst-steps">
      {items.map((item, i) => (
        <div class="lst-steps__step">
          <div class="lst-steps__header">
            <span class="lst-steps__n">{pad(i + 1)}</span>
            <strong class="lst-steps__title">{item.title}</strong>
          </div>
          {item.desc && <p class="lst-steps__desc">{item.desc}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.lst-steps{display:flex;flex-direction:column;gap:0}
.lst-steps__step{padding:1.5rem 0;border-bottom:1px solid #efefef}
.lst-steps__step:last-child{border-bottom:none}
.lst-steps__header{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.5rem}
.lst-steps__n{font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--color-accent);font-variant-numeric:tabular-nums}
.lst-steps__title{font-size:1.1rem;font-weight:700;color:var(--color-primary)}
.lst-steps__desc{margin:0;font-size:1rem;color:var(--color-muted, #555);line-height:1.6;padding-left:1.75rem}
</style>