// wizard.jsx — 3-step anfrage wizard (Was → Wo + Anzahl → Kontakt)
// Drops into a section as <Wizard />.
//
// SPAM PROTECTION (3 layers):
//  1. Honeypot field "_gotcha" — hidden via CSS, bots fill it
//  2. Time gate — submission < 3s after form first interaction = rejected
//  3. Web3Forms built-in spam filter (server-side)
//
// CONFIG: replace WEB3FORMS_KEY with your access key from web3forms.com

const WEB3FORMS_KEY = "282be147-dbbc-4f57-91c8-1be06384cc7f";
const WEB3FORMS_ENDPOINT = "https://api.web3forms.com/submit";

const TYPE_LABELS = {
  sektional: "Sektionaltore (elektrische Hub-/Schiebetore)",
  roll: "Rolltore / Rollgitter",
  schnelllauf: "Schnelllauftore (hochfrequente Verladetore)",
  schiebe: "Schiebe- / Drehtore (Außen-Toranlagen)",
  brand: "Brandschutztüren (T30/T90, Türschließer)",
  gemischt: "Verschiedene Tor-Typen (gemischt)"
};

function Wizard() {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    type: "",
    qty: "",
    city: "",
    name: "",
    company: "",
    phone: "",
    email: "",
    _gotcha: ""           // honeypot — must stay empty
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const formOpenedAt = React.useRef(Date.now());
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const types = [
    { id: "sektional", title: "Sektionaltore", desc: "Elektrische Hub-/Schiebetore" },
    { id: "roll", title: "Rolltore", desc: "Rolltore, Rollgitter" },
    { id: "schnelllauf", title: "Schnelllauftore", desc: "Hochfrequente Verladetore" },
    { id: "schiebe", title: "Schiebe-/Drehtore", desc: "Außen-Toranlagen" },
    { id: "brand", title: "Brandschutztüren", desc: "T30/T90, Türschließer" },
    { id: "gemischt", title: "Verschiedene Tor-Typen", desc: "Mehrere Tor-Arten gleichzeitig" }
  ];

  const ok2 = data.type;
  const ok3 = data.city && data.qty;
  const okSubmit = data.name && data.phone;

  const submit = async () => {
    setError(null);

    // ── SPAM CHECK 1 — honeypot must stay empty
    if (data._gotcha) {
      // silently "succeed" so bot doesn't retry
      setStep(3);
      return;
    }
    // ── SPAM CHECK 2 — time gate: humans take > 3s
    const elapsed = Date.now() - formOpenedAt.current;
    if (elapsed < 3000) {
      setError("Bitte einen Moment — und nochmal absenden.");
      formOpenedAt.current = Date.now() - 3500;
      return;
    }

    setSubmitting(true);
    try {
      // ── Build a human-readable subject + structured body
      const typeLabel = TYPE_LABELS[data.type] || data.type;
      const subject = `Prüfanfrage TP Seitz — ${data.qty}× ${typeLabel} · ${data.city}`;

      const payload = {
        access_key: WEB3FORMS_KEY,
        subject,
        from_name: "TP Seitz Website · Anfrageformular",
        // The fields Web3Forms emails out as a table:
        "Tortyp": typeLabel,
        "Anzahl Tore/Türen": data.qty,
        "Standort / PLZ": data.city,
        "Name": data.name,
        "Unternehmen": data.company || "—",
        "Telefon": data.phone,
        "E-Mail": data.email || "—",
        "Zeitstempel": new Date().toLocaleString("de-DE", { timeZone: "Europe/Berlin" }),
        "Ausfüll-Dauer (Sek.)": Math.round(elapsed / 1000),
        // honeypot — Web3Forms also recognizes this field
        botcheck: data._gotcha
      };

      const res = await fetch(WEB3FORMS_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload)
      });
      const json = await res.json().catch(() => ({}));

      if (res.ok && json.success) {
        setStep(3);
      } else {
        // If access key is the placeholder, simulate success in preview mode
        if (WEB3FORMS_KEY === "REPLACE_WITH_YOUR_WEB3FORMS_ACCESS_KEY") {
          console.warn("[TP Seitz] Web3Forms key not configured — simulating success for preview.");
          setStep(3);
        } else {
          setError(json.message || "Die Anfrage konnte nicht gesendet werden. Bitte rufen Sie uns kurz an: +49 173 5285068.");
        }
      }
    } catch (e) {
      // Network error — in preview/dev mode still show success
      if (WEB3FORMS_KEY === "REPLACE_WITH_YOUR_WEB3FORMS_ACCESS_KEY") {
        console.warn("[TP Seitz] Preview-Modus — Anfrage wird in Produktion an kontakt@tp-seitz.de versendet.");
        setStep(3);
      } else {
        setError("Verbindung fehlgeschlagen. Bitte rufen Sie uns kurz an: +49 173 5285068.");
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="anfrage" className="section">
      <div className="container container--tight">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">Anfrage</div>
            <h2 className="h1 shead__title">Drei Schritte zum Prüftermin.</h2>
          </div>
          <p className="lede shead__lede">
            Was — wo — wer. In 60 Sekunden ausgefüllt, am selben Werktag eine Rückmeldung
            mit konkretem Termin und Preisrahmen.
          </p>
        </div>

        <div className="wiz">
          <div className="wiz__pg" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-valuenow={step + 1}>
            {[0, 1, 2, 3].map((i) => (
              <span key={i} className={"wiz__pg__dot" + (i === step ? " is-active" : "") + (i < step ? " is-done" : "")}></span>
            ))}
          </div>

          {step === 0 && (
            <>
              <p className="wiz__q">Schritt 01 von 03</p>
              <h3 className="wiz__h">Welche Tore oder Türen sollen geprüft werden?</h3>
              <div className="wiz__opts">
                {types.map((t) => (
                  <button key={t.id} className={"wiz__opt" + (data.type === t.id ? " is-sel" : "")} onClick={() => { set("type", t.id); }}>
                    <b>{t.title}</b>
                    <small>{t.desc}</small>
                  </button>
                ))}
              </div>
              <div className="wiz__nav">
                <span style={{ color: "var(--ink-400)", fontSize: 13 }}>
                  Auswahl genügt — Details klären wir telefonisch.
                </span>
                <button className="btn btn--primary" disabled={!ok2} onClick={() => setStep(1)}>
                  Weiter <IconArrow size={14} className="arr" />
                </button>
              </div>
            </>
          )}

          {step === 1 && (
            <>
              <p className="wiz__q">Schritt 02 von 03</p>
              <h3 className="wiz__h">Wo stehen die Tore und wie viele sind es?</h3>
              <div className="wiz__row wiz__row--2">
                <input
                  className="wiz__input"
                  placeholder="Standort / PLZ (z. B. Augsburg, 86161)"
                  value={data.city}
                  onChange={(e) => set("city", e.target.value)}
                />
                <input
                  className="wiz__input"
                  placeholder="Anzahl Tore / Türen (z. B. 8)"
                  inputMode="numeric"
                  value={data.qty}
                  onChange={(e) => set("qty", e.target.value)}
                />
              </div>
              <div style={{ marginTop: 16, padding: "14px 16px", background: "var(--brand-900)", border: "1px solid rgba(255,255,255,.10)", borderRadius: "var(--r-2)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ color: "var(--signal)", marginTop: 2 }}><IconMap size={16} /></span>
                <div style={{ fontSize: 13.5, color: "var(--ink-200)" }}>
                  Wir fahren bis 150 km von Bonstetten / Augsburg aus. Falls Ihr Standort
                  außerhalb liegt, sagen wir Ihnen das direkt — kein Vertrösten.
                </div>
              </div>
              <div className="wiz__nav">
                <button className="btn btn--ghost-dark" onClick={() => setStep(0)}>Zurück</button>
                <button className="btn btn--primary" disabled={!ok3} onClick={() => setStep(2)}>
                  Weiter <IconArrow size={14} className="arr" />
                </button>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <p className="wiz__q">Schritt 03 von 03</p>
              <h3 className="wiz__h">Wer bekommt die Rückmeldung?</h3>
              <div className="wiz__row wiz__row--2">
                <input className="wiz__input" placeholder="Ihr Name *"
                  autoComplete="name"
                  value={data.name} onChange={(e) => set("name", e.target.value)} />
                <input className="wiz__input" placeholder="Unternehmen"
                  autoComplete="organization"
                  value={data.company} onChange={(e) => set("company", e.target.value)} />
                <input className="wiz__input" placeholder="Telefon *" inputMode="tel"
                  autoComplete="tel"
                  value={data.phone} onChange={(e) => set("phone", e.target.value)} />
                <input className="wiz__input" placeholder="E-Mail" inputMode="email"
                  autoComplete="email"
                  value={data.email} onChange={(e) => set("email", e.target.value)} />
              </div>

              {/* HONEYPOT — bots fill it, humans never see it */}
              <div style={{ position: "absolute", left: "-9999px", opacity: 0, pointerEvents: "none" }} aria-hidden="true">
                <label>Webseite (nicht ausfüllen)
                  <input type="text" tabIndex="-1" autoComplete="off"
                    value={data._gotcha}
                    onChange={(e) => set("_gotcha", e.target.value)} />
                </label>
              </div>

              <div style={{ marginTop: 16, fontSize: 12.5, color: "var(--ink-400)", lineHeight: 1.55 }}>
                Mit dem Absenden stimmen Sie zu, dass wir Ihre Daten zur Bearbeitung Ihrer
                Anfrage verwenden. Keine Werbung, keine Weitergabe an Dritte. Details in der
                {" "}<a href="datenschutz.html" target="_blank" style={{ color: "var(--ink-200)", borderBottom: "1px solid var(--ink-500)" }}>Datenschutzerklärung</a>.
              </div>
              {error && (
                <div style={{ marginTop: 14, padding: "12px 14px", background: "rgba(200,51,31,.12)", border: "1px solid rgba(200,51,31,.4)", borderRadius: "var(--r-2)", color: "#FFB8AD", fontSize: 13.5 }}>
                  {error}
                </div>
              )}
              <div className="wiz__nav">
                <button className="btn btn--ghost-dark" onClick={() => setStep(1)} disabled={submitting}>Zurück</button>
                <button className="btn btn--primary" disabled={!okSubmit || submitting} onClick={submit}>
                  {submitting ? "Wird gesendet…" : "Anfrage senden"}{!submitting && <IconArrow size={14} className="arr" />}
                </button>
              </div>
            </>
          )}

          {step === 3 && (
            <div className="wiz__success">
              <div className="wiz__check"><IconCheck size={28} /></div>
              <h3 className="wiz__h" style={{ marginBottom: 12 }}>Danke — Anfrage ist da.</h3>
              <p className="muted" style={{ maxWidth: "48ch", margin: "0 auto", color: "var(--ink-200)" }}>
                Wir melden uns am selben oder spätestens nächsten Werktag mit einem konkreten
                Terminvorschlag und einer Kostenschätzung. Bei Eilbedarf rufen Sie uns direkt
                an: <b style={{ color: "var(--paper)" }}>+49 173 5285068</b>.
              </p>
              <button className="btn btn--ghost-dark" style={{ marginTop: 24 }} onClick={() => {
                setStep(0);
                setData({ type: "", qty: "", city: "", name: "", company: "", phone: "", email: "", _gotcha: "" });
                formOpenedAt.current = Date.now();
              }}>
                Neue Anfrage stellen
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Wizard });