TextAccordion text

---
/**
 * TextAccordion
 * Accordion-stijl uitklapbare tekstsecties
 */
interface AccordionItem {
  title: string;
  content: string;
}
interface Props {
  items?: AccordionItem[];
}
const { items = [
  { title: 'Wat maakt BLURR anders dan andere bureaus?', content: 'We werken als intern team, niet als externe leverancier. Dat betekent korte lijnen, snelle beslissingen en volledige betrokkenheid bij jouw groeidoelen. Geen account managers die berichten doorsturen — directe communicatie met de mensen die het werk doen.' },
  { title: 'Voor welke bedrijven werkt BLURR?', content: 'Onze ideale klant is een ambitieus scale-up of MKB-bedrijf met een bewezen product of dienst, dat structureel wil investeren in groei. We werken in diverse sectoren maar zijn sterk in e-commerce, B2B SaaS en dienstverlenende bedrijven.' },
  { title: 'Hoe snel zie ik resultaten?', content: 'Paid media campagnes leveren doorgaans binnen 2-4 weken eerste data op. SEO is een langetermijninvestering waarbij je na 3-6 maanden significante verschuivingen ziet. We stellen per kanaal realistische verwachtingen in onze onboarding.' },
  { title: 'Wat kost samenwerking met BLURR?', content: 'Onze retainermodellen beginnen bij €1.500 per maand voor een specifiek kanaal en lopen op tot volledige marketing outsourcing. We bieden geen losse uurtjespakketten — duurzame samenwerking geeft de beste resultaten voor beide partijen.' },
] } = Astro.props;
---

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

<style>
  .tacc-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 720px;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .tacc-item {
    border-bottom: 1px solid #e5e7eb;
  }
  .tacc-item:first-child { border-top: 1px solid #e5e7eb; }
  .tacc-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .tacc-summary::-webkit-details-marker { display: none; }
  .tacc-q {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.4;
  }
  .tacc-caret {
    font-size: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: transform 0.25s;
  }
  .tacc-item[open] .tacc-caret { transform: rotate(180deg); }
  .tacc-body {
    padding: 0 0 20px;
  }
  .tacc-body p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #4b5563;
  }
</style>