/* global React, Spark, openLead, useBus, WA */
const { useState: useStateM, useEffect: useEffectM } = React;

function LeadFormFields({ onDone }) {
  const [f, setF] = useStateM({ name: "", company: "", phone: "" });
  const [err, setErr] = useStateM({});
  const [sent, setSent] = useStateM(false);
  const upd = (k) => (e) => { setF((s) => ({ ...s, [k]: e.target.value })); if (err[k]) setErr((s) => ({ ...s, [k]: null })); };
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!f.name.trim()) er.name = "Укажите имя";
    if (!f.company.trim()) er.company = "Укажите компанию";
    if ((f.phone.match(/\d/g) || []).length < 7) er.phone = "Укажите корректный телефон";
    setErr(er);
    if (Object.keys(er).length > 0) return;
    let ok = false;
    try {
      const r = await fetch("/send.php", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ name: f.name, company: f.company, phone: f.phone })
      });
      ok = r.ok;
    } catch (_) {}
    if (!ok) {
      // запасной канал — только для зеркала на Cloudflare Pages (без PHP); на ps.kz не срабатывает
      try {
        await fetch("https://formsubmit.co/ajax/info@elki.kz", {
          method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify({ "Имя": f.name, "Компания": f.company, "Телефон": f.phone,
            _subject: "Новая заявка с сайта Mereke — " + f.company, _captcha: "false", _template: "table" })
        });
      } catch (_) {}
    }
    setSent(true);
  };
  if (sent) {
    return React.createElement("div", { className: "lp-success" },
      React.createElement("div", { className: "ring" }, React.createElement(Spark, { style: { width: 26, height: 26 } })),
      React.createElement("h3", { style: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.7rem", color: "#fff", margin: "0 0 10px" } }, "Заявка принята!"),
      React.createElement("p", { style: { color: "rgba(255,238,228,0.85)", margin: 0, fontSize: 16 } },
        f.name + ", спасибо. Пришлём каталог и расчёт и перезвоним в течение часа в рабочее время."));
  }
  const field = (k, label, ph, type = "text", inputMode) =>
    React.createElement("div", { className: `lp-field ${err[k] ? "err" : ""}` },
      React.createElement("label", null, label),
      React.createElement("input", { value: f[k], onChange: upd(k), placeholder: ph, type, inputMode, "aria-label": label }),
      err[k] && React.createElement("span", { className: "msg" }, err[k]));
  return React.createElement("form", { className: "lp-form", onSubmit: submit, noValidate: true },
    field("name", "Ваше имя", "Айгерим"),
    field("company", "Компания", "Название компании"),
    field("phone", "Телефон", "+7 (___) ___-__-__", "tel", "tel"),
    React.createElement("button", { type: "submit", className: "lp-btn lp-btn-amber", style: { marginTop: 6, width: "100%" } },
      "Отправить заявку", React.createElement(Spark, { style: { width: 15, height: 15 } })),
    React.createElement("a", { href: WA, target: "_blank", rel: "noopener", className: "lp-btn lp-btn-wa", style: { width: "100%" } }, "Написать в WhatsApp"),
    React.createElement("div", { className: "lp-form-note" }, React.createElement(Spark, { style: { width: 12, height: 12, color: "var(--amber-400)" } }), "Перезвоним в течение часа · каталог-PDF в подарок"));
}

function useEsc(open, close) {
  useEffectM(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") close(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [open, close]);
}

function useModalAnim(open) {
  const [shown, setShown] = useStateM(false);
  const [locked, setLocked] = useStateM(false);
  useEffectM(() => {
    if (!open) { setShown(false); setLocked(false); return; }
    const t1 = setTimeout(() => setShown(true), 20);
    const t2 = setTimeout(() => setLocked(true), 440);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [open]);
  const backStyle = locked ? { opacity: 1, transition: "none" } : undefined;
  const modalStyle = locked ? { opacity: 1, transform: "none", transition: "none" } : undefined;
  return { shown, backStyle, modalStyle };
}

function LeadModal() {
  const [open, setOpen] = useStateM(false);
  const close = React.useCallback(() => setOpen(false), []);
  useBus("mereke:lead", React.useCallback(() => setOpen(true), []));
  useEsc(open, close);
  const { shown, backStyle, modalStyle } = useModalAnim(open);
  return React.createElement("div", { className: `lp-modal-back ${shown ? "open" : ""}`, style: backStyle, onClick: close, "aria-hidden": !open },
    React.createElement("div", { className: "lp-modal lp-glass", style: modalStyle, onClick: (e) => e.stopPropagation() },
      React.createElement("button", { className: "close", "aria-label": "Закрыть", onClick: close }, "×"),
      React.createElement("span", { style: { fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--amber-400)" } }, "Заявка"),
      React.createElement("h3", { style: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.9rem", color: "#fff", margin: "10px 0 6px" } }, "Получить каталог и расчёт"),
      React.createElement("p", { style: { color: "rgba(255,238,228,0.82)", margin: "0 0 20px", fontSize: 15.5 } }, "Оставьте контакты — подберём коллекцию под вашу команду и пришлём предложение в течение дня."),
      open && React.createElement(LeadFormFields))
  );
}

function ProductModal() {
  const [p, setP] = useStateM(null);
  const close = React.useCallback(() => setP(null), []);
  useBus("mereke:product", React.useCallback((detail) => setP(detail), []));
  useEsc(!!p, close);
  const { shown, backStyle, modalStyle } = useModalAnim(!!p);
  return React.createElement("div", { className: `lp-modal-back ${shown ? "open" : ""}`, style: backStyle, onClick: close, "aria-hidden": !p },
    React.createElement("div", { className: "lp-modal lp-pmodal lp-glass", style: modalStyle, onClick: (e) => e.stopPropagation() },
      React.createElement("button", { className: "close", "aria-label": "Закрыть", onClick: close, style: { zIndex: 4 } }, "×"),
      p && React.createElement(React.Fragment, null,
        React.createElement("div", { className: "img" },
          React.createElement("div", { className: "lp-glow", style: { width: "70%", height: "60%", background: "radial-gradient(circle, rgba(242,161,78,0.4), rgba(242,161,78,0))", opacity: 0.7 } }),
          React.createElement("img", { src: "assets/products/" + p.img, alt: p.name })),
        React.createElement("div", { className: "body" },
          p.hit && React.createElement("span", { style: { alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", borderRadius: 999, background: "var(--amber-500)", color: "var(--ink-900)", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, letterSpacing: "0.04em", textTransform: "uppercase" } }, React.createElement(Spark, { style: { width: 11, height: 11 } }), "Хит сезона"),
          React.createElement("span", { className: "kz" }, p.kz),
          React.createElement("h3", null, p.name),
          React.createElement("p", null, p.desc),
          React.createElement("div", { style: { marginTop: 8, display: "flex", flexWrap: "wrap", gap: 12 } },
            React.createElement("button", { className: "lp-btn lp-btn-amber", onClick: () => { close(); openLead(); } }, "Заказать в наборе", React.createElement(Spark, { style: { width: 14, height: 14 } })),
            React.createElement("button", { className: "lp-btn lp-btn-glass", onClick: close }, "Закрыть")),
          React.createElement("div", { style: { marginTop: 6, display: "flex", flexWrap: "wrap", gap: "8px 16px", color: "rgba(255,236,224,0.7)", fontSize: 13, fontFamily: "var(--font-body)" } },
            React.createElement("span", null, "✦ Выдувное стекло"),
            React.createElement("span", null, "✦ Ручная роспись"),
            React.createElement("span", null, "✦ Лимитированная серия")))))
  );
}

Object.assign(window, { LeadFormFields, LeadModal, ProductModal });