ListFeatures list

---
interface Props {
  items: Array<{ icon: string; title: string; desc: string }>;
}
const { items = [
  { icon: "📊", title: "Data-analyse", desc: "Diepgaande inzichten uit jouw cijfers." },
  { icon: "🚀", title: "Campagne lancering", desc: "Snel live met bewezen formats." },
  { icon: "🎯", title: "Doelgroep targeting", desc: "De juiste boodschap op het juiste moment." },
  { icon: "📈", title: "Groei rapportage", desc: "Maandelijks helder overzicht van resultaten." },
] } = Astro.props;
---

<ul class="lst-feat">
  {items.map(item => (
    <li class="lst-feat__item">
      <span class="lst-feat__icon" aria-hidden="true">{item.icon}</span>
      <div>
        <strong class="lst-feat__title">{item.title}</strong>
        <p class="lst-feat__desc">{item.desc}</p>
      </div>
    </li>
  ))}
</ul>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-feat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .lst-feat__item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .lst-feat__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(99,102,241,0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
  }
  .lst-feat__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.15rem;
  }
  .lst-feat__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
  }
</style>