ListCollapsible list

---
interface Props {
  items: Array<{ question: string; answer: string }>;
}
const { items = [
  { question: "Wat kost een samenwerking met BLURR?", answer: "Onze pakketten starten vanaf €750 per maand, afhankelijk van de gewenste diensten en het advertentiebudget." },
  { question: "Hoe snel zie ik resultaten?", answer: "Bij betaalde advertenties zijn de eerste resultaten al binnen 2-4 weken zichtbaar. SEO vraagt doorgaans 3-6 maanden." },
  { question: "Moet ik langdurig contract aangaan?", answer: "Nee, wij werken met maandelijks opzegbare contracten. Wij verdienen ons geld door resultaten te leveren, niet door je vast te houden." },
  { question: "Werken jullie voor elke branche?", answer: "Wij hebben het meeste ervaring in e-commerce, B2B diensten en lokale bedrijven. Neem contact op voor een intakegesprek." },
] } = Astro.props;
---

<div class="lst-col">
  {items.map((item, i) => (
    <details class="lst-col__detail">
      <summary class="lst-col__summary">
        <span>{item.question}</span>
        <span class="lst-col__icon" aria-hidden="true">+</span>
      </summary>
      <p class="lst-col__answer">{item.answer}</p>
    </details>
  ))}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .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: 0.975rem;
    font-weight: 600;
    color: var(--color-primary);
    user-select: none;
  }
  .lst-col__summary::-webkit-details-marker { display: none; }
  .lst-col__icon {
    font-size: 1.25rem;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
  }
  .lst-col__detail[open] .lst-col__icon { transform: rotate(45deg); }
  .lst-col__answer {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.65;
  }
</style>