ListHighlight list

---
interface Props {
  items: Array<{ text: string; highlight?: boolean }>;
}
const { items = [
  { text: "Verhoog je conversieratio met bewezen CRO-technieken", highlight: true },
  { text: "Verlaag je cost-per-acquisition stap voor stap" },
  { text: "Schaal je best-presterende campagnes op het juiste moment", highlight: true },
  { text: "Automatiseer je rapportage en bespaar uren per week" },
  { text: "Bouw een duurzaam kanaal naast je betaalde traffic", highlight: true },
] } = Astro.props;
---

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

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-hl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .lst-hl__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-primary);
    background: transparent;
    transition: background 0.15s;
  }
  .lst-hl__item--hl {
    background: rgba(99,102,241,0.07);
    font-weight: 600;
  }
  .lst-hl__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.35rem;
  }
</style>