ListCollapsible list

---
/**
 * ListCollapsible
 * Uitklapbare FAQ-lijst met details/summary. Elk item: vraag + antwoord.
 *
 * Props:
 * - items?: Array<{ q: string; a: string }>
 */
interface Props {
  items?: { q: string; a: string }[];
}

const {
  items = [
    { q: 'Wat kost een samenwerking?', a: 'Onze pakketten starten vanaf €750 per maand.' },
    { q: 'Hoe snel zie ik resultaten?', a: 'Bij betaalde advertenties al binnen 2-4 weken.' },
    { q: 'Moet ik een langdurig contract aangaan?', a: 'Nee, we werken met maandelijks opzegbare contracten.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-col-section">
  <div class="bl-inner bl-inner--narrow">
    <div class="lst-col">
      {items.map(item => (
        <details class="lst-col__detail">
          <summary class="lst-col__summary">
            <span>{item.q}</span>
            <span class="lst-col__icon" aria-hidden="true">+</span>
          </summary>
          <p class="lst-col__answer">{item.a}</p>
        </details>
      ))}
    </div>
  </div>
</section>

<style>
.lst-col{display:flex;flex-direction:column;gap:0}
.lst-col__detail{border-bottom:1px solid #efefef}
.lst-col__detail:first-child{border-top:1px solid #efefef}
.lst-col__summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;cursor:pointer;list-style:none;font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a);user-select:none}
.lst-col__summary::-webkit-details-marker{display:none}
.lst-col__icon{font-size:1.25rem;color:var(--color-accent, #6366f1);flex-shrink:0;transition:transform .2s;line-height:1}
.lst-col__detail[open] .lst-col__icon{transform:rotate(45deg)}
.lst-col__answer{margin:0 0 1rem;font-size:.9375rem;color:var(--color-muted, #555);line-height:1.65}
</style>