ContentAccordion content

---
interface AccordionItem {
  question: string;
  answer: string;
  defaultOpen?: boolean;
}

interface Props {
  heading?: string;
  items?: AccordionItem[];
}

const {
  heading = "Veelgestelde vragen",
  items = [
    {
      question: "Wat kost een samenwerking met BLURR?",
      answer: "Onze trajecten starten vanaf €1.500 per maand, afhankelijk van de scope en kanalen. We werken op basis van een maandelijks retainer, inclusief strategie, executie en rapportage. Mediabudget is daar los van.",
      defaultOpen: true,
    },
    {
      question: "Hoe snel kunnen jullie starten?",
      answer: "Na een eerste kennismakingsgesprek en akkoord op de offerte kunnen we binnen 10 werkdagen live zijn. We werken met een gestroomlijnd onboardingproces zodat we geen tijd verliezen.",
    },
    {
      question: "Werken jullie ook voor kleine bedrijven?",
      answer: "Zeker. We werken voor bedrijven van alle groottes, van ZZP'ers en startups tot corporates. De aanpak past zich aan op het budget en de doelstellingen.",
    },
    {
      question: "Hoe meten jullie resultaten?",
      answer: "We koppelen alle kanalen aan een centraal dashboard (Google Looker Studio). Elke maand ontvang je een rapport met de belangrijkste KPI's: bereik, klikken, conversies en ROAS.",
    },
  ],
} = Astro.props;
---

<section class="cac-wrap">
  {heading && <h2 class="cac-heading">{heading}</h2>}
  <div class="cac-list">
    {items.map((item, i) => (
      <details class="cac-item" open={item.defaultOpen}>
        <summary class="cac-question">
          <span class="cac-q-text">{item.question}</span>
          <span class="cac-chevron" aria-hidden="true">▾</span>
        </summary>
        <div class="cac-answer">
          <p>{item.answer}</p>
        </div>
      </details>
    ))}
  </div>
</section>

<style>
  .cac-wrap { padding: 2.5rem 0; }
  .cac-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 2rem;
  }
  .cac-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
  }
  .cac-item {
    border-bottom: 1px solid #e5e5e5;
  }
  .cac-item:last-child { border-bottom: none; }
  .cac-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    background: #fff;
    transition: background 0.15s;
    gap: 1rem;
  }
  .cac-question:hover { background: #fafafa; }
  .cac-item[open] .cac-question { background: #f9f9ff; }
  .cac-question::-webkit-details-marker { display: none; }
  .cac-q-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    flex: 1;
  }
  .cac-chevron {
    font-size: 1.2rem;
    color: #999;
    transition: transform 0.25s;
    flex-shrink: 0;
  }
  .cac-item[open] .cac-chevron {
    transform: rotate(180deg);
  }
  .cac-answer {
    padding: 0 1.5rem 1.25rem;
    background: #fafafa;
  }
  .cac-answer p {
    font-size: 0.975rem;
    line-height: 1.75;
    color: #555;
    margin: 0;
  }
</style>