// Demo modal — opens via custom event "open-demo"
const { useState: useStateModal, useEffect: useEffectModal } = React;

const DemoModal = () => {
  const [open, setOpen] = useStateModal(false);
  const [submitted, setSubmitted] = useStateModal(false);
  const [form, setForm] = useStateModal({ nume: "", email: "", magazin: "", mesaj: "" });
  const [errors, setErrors] = useStateModal({});

  useEffectModal(() => {
    const handler = () => { setOpen(true); setSubmitted(false); };
    window.addEventListener("open-demo", handler);
    return () => window.removeEventListener("open-demo", handler);
  }, []);

  useEffectModal(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onEsc);
    return () => window.removeEventListener("keydown", onEsc);
  }, [open]);

  const validate = () => {
    const e = {};
    if (!form.nume.trim()) e.nume = "Numele este obligatoriu";
    if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = "Email invalid";
    if (!form.magazin.trim()) e.magazin = "URL magazin obligatoriu";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitted(true);
  };

  return (
    <div className={"modal-backdrop " + (open ? "is-open" : "")} onClick={() => setOpen(false)}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button onClick={() => setOpen(false)} aria-label="Închide" style={{
          position: "absolute", top: 16, right: 16,
          width: 36, height: 36, borderRadius: 10,
          background: "rgba(255,255,255,0.04)", border: "1px solid var(--glass-border)",
          color: "var(--fg-2)", cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <window.Icon name="x" size={16} color="currentColor" />
        </button>

        {!submitted ? (
          <>
            <window.Eyebrow color="var(--neon-purple-2)">DEMO GRATUIT 30 MIN</window.Eyebrow>
            <h3 style={{ fontSize: 32, fontWeight: 900, letterSpacing: "-0.03em", color: "#fff", marginBottom: 8, marginTop: 0 }}>
              Programează demo
            </h3>
            <p style={{ fontSize: 15, color: "var(--fg-2)", marginBottom: 28, marginTop: 0 }}>
              Te sunăm în 4 ore lucrătoare. Fără card, fără obligații.
            </p>

            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <div>
                <label>Numele tău</label>
                <input value={form.nume} onChange={e => setForm({ ...form, nume: e.target.value })} placeholder="Ion Popescu" />
                {errors.nume && <div style={{ fontSize: 12, color: "var(--neon-red)", marginTop: 6 }}>{errors.nume}</div>}
              </div>
              <div>
                <label>Email</label>
                <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="ion@magazin.ro" />
                {errors.email && <div style={{ fontSize: 12, color: "var(--neon-red)", marginTop: 6 }}>{errors.email}</div>}
              </div>
              <div>
                <label>URL magazin</label>
                <input value={form.magazin} onChange={e => setForm({ ...form, magazin: e.target.value })} placeholder="magazinultau.ro" />
                {errors.magazin && <div style={{ fontSize: 12, color: "var(--neon-red)", marginTop: 6 }}>{errors.magazin}</div>}
              </div>
              <div>
                <label>Mesaj (opțional)</label>
                <textarea value={form.mesaj} onChange={e => setForm({ ...form, mesaj: e.target.value })} placeholder="Vrem să automatizăm confirmarea COD..." />
              </div>
              <button type="submit" className="ev-btn ev-btn--primary" style={{ marginTop: 8, justifyContent: "center", padding: "16px 22px", fontSize: 15 }}>
                Trimite cerere demo
              </button>
              <div style={{ fontSize: 12, color: "var(--fg-4)", textAlign: "center" }}>
                Apăsând Trimite accepți Termenii și Confidențialitatea
              </div>
            </form>
          </>
        ) : (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div style={{
              width: 72, height: 72, margin: "0 auto 24px", borderRadius: "50%",
              background: "rgba(34,197,94,0.12)", border: "1px solid rgba(34,197,94,0.4)",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 0 60px rgba(34,197,94,0.4)",
            }}>
              <window.Icon name="check" size={36} color="var(--neon-green)" strokeWidth={2.5} />
            </div>
            <h3 style={{ fontSize: 28, fontWeight: 900, letterSpacing: "-0.03em", color: "#fff", marginTop: 0, marginBottom: 12 }}>
              Cererea a fost trimisă!
            </h3>
            <p style={{ fontSize: 15, color: "var(--fg-2)", marginTop: 0, marginBottom: 28 }}>
              Te sunăm la <span style={{ color: "#fff", fontWeight: 600 }}>{form.email}</span> în maxim 4 ore lucrătoare.
            </p>
            <button onClick={() => setOpen(false)} className="ev-btn ev-btn--ghost" style={{ padding: "12px 22px" }}>
              Închide
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

window.LandingDemoModal = DemoModal;