/* global React, useReveal, SectionHeader */

const STEPS = [
  {
    n: "01",
    title: "Sie schreiben mir",
    desc: "WhatsApp, E-Mail oder das Formular hier auf der Seite. Beschreiben Sie kurz was nicht funktioniert — ein Screenshot hilft, ist aber kein Muss.",
    icon: "chat",
  },
  {
    n: "02",
    title: "Wir machen einen Video-Termin",
    desc: "Ich melde mich meist innerhalb weniger Stunden zurück. Sie bekommen einen Link für FaceTime, Jitsi oder Google Meet — ein Klick und Sie sind drin.",
    icon: "cal",
  },
  {
    n: "03",
    title: "Bildschirm teilen — ich übernehme",
    desc: "Per Video-Chat zeigen Sie mir Ihr Problem. Ich führe Sie Schritt für Schritt zur Lösung. Bei Hardware komme ich vor Ort (Radolfzell & Umgebung).",
    icon: "wrench",
  },
  {
    n: "04",
    title: "Sie zahlen — wenn gelöst",
    desc: "Ab 7,90 € pauschal, per PayPal, Überweisung oder Wero. Sollte es wider Erwarten nicht klappen, zahlen Sie nichts. So einfach.",
    icon: "check",
  },
];

function Process() {
  return (
    <section id="ablauf" className="section" style={{ background: "var(--ink)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="blob" style={{ width: 600, height: 600, background: "#7c3aed", top: -200, left: -200, opacity: 0.4 }} />
      <div className="blob" style={{ width: 500, height: 500, background: "#ec4899", bottom: -200, right: -100, opacity: 0.35 }} />

      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <ProcessHeader />
        </div>

        <div className="process-grid">
          {STEPS.map((s, i) => <StepCard key={s.n} {...s} index={i} />)}
        </div>
      </div>

      <style>{`
        .process-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        @media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function ProcessHeader() {
  const ref = useReveal();
  return (
    <div ref={ref} className="reveal">
      <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>So läuft es ab</span>
      <h2 className="section-title" style={{ color: "#fff" }}>
        Vom Problem zur <span className="ital" style={{ background: "linear-gradient(120deg, #c4b5fd, #f9a8d4)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Lösung</span> in vier Schritten.
      </h2>
      <p className="section-sub" style={{ color: "rgba(255,255,255,0.7)" }}>
        Kein Papierkram, keine Warteschlange, keine Wochen-Wartezeit. Termin per Video buchen, Bildschirm teilen, Problem gelöst.
      </p>
    </div>
  );
}

function StepCard({ n, title, desc, icon, index }) {
  const ref = useReveal();
  return (
    <div
      ref={ref}
      className={"reveal reveal-delay-" + (index + 1)}
      style={{
        background: "rgba(255,255,255,0.04)",
        border: "1px solid rgba(255,255,255,0.08)",
        backdropFilter: "blur(20px)",
        borderRadius: 24,
        padding: 28,
        position: "relative",
        transition: "all .35s cubic-bezier(.22,.61,.36,1)",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.background = "rgba(255,255,255,0.07)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "rgba(255,255,255,0.04)"; }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 36 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 500, color: "rgba(255,255,255,0.45)" }}>{n} / 04</span>
        <StepIcon name={icon} />
      </div>
      <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 12, lineHeight: 1.15 }}>{title}</h3>
      <p style={{ fontSize: 14, color: "rgba(255,255,255,0.6)", lineHeight: 1.5 }}>{desc}</p>
    </div>
  );
}

function StepIcon({ name }) {
  const stroke = "url(#stepGrad)";
  const sw = 2;
  const wrap = (children) => (
    <div style={{ width: 40, height: 40 }}>
      <svg width="40" height="40" viewBox="0 0 32 32" fill="none">
        <defs>
          <linearGradient id="stepGrad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
            <stop stopColor="#c4b5fd" /><stop offset="1" stopColor="#f9a8d4" />
          </linearGradient>
        </defs>
        {children}
      </svg>
    </div>
  );
  switch (name) {
    case "chat":
      return wrap(<path d="M5 11c0-3 2.5-5 5.5-5h11c3 0 5.5 2 5.5 5v7c0 3-2.5 5-5.5 5H16l-5 4v-4h-.5C7.5 23 5 21 5 18v-7Z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" />);
    case "cal":
      return wrap(<>
        <rect x="5" y="7" width="22" height="20" rx="3" stroke={stroke} strokeWidth={sw} />
        <path d="M5 12h22M11 4v6M21 4v6" stroke={stroke} strokeWidth={sw} strokeLinecap="round" />
      </>);
    case "wrench":
      return wrap(<path d="M22 6a5 5 0 0 0-6.4 6.4L6 22l4 4 9.6-9.6A5 5 0 0 0 26 10l-3 3-3-3 3-3-1-1Z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" />);
    case "check":
      return wrap(<>
        <circle cx="16" cy="16" r="12" stroke={stroke} strokeWidth={sw} />
        <path d="M11 16.5 14.5 20 21 13" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      </>);
    default: return null;
  }
}

Object.assign(window, { Process });