// Services.jsx — drie diensten in het Nederlands
function ServiceCard({ icon, title, body, bullets }) {
  return (
    <article className="svc">
      <span className="ic">{icon}</span>
      <h3>{title}</h3>
      <p>{body}</p>
      <ul>
        {bullets.map((b, i) => (
          <li key={i}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg>
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </article>
  );
}

function Services() {
  return (
    <section className="section container" id="diensten">
      <div className="section-head">
        <div>
          <span className="eyebrow">Wat we doen</span>
          <h2>Drie dingen. Elke dag dezelfde drie.</h2>
        </div>
        <p className="right">Drie productlijnen, één stack eronder. We verkopen wat we zelf gebruiken; we gebruiken wat we verkopen.</p>
      </div>

      <div className="svc-grid">
        <ServiceCard
          icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="m7.5 4.27 9 5.15"/><path d="M21 8 12 13 3 8"/><path d="M3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8z"/></svg>}
          title="E-commerce Specialisme"
          body="Wij runnen de volledige e-commerce backend. Catalogusbeheer, checkout, verzending en retouren op infrastructuur die wij zelf onderhouden."
          bullets={["Shopify + eigen stack", "iDEAL, Bancontact, SEPA", "End-to-end backend beheer"]}
        />
        <ServiceCard
          icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M12 8V4M9 4h6"/><circle cx="9" cy="14" r="1" fill="currentColor"/><circle cx="15" cy="14" r="1" fill="currentColor"/></svg>}
          title="AI SaaS Producten"
          body="Wij bouwen en verkopen eigen AI-producten. Nousu is ons platform voor geautomatiseerde klantenservice, getraind op echte e-commerce flows."
          bullets={["Nousu: AI klantenservice", "78% automatisch afgehandeld", "On-premise optioneel"]}
        />
        <ServiceCard
          icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>}
          title="Website Development"
          body="Voor bedrijven die een sterke online aanwezigheid willen zonder eigen dev-team. Snel, scherp, zonder verassingen."
          bullets={["Op maat gebouwde websites", "Vaste prijs, geen verrassingen", "Beperkte beschikbaarheid"]}
        />
      </div>
    </section>
  );
}

Object.assign(window, { Services, ServiceCard });