ListChecklist list

---
/**
 * ListChecklist
 * Checklist met optionele titel. Elk item: ronde check-badge + tekst.
 *
 * Props:
 * - title?: string
 * - items?: string[]
 */
interface Props {
  title?: string;
  items?: string[];
}

const {
  title = 'Inbegrepen',
  items = [
    'Gratis strategiegesprek',
    'Persoonlijk plan op maat',
    'Geen verborgen kosten',
    'Maandelijks opzegbaar',
  ],
} = Astro.props;
---

<section class="bl-section lst-check">
  <div class="bl-inner bl-inner--narrow lst-check__inner">
    {title && <p class="lst-check__title">{title}</p>}
    <ul class="lst-check__list">
      {items.map(item => (
        <li class="lst-check__item">
          <span class="lst-check__icon" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="currentColor"></circle><path d="M4.5 8l2.5 2.5 4.5-5" stroke="#fff" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path></svg>
          </span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-check__title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 .75rem}
.lst-check__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.lst-check__item{display:flex;align-items:center;gap:.65rem;font-size:1rem;color:var(--color-primary)}
.lst-check__icon{flex-shrink:0;display:flex;color:var(--color-accent, #6366f1)}
</style>