/* @jsx React.createElement */

function Process({ go }) {
  const steps = [
    {
      n: "01",
      title: "Anfrage",
      body: "Schreib mir per WhatsApp, Mail oder über das Kontaktformular, was bei euch los ist. Ich melde mich zeitnah zurück.",
    },
    {
      n: "02",
      title: "Analyse- und Starttermin",
      body: "120 Minuten vor Ort. Ich analysiere euren Ist-Zustand und erarbeite mit dir einen klar strukturierten Fahrplan für die nächsten Schritte.",
    },
    {
      n: "03",
      title: "Gemeinsamer Weg",
      body: "Folgetermine, Intensivtraining, Gruppe oder Mantrailing, je nach dem, was zu euch passt. Du bestimmst das Tempo, ich begleite euch.",
    },
  ];

  return (
    <section style={{ background: "var(--os-paper-2)", borderBottom: "1px solid var(--border-1)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "112px 32px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: 64 }}>
          <div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>Der Ablauf</div>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 48, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "12px 0 0", color: "var(--os-black)" }}>
              So fängt's an.
            </h2>
          </div>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: 16, lineHeight: 1.65, color: "var(--fg-2)", maxWidth: "40ch", margin: 0 }}>
            Vom ersten Kontakt bis zum gemeinsamen Weg. Ohne grosse Hürde, ohne Vertragsbindung.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr auto 1fr", gap: 0, alignItems: "stretch" }}>
          {steps.map((s, i) => (
            <React.Fragment key={s.n}>
              <div style={{ background: "var(--os-white)", padding: "32px 28px 36px", borderTop: "2px solid var(--os-red-485)", display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 16 }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 56, letterSpacing: "-0.02em", color: "var(--os-warmgray-3)", lineHeight: 1 }}>{s.n}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>Schritt {s.n.slice(-1)}</div>
                </div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 22, fontWeight: 600, color: "var(--os-black)", margin: "4px 0 14px", letterSpacing: "-0.01em" }}>{s.title}</div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 16, lineHeight: 1.7, color: "var(--fg-2)" }}>{s.body}</div>
              </div>
              {i < steps.length - 1 && (
                <div className="os-process-arrow" style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 14px" }}>
                  <i data-lucide="arrow-right" style={{ width: 22, height: 22, color: "var(--os-warmgray-5)", strokeWidth: 1.5 }}></i>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={{ marginTop: 56, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go && go("buchung"); }} className="os-cta-red" style={{
            background: "var(--os-red-485)", color: "var(--os-white)",
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
            padding: "14px 24px", borderRadius: 2, textDecoration: "none",
            letterSpacing: "0.04em", textTransform: "uppercase",
            display: "inline-flex", alignItems: "center", gap: 10,
          }}>Jetzt anfragen <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></a>
          <a href="tel:+41798436183" className="os-link-draw is-persistent" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            color: "var(--os-black)", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
          }}>
            <i data-lucide="phone" style={{ width: 14, height: 14, color: "var(--os-red-485)" }}></i>
            079 / 843 61 83
          </a>
        </div>
      </div>
    </section>
  );
}

window.Process = Process;