ListHighlight list

---
/**
 * ListHighlight
 * Lijst met geaccentueerde items. Geselecteerde items krijgen een lichte achtergrond + boldgewicht.
 *
 * Props:
 * - items?: Array<{ text: string; highlighted?: boolean }>
 */
interface Props {
  items?: { text: string; highlighted?: boolean }[];
}

const {
  items = [
    { text: 'Verhoog je conversieratio met bewezen CRO-technieken', highlighted: true },
    { text: 'Verlaag je cost-per-acquisition stap voor stap' },
    { text: 'Schaal je best-presterende campagnes op het juiste moment', highlighted: true },
    { text: 'Automatiseer je rapportage en bespaar uren per week' },
  ],
} = Astro.props;
---

<section class="bl-section lst-hl-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-hl">
      {items.map(item => (
        <li class={`lst-hl__item${item.highlighted ? ' lst-hl__item--hl' : ''}`}>
          <span class="lst-hl__dot" aria-hidden="true"></span>
          <span class="lst-hl__text">{item.text}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lst-hl__item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .85rem;border-radius:.5rem;font-size:1rem;color:var(--color-primary, #0a0a0a);background:transparent;transition:background .15s}
.lst-hl__item--hl{background:color-mix(in srgb,var(--color-accent,#6366f1) 8%,transparent);font-weight:600}
.lst-hl__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent, #6366f1);flex-shrink:0;margin-top:.35rem}
</style>