Accordion UI Elements

---
/**
 * Accordion
 * Uitklapbare FAQ/content secties met CSS-only animatie.
 */
interface Props {
  items: { question: string; answer: string }[];
  allowMultiple?: boolean;
}
const { items } = Astro.props;
---
<div class="acc">
  {items.map((item, i) => (
    <details class="acc-item" name="accordion">
      <summary class="acc-summary">
        <span class="acc-question">{item.question}</span>
        <span class="acc-icon" aria-hidden="true">+</span>
      </summary>
      <div class="acc-body">
        <p class="acc-answer">{item.answer}</p>
      </div>
    </details>
  ))}
</div>
<style>
  .acc { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; }
  .acc-item { border-bottom: 1px solid #e5e7eb; }
  .acc-item:last-child { border-bottom: none; }
  .acc-summary { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; gap: 1rem; background: #fff; transition: background 0.15s; }
  .acc-summary::-webkit-details-marker { display: none; }
  .acc-summary:hover { background: #f9fafb; }
  .acc-question { font-size: 1rem; font-weight: 600; color: #0a0a0a; }
  .acc-icon { font-size: 1.25rem; color: var(--color-accent,#6366f1); flex-shrink: 0; transition: transform 0.2s; font-weight: 300; line-height: 1; }
  details[open] .acc-icon { transform: rotate(45deg); }
  .acc-body { padding: 0 1.5rem 1.25rem; background: #fff; }
  .acc-answer { font-size: 0.9375rem; color: #6b7280; line-height: 1.65; margin: 0; }
</style>