IconAccordion icon

---
/**
 * IconAccordion
 * Uitklapbare accordion met icon, titel en inhoud
 */
interface AccordionItem {
  icon: string;
  title: string;
  content: string;
}
interface Props {
  items?: AccordionItem[];
}
const { items = [
  { icon: '🎯', title: 'Strategie op maat', content: 'We beginnen elk project met een diepgaande analyse van jouw markt, doelgroep en concurrenten. Zo bouwen we campagnes die écht werken.' },
  { icon: '📊', title: 'Data-gedreven aanpak', content: 'Elk besluit wordt onderbouwd met harde cijfers. Van A/B-tests tot heatmaps — we optimaliseren continu op basis van data.' },
  { icon: '🚀', title: 'Snelle lancering', content: 'Van briefing tot live campagne in twee weken. Ons team werkt gestructureerd en snel zonder in te leveren op kwaliteit.' },
  { icon: '🔄', title: 'Continue optimalisatie', content: 'We stoppen niet bij de lancering. Maandelijkse rapportages en doorlopende optimalisatie zorgen voor groeiende resultaten.' },
] } = Astro.props;
---

<div class="ia-wrap">
  {items.map((item, i) => (
    <details class="ia-item" open={i === 0}>
      <summary class="ia-summary">
        <span class="ia-icon">{item.icon}</span>
        <span class="ia-title">{item.title}</span>
        <span class="ia-chevron">▾</span>
      </summary>
      <div class="ia-body">
        <p>{item.content}</p>
      </div>
    </details>
  ))}
</div>

<style>
  .ia-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 680px;
    margin: 0 auto;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ia-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .ia-item[open] {
    border-color: var(--color-accent);
  }
  .ia-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fff;
  }
  .ia-summary::-webkit-details-marker { display: none; }
  .ia-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
  }
  .ia-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  .ia-chevron {
    font-size: 1.1rem;
    color: var(--color-accent);
    transition: transform 0.25s;
  }
  .ia-item[open] .ia-chevron {
    transform: rotate(180deg);
  }
  .ia-body {
    padding: 0 20px 18px 64px;
    background: #fafafa;
  }
  .ia-body p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.65;
    color: #374151;
  }
</style>