ListBullets list

---
/**
 * ListBullets
 * Compacte bullet-lijst met optionele titel. Elke bullet: gekleurde dot + tekst.
 *
 * Props:
 * - title?: string
 * - items?: string[]
 */
interface Props {
  title?: string;
  items?: string[];
}

const {
  title = 'Voordelen',
  items = [
    'Transparante rapportage',
    'Geen lange contracten',
    'Vast aanspreekpunt',
    'Doorlopende updates',
    'Resultaatgericht',
  ],
} = Astro.props;
---

<section class="bl-section lst-bul">
  <div class="bl-inner bl-inner--narrow lst-bul__inner">
    {title && <p class="lst-bul__title">{title}</p>}
    <ul class="lst-bul__list">
      {items.map(item => (
        <li class="lst-bul__item">
          <span class="lst-bul__dot"></span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-bul__title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 .75rem}
.lst-bul__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.lst-bul__item{display:flex;align-items:center;gap:.75rem;font-size:1rem;color:var(--color-primary)}
.lst-bul__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent, #6366f1);flex-shrink:0}
</style>