/* ===== Mi Urbania · Help: FAQ, maintenance, contact, Garantía-as-a-Service ===== */
window.MU = window.MU || {};
(function (MU) {
  const { useState, useRef, useEffect } = React;
  const e = React.createElement;

  function FaqItem({ item, lang }) {
    const [open, setOpen] = useState(false);
    return e("div", null,
      e("button", { className: "mu-list-row", onClick: () => setOpen(!open), style: { width: "100%", textAlign: "left", padding: "15px 15px" } },
        e("div", { style: { flex: 1, fontWeight: 700, fontSize: 14, lineHeight: 1.3 } }, item["q_" + lang]),
        e(MU.Icon, { name: open ? "chevU" : "chevD", size: 17, color: "var(--ink-4)" })),
      open && e("p", { style: { padding: "0 15px 16px", fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55 } }, item["a_" + lang]));
  }

  function GaaSRequest({ open, onClose, service, lang }) {
    const tt = (k, p) => MU.t(lang, k, p);
    const [sent, setSent] = useState(false);
    useEffect(() => { if (open) setSent(false); }, [open]);
    if (!service) return e(MU.Sheet, { open, onClose, title: "" });
    return e(MU.Sheet, { open, onClose, title: service["name_" + lang] },
      sent
        ? e("div", { style: { textAlign: "center", padding: "20px 4px" } },
          e("div", { style: { width: 64, height: 64, borderRadius: 99, margin: "0 auto 14px", background: "var(--gold-soft)", color: "var(--gold)", display: "flex", alignItems: "center", justifyContent: "center" } }, e(MU.Icon, { name: "check", size: 30, stroke: 2.4 })),
          e("h3", { style: { fontSize: 18, fontWeight: 800 } }, lang === "es" ? "Solicitud enviada" : "Request sent"),
          e("p", { className: "mu-sub", style: { marginTop: 8 } }, tt("gaas_no_price")),
          e(MU.Btn, { block: true, style: { marginTop: 20 }, onClick: onClose }, tt("done")))
        : e("div", null,
          e("p", { className: "mu-sub", style: { marginBottom: 16 } }, tt("gaas_sub")),
          e("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: 14, background: "var(--gold-soft)", borderRadius: 14, marginBottom: 16 } },
            e("div", { style: { width: 38, height: 38, borderRadius: 11, background: "#fff", color: "var(--gold)", display: "flex", alignItems: "center", justifyContent: "center" } }, e(MU.Icon, { name: service.icon, size: 19 })),
            e("div", { style: { flex: 1 } }, e("div", { style: { fontWeight: 700 } }, service["name_" + lang]),
              e("div", { style: { fontSize: 12.5, color: "#7a6324", fontWeight: 600, marginTop: 1 } }, tt("gaas_quote")))),
          e(MU.Btn, { block: true, variant: "gold", icon: "arrowR", onClick: () => setSent(true) }, tt("gaas_request")),
          e("div", { style: { textAlign: "center", fontSize: 11.5, color: "var(--ink-4)", marginTop: 12 } }, tt("gaas_no_price"))));
  }

  function Help() {
    const app = window.MU.useApp();
    const { lang } = app;
    const tt = (k, p) => MU.t(lang, k, p);
    const scrollRef = useRef(null);
    const gaasRef = useRef(null);
    const careRef = useRef(null);
    const [svc, setSvc] = useState(null);

    useEffect(() => {
      if (app.pending && (app.pending.gaas || app.pending.care)) {
        const target = app.pending.gaas ? gaasRef.current : careRef.current;
        if (target && scrollRef.current) scrollRef.current.scrollTo({ top: target.offsetTop - 12, behavior: "smooth" });
        app.clearPending();
      }
    }, [app.pending]);

    const c = MU.CONTACT;
    return e("div", { ref: scrollRef, className: "mu-screen app-scroll", style: { overflowY: "auto", height: "100%" } },
      e("div", { style: { marginBottom: 16 } },
        e("div", { className: "mu-eyebrow" }, tt("help_title")),
        e("h1", { className: "mu-h-title", style: { marginTop: 6 } }, tt("help_sub"))),

      /* contact */
      e("div", { className: "mu-card", style: { padding: 16, display: "flex", gap: 13, alignItems: "center", marginBottom: 24 } },
        e("div", { style: { width: 50, height: 50, borderRadius: 99, background: "var(--brand)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--display)", fontWeight: 800, fontSize: 20, flex: "0 0 auto" } }, "L"),
        e("div", { style: { flex: 1, minWidth: 0 } },
          e("div", { style: { fontWeight: 700, fontSize: 15 } }, c.name),
          e("div", { style: { fontSize: 12.5, color: "var(--ink-3)" } }, c["role_" + lang])),
        e("div", { style: { display: "flex", gap: 7 } },
          e("button", { className: "mu-iconbtn", style: { background: "var(--brand-soft)", color: "var(--brand)" } }, e(MU.Icon, { name: "message", size: 19 })),
          e("button", { className: "mu-iconbtn", style: { background: "var(--active-soft)", color: "var(--active)" } }, e(MU.Icon, { name: "whatsapp", size: 19 })))),

      /* FAQ */
      e("div", { className: "mu-eyebrow", style: { marginBottom: 11 } }, tt("faq")),
      e("div", { className: "mu-card", style: { overflow: "hidden", marginBottom: 26 } },
        MU.FAQ.map((f, i) => e("div", { key: i }, i > 0 && e("div", { className: "mu-divider" }), e(FaqItem, { item: f, lang })))),

      /* maintenance / care */
      e("div", { ref: careRef, style: { marginBottom: 12 } },
        e("div", { className: "mu-eyebrow" }, tt("maintenance")),
        e("h2", { style: { fontSize: 17, fontWeight: 800, marginTop: 5, letterSpacing: "-.02em" } }, tt("care_reminders"))),
      e("div", { className: "mu-card", style: { overflow: "hidden", marginBottom: 16 } },
        MU.CARE_ITEMS.map((it, i) => {
          const done = app.care[it.id];
          return e("div", { key: it.id },
            i > 0 && e("div", { className: "mu-divider" }),
            e("button", { className: "mu-list-row", onClick: () => app.toggleCare(it.id), style: { width: "100%", textAlign: "left" } },
              e("div", { style: { width: 26, height: 26, borderRadius: 8, flex: "0 0 auto", border: done ? "none" : "2px solid var(--line-2)", background: done ? "var(--active)" : "transparent", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" } }, done && e(MU.Icon, { name: "check", size: 15, stroke: 2.6 })),
              e("div", { style: { flex: 1 } },
                e("div", { style: { fontWeight: 600, fontSize: 13.5, lineHeight: 1.3, color: done ? "var(--ink-4)" : "var(--ink)", textDecoration: done ? "line-through" : "none" } }, it["title_" + lang]),
                e("div", { style: { fontSize: 11.5, color: "var(--ink-4)", marginTop: 2 } }, it["every_" + lang]))));
        })),

      /* protect */
      e("div", { className: "mu-eyebrow", style: { margin: "20px 0 11px" } }, tt("protect_warranty")),
      e("div", { className: "mu-card", style: { padding: 16, marginBottom: 26, display: "flex", flexDirection: "column", gap: 11 } },
        MU.PROTECT.map((p, i) => e("div", { key: i, style: { display: "flex", gap: 10, alignItems: "flex-start" } },
          e("div", { style: { width: 22, height: 22, borderRadius: 7, flex: "0 0 auto", display: "flex", alignItems: "center", justifyContent: "center", background: p.do ? "var(--active-soft)" : "var(--urgent-soft)", color: p.do ? "var(--active)" : "var(--urgent)" } }, e(MU.Icon, { name: p.do ? "check" : "x", size: 14, stroke: 2.4 })),
          e("div", { style: { fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.4 } }, p[lang])))),

      /* GaaS */
      e("div", { ref: gaasRef, style: { marginBottom: 12 } },
        e("div", { className: "mu-eyebrow", style: { color: "var(--gold)" } }, tt("gaas_title")),
        e("h2", { style: { fontSize: 17, fontWeight: 800, marginTop: 5, letterSpacing: "-.02em" } }, tt("service_catalog")),
        e("p", { className: "mu-sub", style: { fontSize: 12.5, marginTop: 4 } }, tt("gaas_sub"))),
      e("div", { className: "mu-card", style: { overflow: "hidden" } },
        MU.SERVICES.map((s, i) => e("div", { key: s.id },
          i > 0 && e("div", { className: "mu-divider" }),
          e("div", { className: "mu-list-row", onClick: () => setSvc(s) },
            e("div", { className: "mu-cat-ic", style: { width: 38, height: 38, background: "var(--gold-soft)", color: "var(--gold)" } }, e(MU.Icon, { name: s.icon, size: 19 })),
            e("div", { style: { flex: 1 } },
              e("div", { style: { fontWeight: 700, fontSize: 14 } }, s["name_" + lang]),
              e("div", { style: { fontSize: 11.5, color: "#9a8235", fontWeight: 600, marginTop: 1 } }, tt("gaas_quote"))),
            e(MU.Icon, { name: "chevR", size: 16, color: "var(--ink-4)" }))))),

      e(GaaSRequest, { open: !!svc, onClose: () => setSvc(null), service: svc, lang })
    );
  }

  MU.Help = Help;
})(window.MU);