// Stack.jsx — wat er onder de motorkap draait
function StackRow({ layer, name, what, items }) {
  return (
    <div className="stack-row">
      <div className="stack-meta">
        <span className="stack-layer">{layer}</span>
        <span className="stack-name">{name}</span>
        <p>{what}</p>
      </div>
      <div className="stack-items">
        {items.map((it, i) => (
          <span key={i} className="stack-chip">{it}</span>
        ))}
      </div>
    </div>
  );
}

function Stack() {
  return (
    <section className="section container" id="stack">
      <div className="section-head">
        <div>
          <span className="eyebrow">De stack</span>
          <h2>Wat er onder de motorkap draait.</h2>
        </div>
        <p className="right">Open architectuur. Geen afhankelijkheid van een enkele leverancier. Wij bouwen bovenop standaarden, niet op propriëtaire laag.</p>
      </div>

      <div className="stack-list">
        <StackRow
          layer="01"
          name="Storefront"
          what="Waar je klant landt. Custom thema bovenop Shopify, getuned voor mobiel en voor de checkout-flow van de Benelux."
          items={["Shopify Plus", "Next.js", "Algolia", "Cloudflare"]}
        />
        <StackRow
          layer="02"
          name="Operations"
          what="Voorraad, inkoop, picking, retouren. Dezelfde tools die wij voor Snoozetail gebruiken, want we leven er zelf mee."
          items={["PostgreSQL", "Picqer", "Sendcloud", "Mollie"]}
        />
        <StackRow
          layer="03"
          name="AI-laag"
          what="Nousu zit hier. Leest catalogus en beleid, beantwoordt in het Nederlands, escaleert wanneer nodig, altijd met menselijke controle."
          items={["Claude", "GPT-4.1", "pgvector", "LangGraph"]}
        />
        <StackRow
          layer="04"
          name="Observatie"
          what="Wat draait, draait observeerbaar. Geen blinde vlekken op orders, op retouren, op de antwoorden die de AI geeft."
          items={["Grafana", "OpenTelemetry", "Sentry", "Looker"]}
        />
      </div>
    </section>
  );
}

Object.assign(window, { Stack, StackRow });