ListProcess list

---
interface Props {
  steps: Array<{ step: string; title: string; desc: string }>;
}
const { steps = [
  { step: "01", title: "Kennismaking", desc: "Gratis gesprek om jouw doelen te begrijpen." },
  { step: "02", title: "Strategie", desc: "Maatwerk plan op basis van jouw markt." },
  { step: "03", title: "Executie", desc: "Wij gaan live met campagnes en content." },
  { step: "04", title: "Groeien", desc: "Optimaliseren tot de resultaten spreken." },
] } = Astro.props;
---

<div class="lst-proc">
  {steps.map((s, i) => (
    <div class="lst-proc__step">
      <div class="lst-proc__left">
        <div class="lst-proc__circle">{s.step}</div>
        {i < steps.length - 1 && <div class="lst-proc__line"></div>}
      </div>
      <div class="lst-proc__content">
        <strong class="lst-proc__title">{s.title}</strong>
        <p class="lst-proc__desc">{s.desc}</p>
      </div>
    </div>
  ))}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .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);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
  }
  .lst-proc__line {
    width: 2px;
    flex: 1;
    background: #e5e5e5;
    min-height: 1.5rem;
    margin: 0.2rem 0;
  }
  .lst-proc__content {
    padding-bottom: 1.75rem;
    padding-top: 0.25rem;
  }
  .lst-proc__title {
    display: block;
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
  }
  .lst-proc__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.55;
  }
</style>