// Package builder — controlled by shared state (lifted to App).
// Starts on the "Базовый" preset (~12 000 ₽). Renders a live quote AND a
// formal КП/Счёт document with a Tochka payment QR.
const { SENSORS: BLD_SENSORS, MAIN_GROUPS: BLD_MAIN, computeQuote: bldQuote,
        matchPackage: bldMatch, buildPayLink: bldPayLink, qrSrc: bldQr,
        estimateSavings: bldSavings, paymentConfigured: bldPayOk,
        money: bldMoney, CONFIG: BLD_CFG, scrollTo: bldScroll } = window.RD;

const Builder = ({ picked, setPicked, presetName, setPresetName, kpNumber, setConsult }) => {
  const set = (id, n) => {
    setPicked((p) => {
      const next = { ...p };
      if (n <= 0) delete next[id];
      else next[id] = Math.min(n, 30);
      return next;
    });
    setPresetName(null); // ручное изменение → индивидуальная конфигурация
  };

  // Сброс к базовому пакету
  const resetToBase = () => {
    const base = window.RD.PACKAGES[0];
    setPicked({ ...base.compose });
    setPresetName(base.name);
    setConsult && setConsult(false);
  };

  // Контактные поля для отправки КП
  const [leadName, setLeadName] = React.useState("");
  const [leadContact, setLeadContact] = React.useState("");
  const [kpStatus, setKpStatus] = React.useState("idle"); // idle | sending | done | error
  const [kpOpen, setKpOpen] = React.useState(false); // КП свёрнут по умолчанию
  const canSubmit = leadName.trim().length >= 2 && leadContact.trim().length >= 3;

  // Сворачиваемые блоки: основные раскрыты, дополнительные — свёрнуты
  const groups = window.RD.groupOrder();
  const [openGroups, setOpenGroups] = React.useState({});
  const isOpen = (g) => (g in openGroups ? openGroups[g] : BLD_MAIN.includes(g));
  const toggle = (g) => setOpenGroups((o) => ({ ...o, [g]: !isOpen(g) }));

  const { items, pieces, total } = bldQuote(picked);
  const matched = presetName || bldMatch(picked);
  const configName = matched || "Индивидуальная конфигурация";

  // Сформировать КП: скролл к документу + отправка заявки
  const formKP = async () => {
    if (!canSubmit || kpStatus === "sending") return;
    setKpStatus("sending");
    setKpOpen(true);
    bldScroll("kp-section");
    const payload = window.RD.buildLeadPayload({
      name: leadName, contact: leadContact, objectType: "",
      picked, configName, kpNumber, interest: "Сформировал КП в калькуляторе",
    });
    const res = await window.RD.submitLead(payload);
    setKpStatus(res.ok ? "done" : "error");
  };

  return (
    <section id="builder" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, alignItems: "end" }} className="bld-head">
          <div>
            <span className="eyebrow">Конструктор</span>
            <h2 className="h-section" style={{ marginTop: 16, maxWidth: "20ch" }}>
              Соберите пакет под свою квартиру или частный дом.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 380 }}>
            Меняйте состав — смета, коммерческое предложение и счёт с QR-оплатой
            пересчитываются мгновенно. Финальную цену согласуем после осмотра объекта.
          </p>
        </div>

        <div style={{
          marginTop: 40,
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)",
          gap: 18,
          alignItems: "start",
        }} className="bld-grid">
          {/* Catalog */}
          <div style={{ display: "grid", gap: 12 }}>
            {groups.map((g) => {
              const groupSensors = BLD_SENSORS.filter((s) => s.group === g);
              if (groupSensors.length === 0) return null;
              const open = isOpen(g);
              const isMain = BLD_MAIN.includes(g);
              const selCount = groupSensors.reduce((a, s) => a + (picked[s.id] || 0), 0);
              return (
                <div key={g} style={{
                  border: "1px solid var(--line-2)",
                  borderRadius: 18,
                  background: "var(--surface)",
                  overflow: "hidden",
                }}>
                  <button onClick={() => toggle(g)} style={{
                    width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
                    gap: 12, padding: "16px 18px", background: "transparent", border: "none",
                    cursor: "pointer", textAlign: "left", color: "var(--ink-2)",
                  }}>
                    <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span className="label" style={{ fontSize: 13, color: "var(--ink-2)", textTransform: "none", letterSpacing: "-0.01em", fontWeight: 600, fontFamily: "var(--font)" }}>{g}</span>
                      {!isMain && (
                        <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.08em", textTransform: "uppercase", background: "var(--bg-2)", color: "var(--muted)", padding: "3px 7px", borderRadius: 999 }}>дополнительно</span>
                      )}
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{groupSensors.length} поз.</span>
                    </span>
                    <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      {selCount > 0 && (
                        <span className="mono" style={{ fontSize: 11, color: "#fff", background: "var(--accent)", padding: "3px 9px", borderRadius: 999, letterSpacing: "0.02em" }}>{selCount} выбрано</span>
                      )}
                      <span style={{ display: "grid", placeItems: "center", color: "var(--ink-3)", transform: open ? "rotate(180deg)" : "none", transition: "transform 200ms" }}>
                        <RDIcon name="arrow-down" size={16} />
                      </span>
                    </span>
                  </button>
                  {open && (
                    <div style={{ display: "grid", gap: 10, padding: "0 14px 14px" }}>
                      {groupSensors.map((s) => {
                        const n = picked[s.id] || 0;
                        const active = n > 0;
                        return (
                          <div key={s.id} style={{
                            display: "grid",
                            gridTemplateColumns: "44px 1fr auto auto",
                            gap: 14,
                            alignItems: "center",
                            padding: "14px 16px",
                            background: active ? "var(--ink-2)" : "var(--bg-2)",
                            color: active ? "#EEF3FA" : "var(--ink)",
                            border: "1px solid " + (active ? "var(--ink-2)" : "var(--line)"),
                            borderRadius: 14,
                            transition: "background 200ms, color 200ms, border-color 200ms",
                          }}>
                            <div style={{
                              width: 40, height: 40, borderRadius: 10,
                              background: active ? "rgba(238,243,250,0.1)" : "var(--surface)",
                              color: active ? "var(--accent)" : "var(--ink-2)",
                              display: "grid", placeItems: "center",
                            }}>
                              <RDIcon name={s.icon} size={20} stroke={1.8} />
                            </div>
                            <div>
                              <div style={{ fontWeight: 500, fontSize: 15, letterSpacing: "-0.01em" }}>
                                {s.name}
                                {s.required && <span style={{ marginLeft: 8, fontSize: 11, color: "var(--accent)", fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase" }}>· нужен</span>}
                              </div>
                              <div style={{ fontSize: 13, opacity: 0.7, marginTop: 2 }}>{s.desc}</div>
                            </div>
                            <div className="mono" style={{ fontSize: 13, opacity: 0.7 }}>
                              {bldMoney(s.price)}
                            </div>
                            <Stepper n={n} onChange={(v) => set(s.id, v)} dark={active} />
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {/* Live summary */}
          <div style={{
            position: "sticky", top: 92,
            background: "var(--surface)",
            border: "1px solid var(--line-2)",
            borderRadius: 22,
            padding: 28,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div className="label">Ваш проект</div>
              <span className="mono" style={{
                fontSize: 11, letterSpacing: "0.04em",
                background: matched ? "var(--accent)" : "var(--bg-2)",
                color: matched ? "#fff" : "var(--ink-3)",
                padding: "4px 10px", borderRadius: 999,
              }}>{configName}</span>
            </div>
            <div style={{
              marginTop: 14, fontSize: "clamp(36px, 4vw, 50px)",
              letterSpacing: "-0.025em", fontWeight: 500, color: "var(--ink-2)",
              lineHeight: 1,
            }}>
              {total.toLocaleString("ru-RU")} <span style={{ color: "var(--accent)" }}>₽</span>
            </div>
            <div className="mono" style={{ marginTop: 6, fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
              {pieces} устройств · монтаж и настройка включены
            </div>

            <hr className="divider" style={{ margin: "22px 0" }} />

            <div style={{ display: "grid", gap: 9, fontSize: 14, maxHeight: 220, overflow: "auto" }}>
              {items.length === 0 && (
                <div style={{ color: "var(--muted)", fontSize: 13 }}>
                  Ничего не выбрано. Начните с хаба и пары датчиков.
                </div>
              )}
              {items.map((it) => (
                <div key={it.id} style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                  <span style={{ color: "var(--ink-3)" }}>{it.name} × {it.qty}</span>
                  <span className="mono" style={{ color: "var(--ink-2)" }}>{bldMoney(it.sum)}</span>
                </div>
              ))}
            </div>

            <div className="bld-leadform" style={{ marginTop: 20, display: "grid", gap: 10 }}>
              <input
                type="text" value={leadName} onChange={(e) => setLeadName(e.target.value)}
                placeholder="Ваше имя" autoComplete="name" aria-label="Ваше имя"
                style={bldInput}
              />
              <input
                type="text" value={leadContact} onChange={(e) => setLeadContact(e.target.value)}
                placeholder="Телефон или Telegram" inputMode="tel" autoComplete="tel" aria-label="Телефон или Telegram"
                style={bldInput}
              />
            </div>

            <button onClick={formKP} disabled={!canSubmit || kpStatus === "sending"}
               className="btn btn-primary" style={{
                 width: "100%", justifyContent: "center", marginTop: 12,
                 opacity: (!canSubmit || kpStatus === "sending") ? 0.5 : 1,
                 cursor: (!canSubmit || kpStatus === "sending") ? "not-allowed" : "pointer",
               }}>
              {kpStatus === "sending" ? "Отправляем…" : <>Сформировать КП и счёт <RDIcon name="arrow-down" size={16} /></>}
            </button>

            {kpStatus === "done" ? (
              <div style={{ marginTop: 10, padding: "10px 12px", borderRadius: 10, background: "rgba(46,156,110,0.12)", border: "1px solid rgba(46,156,110,0.35)", fontSize: 13, color: "var(--good)", textAlign: "center" }}>
                Заявка отправлена. КП № {kpNumber} сформировано.
              </div>
            ) : kpStatus === "error" ? (
              <div style={{ marginTop: 10, padding: "10px 12px", borderRadius: 10, background: "rgba(210,96,60,0.12)", border: "1px solid rgba(210,96,60,0.35)", fontSize: 13, color: "var(--warn)", textAlign: "center" }}>
                Не удалось отправить заявку. Позвоните нам: +7 950 052-77-12
              </div>
            ) : (
              <div className="label" style={{ textAlign: "center", marginTop: 10 }}>
                {canSubmit ? "Готовое предложение с оплатой по QR" : "Укажите имя и контакт, чтобы сформировать КП"}
              </div>
            )}

            <button onClick={resetToBase} className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: 10, height: 40, fontSize: 13 }}>
              <RDIcon name="arrow-down" size={13} style={{ transform: "rotate(90deg)" }} /> Сбросить к базовому пакету
            </button>
          </div>
        </div>

        {/* ---------------- КП / СЧЁТ (сворачиваемый) ---------------- */}
        <div id="kp-section" style={{ marginTop: 18 }}>
          <button onClick={() => setKpOpen((o) => !o)} aria-expanded={kpOpen} aria-controls="kp-doc"
            style={{
              width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
              padding: "16px 22px", border: "none", cursor: "pointer",
              background: "var(--ink-2)", color: "#EEF3FA",
              borderRadius: kpOpen ? "18px 18px 0 0" : 18,
              textAlign: "left", fontFamily: "var(--font)",
            }}>
            <span style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
              <RDIcon name="doc" size={18} />
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontSize: 15, fontWeight: 500 }}>Коммерческое предложение и счёт</span>
                <span className="mono" style={{ display: "block", fontSize: 12, opacity: 0.7, marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  № {kpNumber} · {configName} · {bldMoney(total)}
                </span>
              </span>
            </span>
            <span style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
              <span className="label" style={{ color: "rgba(238,243,250,0.6)" }}>{kpOpen ? "Свернуть" : "Развернуть"}</span>
              <RDIcon name="arrow-down" size={18} style={{ transform: kpOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }} />
            </span>
          </button>
          {kpOpen && <Proposal items={items} pieces={pieces} total={total} configName={configName} kpNumber={kpNumber} />}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .bld-head { flex-direction: column; align-items: flex-start !important; }
          .bld-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

// ----- Коммерческое предложение + Счёт + QR-оплата (одностраничный документ) -----
const Proposal = ({ items, pieces, total, configName, kpNumber }) => {
  const [qrError, setQrError] = React.useState(false);
  const payLink = bldPayLink(total, kpNumber);
  const payOk = bldPayOk();
  const today = new Date().toLocaleDateString("ru-RU", { day: "2-digit", month: "long", year: "numeric" });
  const C = BLD_CFG.company;
  const T = BLD_CFG.terms;
  const sv = bldSavings(items);

  if (items.length === 0) {
    return (
      <div id="kp-doc" style={{ marginTop: 18, padding: 32, background: "var(--surface)", border: "1px dashed var(--line)", borderRadius: 22, textAlign: "center", color: "var(--muted)" }}>
        Выберите оборудование или готовый пакет — здесь появится коммерческое предложение со счётом и QR-оплатой.
      </div>
    );
  }

  // Реквизиты ИП — собираем только заполненные поля
  const reqLine = [C.legal, C.inn && ("ИНН " + C.inn), C.ogrnip && ("ОГРНИП " + C.ogrnip)].filter(Boolean).join("   ·   ");
  const contactLine = [C.phone, C.email, C.site].filter(Boolean).join("   ·   ");

  return (
    <div id="kp-doc" className="kp-doc" style={{
      background: "var(--surface)",
      border: "1px solid var(--line-2)",
      borderTop: "none",
      borderRadius: "0 0 18px 18px",
      overflow: "hidden",
    }}>
      {/* ============ ШАПКА: логотип + реквизиты ИП ============ */}
      <div className="kp-head" style={{ padding: "28px 34px 22px", background: "linear-gradient(145deg, #22366080 0%, var(--ink-2) 55%, #16243f 100%)", color: "#EEF3FA" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 20, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 15, alignItems: "center" }}>
            <span style={{ width: 54, height: 54, borderRadius: 14, background: "rgba(238,243,250,0.08)", border: "1px solid rgba(238,243,250,0.16)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
              <RDIcon name="logo" size={32} />
            </span>
            <div>
              <div style={{ fontSize: 21, fontWeight: 600, letterSpacing: "-0.01em" }}>{C.brand}</div>
              <div style={{ fontSize: 12.5, opacity: 0.7, marginTop: 2 }}>Умный дом под ключ · {C.city}</div>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="label" style={{ color: "var(--accent)" }}>Коммерческое предложение</div>
            <div className="mono" style={{ fontSize: 18, marginTop: 5, letterSpacing: "0.01em" }}>№ {kpNumber}</div>
            <div className="mono" style={{ fontSize: 12, opacity: 0.7, marginTop: 3 }}>от {today}</div>
          </div>
        </div>
        {/* Реквизиты ИП */}
        <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid rgba(238,243,250,0.14)", display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div className="mono" style={{ fontSize: 12, opacity: 0.92, letterSpacing: "0.01em" }}>{reqLine}</div>
          <div className="mono" style={{ fontSize: 12, opacity: 0.7, letterSpacing: "0.01em" }}>{contactLine}</div>
        </div>
      </div>

      <div className="kp-body" style={{ padding: "26px 34px 6px" }}>
        {/* ============ СПЕЦИФИКАЦИЯ И СТОИМОСТЬ ============ */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
          <h3 className="h-card" style={{ fontSize: 19 }}>Спецификация и стоимость</h3>
          <span className="mono" style={{ fontSize: 12, color: "#fff", background: "var(--ink-2)", padding: "4px 11px", borderRadius: 999 }}>{configName}</span>
        </div>

        <div style={{ marginTop: 14 }}>
          {/* table head */}
          <div className="kp-row" style={{ display: "grid", gridTemplateColumns: "1fr 46px 96px 104px", gap: 8, padding: "0 0 8px", borderBottom: "1.5px solid var(--ink-2)" }}>
            <span className="label">Позиция</span>
            <span className="label" style={{ textAlign: "center" }}>Кол.</span>
            <span className="label" style={{ textAlign: "right" }}>Цена</span>
            <span className="label" style={{ textAlign: "right" }}>Сумма</span>
          </div>
          {items.map((it) => (
            <div key={it.id} className="kp-row" style={{ display: "grid", gridTemplateColumns: "1fr 46px 96px 104px", gap: 8, padding: "9px 0", borderBottom: "1px solid var(--line-2)", alignItems: "center" }}>
              <span style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14, color: "var(--ink-2)" }}>
                <span className="kp-ic" style={{ width: 26, height: 26, borderRadius: 7, background: "var(--bg-2)", color: "var(--ink-2)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <RDIcon name={it.icon} size={14} />
                </span>
                {it.name}
              </span>
              <span className="mono" style={{ textAlign: "center", fontSize: 13, color: "var(--ink-3)" }}>{it.qty}</span>
              <span className="mono" style={{ textAlign: "right", fontSize: 13, color: "var(--ink-3)" }}>{it.price.toLocaleString("ru-RU")}</span>
              <span className="mono" style={{ textAlign: "right", fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>{it.sum.toLocaleString("ru-RU")}</span>
            </div>
          ))}

          {/* totals */}
          <div style={{ marginTop: 14, display: "grid", gap: 7 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: "var(--ink-3)" }}>
              <span>Оборудование, монтаж и настройка</span>
              <span className="mono">{bldMoney(total)}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: "var(--ink-3)" }}>
              <span>Проектирование сценариев и обучение</span>
              <span className="mono" style={{ color: "var(--good)" }}>в подарок</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 6, paddingTop: 13, borderTop: "2px solid var(--ink-2)" }}>
              <span style={{ fontSize: 15.5, fontWeight: 500, color: "var(--ink-2)" }}>Итого к оплате</span>
              <span style={{ fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink-2)" }}>
                {total.toLocaleString("ru-RU")} <span style={{ color: "var(--accent)" }}>₽</span>
              </span>
            </div>
            <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.03em" }}>
              {pieces} устройств · {T.vat} · {T.validity.toLowerCase()}
            </div>
          </div>
        </div>

        {/* ============ РЕКЛАМНЫЙ БЛОК: ЭКОНОМИЯ ЗА 5 ЛЕТ ============ */}
        {sv.fiveYear > 0 && (
          <div className="kp-savings" style={{ marginTop: 20, borderRadius: 16, padding: "20px 22px", background: "linear-gradient(135deg, #FDF3E1 0%, #FBEAD0 100%)", border: "1px solid #F0D9AE", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 22, flexWrap: "wrap" }}>
            <div style={{ flex: "1 1 280px" }}>
              <div className="label" style={{ color: "var(--accent-2)" }}>Окупаемость</div>
              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--ink-2)", marginTop: 6, letterSpacing: "-0.01em" }}>
                За 5 лет этот умный дом вернёт вам около
              </div>
              <div style={{ fontSize: 40, fontWeight: 700, color: "var(--accent-2)", letterSpacing: "-0.025em", lineHeight: 1, marginTop: 8 }}>
                {sv.fiveYear.toLocaleString("ru-RU")} ₽
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 8 }}>
                ≈ {sv.annual.toLocaleString("ru-RU")} ₽ в год на отоплении, свете и предотвращённых протечках. Оценка консервативная — обычно выше.
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              {[["thermo", "Климат по сценарию"], ["bulb", "Свет только когда нужен"], ["drop", "Защита от протечек"]].map(([ic, t]) => (
                <div key={ic} style={{ width: 112, background: "rgba(255,255,255,0.65)", border: "1px solid #F0D9AE", borderRadius: 12, padding: "12px 12px 13px" }}>
                  <span style={{ color: "var(--accent-2)" }}><RDIcon name={ic} size={20} /></span>
                  <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 7, lineHeight: 1.25 }}>{t}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ============ QR-ОПЛАТА (интеграция с Точкой / заглушка) ============ */}
        <div className="kp-pay" style={{ marginTop: 20, marginBottom: 6, borderRadius: 16, border: "1px solid var(--line-2)", background: "var(--bg-2)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, padding: 22, alignItems: "center" }}>
          {/* QR */}
          <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
            {payLink && !qrError ? (
              <img
                src={bldQr(payLink, 360)}
                alt="QR для оплаты через Точка Банк"
                width={172} height={172}
                onError={() => setQrError(true)}
                style={{ width: 172, height: 172, borderRadius: 12, background: "#fff", padding: 9, border: "1px solid var(--line)", filter: payOk ? "none" : "grayscale(0.25)" }}
              />
            ) : (
              <div style={{ width: 172, height: 172, borderRadius: 12, border: "1.5px dashed var(--line)", background: "#fff", display: "grid", placeItems: "center", color: "var(--muted)", fontSize: 12, padding: 16, textAlign: "center" }}>
                Здесь будет QR-код оплаты Точка Банк
              </div>
            )}
            {!payOk && (
              <span style={{ position: "absolute", top: -8, left: "50%", transform: "translateX(-50%)", background: "var(--accent)", color: "#fff", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", fontFamily: "var(--mono)", padding: "3px 9px", borderRadius: 999, whiteSpace: "nowrap" }}>образец</span>
            )}
          </div>
          {/* Оплата */}
          <div>
            <div className="label" style={{ color: "var(--accent-2)" }}>{BLD_CFG.payment.label}</div>
            <div style={{ fontSize: 15, fontWeight: 500, color: "var(--ink-2)", marginTop: 6 }}>
              {payOk ? "Наведите камеру телефона на QR-код" : "Оплата по QR подключается через эквайринг Точка"}
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 12 }}>
              <span style={{ fontSize: 13, color: "var(--ink-3)" }}>Сумма по счёту</span>
              <span style={{ fontSize: 22, fontWeight: 600, color: "var(--ink-2)", letterSpacing: "-0.02em" }}>{bldMoney(total)}</span>
            </div>
            <div className="kp-pay-actions" style={{ display: "flex", gap: 10, marginTop: 14, flexWrap: "wrap" }}>
              {payOk && (
                <a href={payLink} target="_blank" rel="noopener noreferrer" className="btn btn-accent" style={{ height: 42, fontSize: 14 }}>
                  Оплатить онлайн <RDIcon name="arrow-right" size={14} />
                </a>
              )}
            </div>
            <div style={{ display: "flex", gap: 18, flexWrap: "wrap", marginTop: 14, fontSize: 12, color: "var(--ink-3)" }}>
              <span style={{ display: "flex", gap: 6, alignItems: "center" }}><RDIcon name="check" size={13} stroke={2.2} /> {T.warranty}</span>
              <span style={{ display: "flex", gap: 6, alignItems: "center" }}><RDIcon name="check" size={13} stroke={2.2} /> {T.vat}</span>
            </div>
          </div>
        </div>

        {/* ============ РЕКВИЗИТЫ ИП ДЛЯ ОПЛАТЫ ============ */}
        <div className="kp-req" style={{ marginTop: 20, borderRadius: 16, border: "1px solid var(--line-2)", padding: "20px 22px" }}>
          <div className="label" style={{ marginBottom: 12 }}>Реквизиты для оплаты</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)" }}>{C.fullName}</div>
          <div className="kp-req-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "9px 28px", marginTop: 12 }}>
            {[
              ["ИНН", C.inn],
              ["ОГРНИП", C.ogrnip],
              ["Расчётный счёт", C.rs],
              ["Корр. счёт", C.ks],
              ["Юр. адрес", C.legalAddress],
              ["Налогообложение", C.taxMode],
              ["Банк", C.bankName],
              ["БИК", C.bik],
              ["ИНН / КПП банка", C.bankInn + " / " + C.bankKpp],
              ["Назначение платежа", "Оплата по КП № " + kpNumber],
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 14, alignItems: "baseline", borderBottom: "1px dotted var(--line)", paddingBottom: 6 }}>
                <span style={{ fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap" }}>{k}</span>
                <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ============ ПУБЛИЧНАЯ ОФЕРТА (СЧЁТ-ДОГОВОР) ============ */}
        <div className="kp-offer" style={{ marginTop: 18, borderRadius: 16, border: "1px solid var(--line-2)", background: "var(--bg-2)", padding: "20px 22px" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
            <div className="label">Публичная оферта · счёт-договор</div>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>в соответствии с законодательством РФ</span>
          </div>
          <p style={{ fontSize: 11.5, lineHeight: 1.5, color: "var(--ink-3)", marginTop: 10 }}>
            Настоящий документ является публичной офертой (счётом-договором) {C.fullName}, {C.taxMode}.
            Оплата настоящего счёта в соответствии со ст. 435 и п. 3 ст. 438 ГК РФ является полным и безоговорочным
            акцептом оферты и подтверждает заключение договора на изложенных ниже условиях.
          </p>
          <ol style={{ fontSize: 11.5, lineHeight: 1.5, color: "var(--ink-3)", margin: "10px 0 0", paddingLeft: 18, display: "grid", gap: 6 }}>
            <li>Предмет договора — поставка оборудования, монтаж и настройка системы «умный дом» в составе и по стоимости, указанным в спецификации настоящего КП.</li>
            <li>Заказ, оформленный <b>без предварительной консультации</b> со специалистом Исполнителя, принимается к исполнению <b>только после 100% оплаты</b> его стоимости.</li>
            <li>Если оплата заказа произведена <b>без предварительной консультации</b>, Исполнитель вправе <b>в одностороннем порядке отказаться</b> от исполнения такого заказа, уведомив об этом Заказчика, и <b>возвращает уплаченные денежные средства в полном объёме в течение 14 (четырнадцати) рабочих дней</b> с даты принятия решения об отказе.</li>
            <li>Сроки и порядок выполнения работ согласуются Сторонами после поступления оплаты. {T.warranty}.</li>
            <li>Цены указаны в рублях РФ. {T.vat} (применяется упрощённая система налогообложения). {T.validity}.</li>
          </ol>
        </div>
      </div>

      {/* actions (скрываются при печати) */}
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", padding: "14px 34px 28px" }} className="kp-actions">
        <button onClick={() => window.print()} className="btn btn-primary">
          <RDIcon name="arrow-down" size={15} /> Скачать КП в PDF
        </button>
        <a href="#contact" onClick={(e) => { e.preventDefault(); bldScroll("contact"); }} className="btn btn-ghost">
          Отправить заявку с этим КП
          <RDIcon name="arrow-right" size={15} />
        </a>
        <span style={{ alignSelf: "center", fontSize: 13, color: "var(--muted)" }}>
          Состав и сумма автоматически прикрепятся к заявке.
        </span>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .kp-pay { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
          .kp-pay .kp-pay-actions { justify-content: center; }
          .kp-req-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .kp-head { padding: 22px 16px 18px !important; }
          .kp-body { padding: 20px 16px 6px !important; }
          .kp-row { grid-template-columns: 1fr 34px 64px 74px !important; gap: 5px !important; }
          .kp-row .kp-ic { display: none !important; }
          .kp-actions { padding-left: 16px !important; padding-right: 16px !important; }
          .kp-actions .btn { width: 100%; justify-content: center; }
        }
      `}</style>
    </div>
  );
};

const Stepper = ({ n, onChange, dark }) => (
  <div style={{
    display: "inline-flex", alignItems: "center",
    background: dark ? "rgba(238,243,250,0.08)" : "var(--bg-2)",
    border: "1px solid " + (dark ? "rgba(238,243,250,0.15)" : "var(--line)"),
    borderRadius: 999,
    padding: 2,
  }}>
    <button onClick={() => onChange(n - 1)} disabled={n <= 0} style={btnStep(dark, n <= 0)}>
      <RDIcon name="minus" size={12} stroke={2.2} />
    </button>
    <span style={{ width: 26, textAlign: "center", fontFamily: "var(--mono)", fontSize: 13 }}>{n}</span>
    <button onClick={() => onChange(n + 1)} style={btnStep(dark, false)}>
      <RDIcon name="plus" size={12} stroke={2.2} />
    </button>
  </div>
);
const btnStep = (dark, dis) => ({
  width: 26, height: 26, borderRadius: 999,
  border: "none",
  background: "transparent",
  color: dark ? "#EEF3FA" : "var(--ink-2)",
  opacity: dis ? 0.3 : 1,
  cursor: dis ? "default" : "pointer",
  display: "grid", placeItems: "center",
});

const bldInput = {
  width: "100%",
  height: 46,
  background: "var(--bg-2)",
  border: "1px solid var(--line)",
  borderRadius: 12,
  padding: "0 14px",
  color: "var(--ink-2)",
  fontSize: 15,
  fontFamily: "var(--font)",
  outline: "none",
};

window.Builder = Builder;