const guarantees = [
  { num: '01', title: "Wekelijkse demo's", text: 'U ziet elke week wat er gebouwd is — werkende software, geen statusrapporten. Geen black box, geen verrassingen bij oplevering.' },
  { num: '02', title: 'Stoppen na elke sprint', text: 'Geen lock-in, geen opzegtermijn, geen kleine lettertjes. U blijft omdat het werkt — niet omdat het contractueel moet.' },
  { num: '03', title: 'Vaste prijs', text: 'De prijs die we afspreken is de prijs die u betaalt. "Meerwerk" en verrassingsfacturen bestaan hier niet.' },
  { num: '04', title: 'Geld terug na sprint één', text: 'Niet tevreden over de eerste sprint? U krijgt het volledige bedrag terug. Zo zeker zijn we van ons werk.' },
];

function Guarantees() {
  return (
    <section id="garanties" className="guarantees">
      <div className="guarantees-header">
        <span className="section-label">Onze garanties</span>
        <h2>Wij dragen het risico.<br />Niet u.</h2>
        <p className="section-intro">De meeste IT-projecten mislukken door vage afspraken en dichtgetimmerde contracten. Wij draaien het om: vier garanties, zwart op wit.</p>
      </div>
      <div className="guarantees-grid">
        {guarantees.map(g => (
          <div className="guarantee-item" key={g.num}>
            <span className="guarantee-num">{g.num}</span>
            <h3>{g.title}</h3>
            <p>{g.text}</p>
          </div>
        ))}
      </div>
      <div className="guarantee-ip">
        <span className="guarantee-num">05</span>
        <div>
          <h3>De code is úw eigendom. Volledig.</h3>
          <p>Alle broncode, ontwerpen en intellectueel eigendom worden bij oplevering volledig aan u overgedragen — zwart op wit in het contract. Geen licentiekosten, geen afhankelijkheid van ons. U kunt ermee naar elke andere ontwikkelaar, morgen al. Wij verdienen aan goed werk, niet aan lock-in.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Guarantees });