/* global React, PbIcon, PbEyebrow */

/* Drie stappen — cream achtergrond */
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Huurder appt",
      body: "Geen app, geen portaal. Je huurder gebruikt WhatsApp — net als altijd. Eén nummer voor het hele pand.",
    },
    {
      n: "02",
      title: "AI triageert",
      body: "Pandbeer stelt slimme vragen, vraagt om foto's, checkt of het zelf op te lossen is. Zo niet: de juiste vakman wordt gebeld.",
    },
    {
      n: "03",
      title: "Jij ziet het overzicht",
      body: "Alles wat er gebeurt komt in je dashboard. Audittrail, foto's, status, kosten. Voor jou én voor de eigenaar.",
    },
  ];
  return (
    <section style={{ background: "var(--bg-cream)", padding: "100px 32px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <PbEyebrow>Zo werkt het</PbEyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: "var(--fg-1)", margin: "12px 0 0 0",
          }}>Drie stappen.<br />Geen training. Geen migratie.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {steps.map(s => (
            <div key={s.n} style={{
              background: "#fff", border: "1px solid var(--border-default)", borderRadius: 12,
              padding: 28, display: "flex", flexDirection: "column", gap: 14, minHeight: 220,
            }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 32, color: "var(--color-pandbeer-green)", letterSpacing: "-0.02em", lineHeight: 1 }}>{s.n}</span>
              <h3 style={{ fontSize: 20, fontWeight: 600, color: "var(--fg-1)", letterSpacing: "-0.01em", margin: 0 }}>{s.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--fg-2)", margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PbHowItWorks = HowItWorks;