ContentFAQ content

---
interface FAQItem {
  question: string;
  answer: string;
}

interface Props {
  heading?: string;
  subtext?: string;
  items?: FAQItem[];
  columns?: 1 | 2;
}

const {
  heading = "Alles wat je wilt weten",
  subtext = "Staat jouw vraag er niet bij? Neem gerust contact op — we beantwoorden je binnen een dag.",
  columns = 1,
  items = [
    { question: "Werken jullie ook met kleine budgetten?", answer: "Ja. We hebben pakketten vanaf €1.500/mnd excl. mediabudget. Voor startups en kleine bedrijven bieden we een afgeslankte variant aan die focus legt op één kanaal." },
    { question: "Kunnen jullie ook onze website bouwen?", answer: "Absoluut. We bouwen websites in Astro, Next.js en WordPress. Altijd met focus op conversie en snelheid." },
    { question: "Hoe lang duurt een gemiddelde samenwerking?", answer: "De meeste klanten werken 12–18 maanden met ons samen. Maar we bieden ook projectmatige trajecten aan zoals websitebouw of eenmalige campagnes." },
    { question: "Rapporteren jullie transparant over kosten?", answer: "Ja, altijd. Je krijgt inzicht in iedere euro mediabudget die we besteden, inclusief kosten per klik, per lead en per sale." },
    { question: "Hebben jullie ervaring in mijn branche?", answer: "We hebben gewerkt voor e-commerce, SaaS, zorg, vastgoed, horeca en B2B dienstverleners. Tijdens de intake kijken we specifiek naar jouw markt." },
    { question: "Kan ik op elk moment stoppen?", answer: "We werken zonder langlopende contracten. Na een minimale looptijd van 3 maanden kun je maandelijks opzeggen." },
  ],
} = Astro.props;
---

<section class="cfq-wrap">
  <div class="cfq-header">
    {heading && <h2 class="cfq-heading">{heading}</h2>}
    {subtext && <p class="cfq-subtext">{subtext}</p>}
  </div>
  <div class={`cfq-grid cfq-grid--${columns}`}>
    {items.map(item => (
      <div class="cfq-item">
        <h3 class="cfq-question">{item.question}</h3>
        <p class="cfq-answer">{item.answer}</p>
      </div>
    ))}
  </div>
</section>

<style>
  .cfq-wrap { padding: 3rem 0; }
  .cfq-header { margin-bottom: 2.5rem; }
  .cfq-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.75rem;
  }
  .cfq-subtext {
    font-size: 1rem;
    color: #666;
    margin: 0;
  }
  .cfq-grid {
    display: grid;
    gap: 2rem;
  }
  .cfq-grid--1 { grid-template-columns: 1fr; }
  .cfq-grid--2 { grid-template-columns: 1fr 1fr; }
  @media (max-width: 640px) {
    .cfq-grid--2 { grid-template-columns: 1fr; }
  }
  .cfq-item {
    padding-bottom: 2rem;
    border-bottom: 1px solid #ebebeb;
  }
  .cfq-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.6rem;
  }
  .cfq-answer {
    font-size: 0.975rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
  }
</style>