ListFeatures list

---
/**
 * ListFeatures
 * Feature-lijst met icon-tegel per item. Elk item: icoon, titel en beschrijving.
 *
 * Props:
 * - items?: Array<{ icon?: string; title: string; desc: string }>
 */
interface Props {
  items?: { 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.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-feat-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-feat">
      {items.map(item => (
        <li class="lst-feat__item">
          {item.icon && <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>
  </div>
</section>

<style>
.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:#6366f11a;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;color:var(--color-accent, #6366f1)}
.lst-feat__title{display:block;font-size:1rem;font-weight:700;color:var(--color-primary);margin-bottom:.15rem}
.lst-feat__desc{margin:0;font-size:.9375rem;color:var(--color-muted, #555);line-height:1.5}
</style>