/* ──────────────────────────────────────────────────────────────────────
   Erstgespräch buchen — Booking form
   ────────────────────────────────────────────────────────────────────── */

const TIMESLOTS = [
  "Vormittag",
  "Mittag",
  "Nachmittag",
  "Abend",
];
const WEEKDAYS = [
  "Mo–Fr",
  "Sa–So",
];

function BookingApp() {
  const [form, setForm] = React.useState({
    name: "",
    phone: "",
    times: [],
    days: [],
    message: "",
    consent: false,
    website: "", // Honeypot — should stay empty
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [serverError, setServerError] = React.useState("");

  const update = (k, v) => {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: undefined }));
  };

  const toggle = (k, value) => {
    const list = form[k];
    update(k, list.includes(value) ? list.filter((v) => v !== value) : [...list, value]);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = "Bitte gib deinen Namen an.";
    if (!form.phone.trim()) next.phone = "Bitte gib eine Telefonnummer an.";
    if (form.times.length === 0 && form.days.length === 0)
      next.times = "Bitte wähle mindestens eine erreichbare Zeit oder einen Tag.";
    if (!form.consent) next.consent = "Bitte stimme der Datenschutz­erklärung zu.";
    setErrors(next);
    if (Object.keys(next).length > 0) return;

    setSending(true);
    setServerError("");
    try {
      const res = await fetch("/api/send-mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name.trim(),
          phone: form.phone.trim(),
          times: form.times,
          days: form.days,
          message: form.message.trim(),
          consent: form.consent,
          website: form.website,
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Senden fehlgeschlagen. Bitte später erneut versuchen.");
      }
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setServerError(err.message || "Senden fehlgeschlagen. Bitte später erneut versuchen.");
    } finally {
      setSending(false);
    }
  };

  return (
    <React.Fragment>
      <NavBar lockedOnLight />
      <main>
        <section className="page-head" data-screen-label="Erstgespräch">
          <div className="page-head-inner">
            <div className="eyebrow">Erstgespräch buchen</div>
            <h1>Lass uns über eure Einladung sprechen.</h1>
            <p>
              Schreibt uns kurz, wer ihr seid und wann ihr telefonisch erreichbar
              seid. Wir melden uns innerhalb eines Werktages mit einem
              unverbindlichen Vorschlag für einen 30-Minuten-Call.
            </p>
          </div>
        </section>

        <section className="booking">
          <div className="booking-grid">
            <aside className="booking-aside">
              <div className="meta-block">
                <h3>So läuft das Erstgespräch ab</h3>
                <p style={{ marginTop: 12 }}>
                  Ein lockerer 30-Minuten-Call: Ihr erzählt uns von eurem Tag,
                  wir zeigen euch Beispiele, beantworten Fragen — und ob es
                  passt, entscheidet ihr danach in Ruhe. Kein Verkaufsdruck.
                </p>
              </div>
              <div className="meta-block">
                <h3>Was wir typischerweise besprechen</h3>
                <ul style={{ marginTop: 12 }}>
                  <li>Datum, Locations und grobe Programmpunkte</li>
                  <li>Ob ein Template oder Custom Design besser passt</li>
                  <li>Welche Inhalte ihr in der RSVP-Funktion braucht</li>
                  <li>Zeitplan und nächste Schritte</li>
                </ul>
              </div>
              <div className="meta-block">
                <h3>Lieber per E-Mail?</h3>
                <p style={{ marginTop: 12 }}>
                  Schreibt uns einfach an{" "}
                  <a href="mailto:wedding@adviceworx.de" style={{ color: "var(--fg)", textDecoration: "underline", textUnderlineOffset: 3 }}>
                    wedding@adviceworx.de
                  </a>{" "}— wir antworten meist innerhalb eines Werktages.
                </p>
              </div>
            </aside>

            <div>
              {submitted ? (
                <SuccessCard name={form.name} />
              ) : (
                <form className="form" onSubmit={onSubmit} noValidate>
                  <div className="form-row two">
                    <div className="field">
                      <label className="field-label" htmlFor="name">
                        Name <span className="req">*</span>
                      </label>
                      <input
                        id="name"
                        className="input"
                        type="text"
                        autoComplete="name"
                        placeholder="Mia & Jonas Berger"
                        value={form.name}
                        onChange={(e) => update("name", e.target.value)}
                        aria-invalid={!!errors.name}
                      />
                      {errors.name && <span className="field-hint" style={{ color: "#a8362a" }}>{errors.name}</span>}
                    </div>

                    <div className="field">
                      <label className="field-label" htmlFor="phone">
                        Telefonnummer <span className="req">*</span>
                      </label>
                      <input
                        id="phone"
                        className="input"
                        type="tel"
                        autoComplete="tel"
                        placeholder="+49 170 123 4567"
                        value={form.phone}
                        onChange={(e) => update("phone", e.target.value)}
                        aria-invalid={!!errors.phone}
                      />
                      {errors.phone && <span className="field-hint" style={{ color: "#a8362a" }}>{errors.phone}</span>}
                    </div>
                  </div>

                  <div className="field">
                    <label className="field-label">
                      Wann seid ihr erreichbar? <span className="req">*</span>
                    </label>
                    <span className="field-hint">Mehrfach­auswahl möglich. So finden wir leichter einen passenden Termin.</span>
                    <div className="timeslots" style={{ marginTop: 6 }}>
                      {TIMESLOTS.map((slot) => {
                        const on = form.times.includes(slot);
                        return (
                          <button
                            key={slot}
                            type="button"
                            className="chip"
                            data-on={on ? "true" : "false"}
                            onClick={() => toggle("times", slot)}
                            aria-pressed={on}
                          >
                            {slot}
                          </button>
                        );
                      })}
                    </div>
                    <div className="timeslots" style={{ marginTop: 8, gridTemplateColumns: "repeat(2, 1fr)" }}>
                      {WEEKDAYS.map((d) => {
                        const on = form.days.includes(d);
                        return (
                          <button
                            key={d}
                            type="button"
                            className="chip"
                            data-on={on ? "true" : "false"}
                            onClick={() => toggle("days", d)}
                            aria-pressed={on}
                          >
                            {d}
                          </button>
                        );
                      })}
                    </div>
                    {errors.times && <span className="field-hint" style={{ color: "#a8362a", marginTop: 4 }}>{errors.times}</span>}
                  </div>

                  <div className="field">
                    <label className="field-label" htmlFor="message">
                      Weitere Anliegen oder Infos
                    </label>
                    <span className="field-hint">
                      Erzählt uns gerne, was ihr im Kopf habt — Datum, Location,
                      Stil, besondere Wünsche. Alles freiwillig.
                    </span>
                    <textarea
                      id="message"
                      className="textarea"
                      placeholder="z.B. 'Wir heiraten im Juni 2026 in der Toskana und möchten unsere Gäste zweisprachig einladen…'"
                      rows={5}
                      value={form.message}
                      onChange={(e) => update("message", e.target.value)}
                    />
                  </div>

                  <div className="consent">
                    <input
                      id="consent"
                      type="checkbox"
                      checked={form.consent}
                      onChange={(e) => update("consent", e.target.checked)}
                      aria-invalid={!!errors.consent}
                    />
                    <label htmlFor="consent">
                      Ich willige ein, dass meine Angaben zur Bearbeitung meiner
                      Anfrage erhoben und gespeichert werden. Hinweise zur
                      Verarbeitung findest du in unserer{" "}
                      <a href="datenschutz.html">Datenschutz­erklärung</a>. Die
                      Einwilligung kann ich jederzeit widerrufen.
                      <span className="req"> *</span>
                    </label>
                  </div>
                  {errors.consent && (
                    <span className="field-hint" style={{ color: "#a8362a", marginTop: -16 }}>
                      {errors.consent}
                    </span>
                  )}

                  {/* Honeypot: hidden from real users, but bots fill it in. */}
                  <div style={{ position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }} aria-hidden="true">
                    <label htmlFor="website">Website</label>
                    <input
                      id="website"
                      type="text"
                      tabIndex={-1}
                      autoComplete="off"
                      value={form.website}
                      onChange={(e) => update("website", e.target.value)}
                    />
                  </div>

                  {serverError && (
                    <div className="field-hint" style={{ color: "#a8362a", marginTop: -8 }}>
                      {serverError}
                    </div>
                  )}

                  <div className="form-actions">
                    <span className="field-hint">Pflichtfelder sind mit * markiert.</span>
                    <button type="submit" className="btn-rect dark form-submit" disabled={sending} aria-busy={sending}>
                      {sending ? "Wird gesendet…" : "Anfrage senden"}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

function SuccessCard({ name }) {
  const first = (name || "").split(/\s+/)[0] || "danke";
  return (
    <div className="form-success">
      <div className="eyebrow">Anfrage gesendet</div>
      <h3>
        {first ? `${first}, ` : ""}wir haben deine Nachricht erhalten.
      </h3>
      <p>
        Wir melden uns innerhalb eines Werktages telefonisch zu deinen
        angegebenen Zeiten und stimmen einen Termin für das 30-Minuten-Erstgespräch
        mit dir ab. Bis gleich!
      </p>
      <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 8 }}>
        <a href="index.html" className="btn-rect dark">Zurück zur Startseite</a>
        <a href="index.html#faq" className="btn-rect ghost">Häufige Fragen ansehen</a>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BookingApp />);