(() => {
const { Button, Icon, Photo, UnitCard, Field, Input, Textarea, Checkbox } = window.RespectorGroupDesignSystem_21eac1;
/* Тип квартиры по данным юнита: участок на нулевом этаже, два уровня (мезонет / мансарда) или один уровень. */
const kindOf = u => /участ|авли|сад|двор/i.test((u.extras || []).join(" ")) ? "garden" : /мезонет|мансард|двух/i.test(u.type || "") ? "two" : "one";
const forSale = () => { const D = window.RGDATA || {};
  return (D.projects || []).flatMap(p => (p.units || []).map(u => ({ ...u, project: p.name, pid: p.id })))
    .filter(u => u.status === "free").sort((a, b) => (a.price || 0) - (b.price || 0)); };
const eur = n => "€ " + (Number.isInteger(Math.round(n * 100) / 100) ? Math.round(n).toLocaleString("de-DE") : n.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
const MODE = { m2: "за м²", level: "за уровень", fixed: "за квартиру" };
const qty = (c, l) => c.mode === "m2" ? l.area : c.mode === "level" ? l.levels : 1;
const area = a => String(a).replace(".", ",") + " м²";

const cfgStyles = {
  num: { fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--text-muted)" },
  h2: { fontSize: "var(--fs-h3)", color: "var(--text-strong)" },
  card: on => ({ textAlign: "left", display: "flex", flexDirection: "column", background: "var(--surface-card)", border: (on ? "2px solid var(--border-strong)" : "1px solid var(--border-hairline)"), borderRadius: "var(--radius-card)", padding: on ? 0 : 1, cursor: "pointer", overflow: "hidden", font: "inherit", color: "inherit" }),
};

/* Расчёт сборки — общий для экрана, PDF и заявки. */
function useCalc(C, cats, layoutId, unitCode, pick) {
  const allFree = React.useMemo(forSale, []);
  const baseLayout = C.layouts.find(l => l.id === layoutId);
  const avail = allFree.filter(u => kindOf(u) === layoutId);
  const unit = avail.find(u => u.project + u.code === unitCode);
  const layout = baseLayout && (unit ? { ...baseLayout, area: unit.area } : baseLayout);
  const rows = layout ? cats.map(c => { const t = pick[c.id]; const p = t && c.packages[t]; const known = p && p.price != null && p.price !== ""; return { c, t, p, known, sum: known ? p.price * qty(c, layout) : 0 }; }) : [];
  const total = rows.reduce((a, r) => a + r.sum, 0);
  const pending = rows.some(r => !r.known);
  return { allFree, baseLayout, avail, unit, layout, rows, total, pending };
}
/* Плашка пакета в цвет уровня; первый уровень («Стандарт») остаётся белым. Текст — тёмный на светлых цветах, белый на тёмных. */
const tierFill = (C, t) => { if (!t || !C.tiers.length || t.id === C.tiers[0].id) return null; const m = /oklch\(\s*([\d.]+)/.exec(t.color || ""); const L = m ? +m[1] : 0.5; return { bg: t.color, ink: L >= 0.62 ? "var(--text-strong)" : "#fff" }; };
/* Пакет уровня t в разделе или ближайший нижний, если такого уровня в разделе нет. */
const pkgAt = (C, c, t) => { const i = C.tiers.findIndex(x => x.id === t); for (let j = i; j >= 0; j--) { const id = C.tiers[j].id; if (c.packages[id]) return { id, p: c.packages[id] }; } return null; };
const rowLabel = r => !r.known ? "уточняется" : r.sum === 0 ? "включено" : "+ " + eur(r.sum);
const totalLabel = k => k.pending ? (k.total ? "от " + eur(k.total) : "по смете") : k.total ? eur(k.total) : "€ 0";
const titleOf = k => k.unit ? k.unit.project + " · " + k.unit.code : k.layout.label;

function Intro({ C, cats, start }) {
  return (
    <>
      <section className="rg-container" style={{ paddingBlock: "var(--space-16) var(--space-10)" }}>
        <span className="rg-eyebrow">Пакеты</span>
        <h1 style={{ marginTop: "var(--space-3)", maxWidth: "20ch", fontSize: "var(--fs-display)", fontWeight: "var(--fw-black)", letterSpacing: "var(--ls-hero)", lineHeight: "var(--lh-tight)" }}>Пакеты отделки</h1>
        <p style={{ marginTop: "var(--space-5)", maxWidth: "56ch", fontSize: "var(--fs-lead, 20px)", color: "var(--text-body)", textWrap: "pretty" }}>{C.tiers.length} уровня отделки. Возьмите готовый пакет или соберите свой по разделам — за {cats.length + 3} шага получите PDF со сборкой и расчётом.</p>
        <div style={{ marginTop: "var(--space-8)" }}><Button size="lg" onClick={() => start(null)} iconRight={<Icon name="arrow-right" size={18} />}>Собрать свой пакет</Button></div>
      </section>
      <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
        <div className="rg-tiers">
          {C.tiers.map(t => (
            <div key={t.id} className={"rg-tier" + (tierFill(C, t) ? " is-filled" : "")} style={tierFill(C, t) ? { background: tierFill(C, t).bg, borderColor: tierFill(C, t).bg, color: tierFill(C, t).ink } : undefined}>
              <div className="rg-tier__head">{!tierFill(C, t) && <i style={{ background: t.color }} />}<b>{t.label}</b></div>
              <ul>{cats.map(c => { const f = pkgAt(C, c, t.id); return f ? <li key={c.id}><span>{c.label}</span><b>{f.p.name}{f.id !== t.id && <small style={{ display: "block", fontWeight: 400 }}>как в «{(C.tiers.find(x => x.id === f.id) || {}).label}»</small>}</b></li> : null; })}</ul>
              <Button variant="secondary" full onClick={() => start(t.id)}>Начать с этого пакета</Button>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

function Stepper({ steps, at, maxAt, onGo }) {
  return (
    <ol className="rg-stepper">
      {steps.map((s, i) => (
        <li key={s.id}>
          <button type="button" disabled={i > maxAt} aria-current={i === at ? "step" : undefined} className={i < at ? "is-done" : ""} onClick={() => onGo(i)}>
            <span>{i < at ? <Icon name="check" size={14} /> : i + 1}</span>{s.label}
          </button>
        </li>
      ))}
    </ol>
  );
}

function SendForm({ k, onClose }) {
  const [v, setV] = React.useState({ name: "", contact: "", note: "", ok: false });
  const [state, setState] = React.useState("idle");
  const set = f => e => setV(s => ({ ...s, [f]: f === "ok" ? e.target.checked : e.target.value }));
  React.useEffect(() => { const h = e => e.key === "Escape" && onClose(); window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []);
  const valid = v.name.trim() && v.contact.trim() && v.ok;
  const submit = async e => {
    e.preventDefault(); if (!valid) return;
    setState("sending");
    const r = await window.RGStore.sendLead({ consent: true, name: v.name.trim(), contact: v.contact.trim(), channel: "Конфигуратор пакетов", topic: "Сборка: " + k.rows.map(r => r.c.label + " — " + r.p.name).join(", ") + " · " + totalLabel(k), unit: k.unit ? k.unit.code : "—", note: v.note.trim() });
    setState(r.ok ? "sent" : "error");
  };
  return (
    <div className="rg-modal" role="dialog" aria-modal="true" aria-label="Отправить в отдел продаж">
      <button className="rg-modal__scrim" aria-label="Закрыть" onClick={onClose} />
      <div className="rg-modal__box">
        <button type="button" className="rg-partner__close rg-modal__x" onClick={onClose} aria-label="Закрыть"><Icon name="x" size={18} /></button>
        {state === "sent" ? (
          <div className="rg-modal__done">
            <span className="rg-partner__icon" style={{ "--pa": "var(--free-700)", "--pa-soft": "var(--free-100)" }}><Icon name="check" size={22} /></span>
            <h3>Сборка отправлена</h3>
            <p>Менеджер отдела продаж свяжется с вами и пришлёт точную смету по {k.unit ? "квартире " + k.unit.code : "выбранному типу квартиры"}.</p>
            <Button onClick={onClose}>Готово</Button>
          </div>
        ) : (
          <form onSubmit={submit} className="rg-modal__form">
            <div>
              <h3>Отправить в отдел продаж</h3>
              <p>{titleOf(k)}, {area(k.layout.area)} · отделка {totalLabel(k)}</p>
            </div>
            <Field label="Как к вам обращаться" htmlFor="cf-name"><Input id="cf-name" value={v.name} onChange={set("name")} autoFocus required /></Field>
            <Field label="Телефон, WhatsApp или почта" htmlFor="cf-contact"><Input id="cf-contact" value={v.contact} onChange={set("contact")} placeholder="+30 …" required /></Field>
            <Field label="Комментарий" htmlFor="cf-note"><Textarea id="cf-note" rows={3} value={v.note} onChange={set("note")} placeholder="Удобное время для звонка, вопросы по отделке" /></Field>
            {state === "error" && <p role="alert" style={{ fontSize: "var(--fs-body-sm)", color: "var(--sold-700, #a33)" }}>Не удалось отправить. Попробуйте ещё раз или напишите нам: <a href="https://wa.me/306979917088" target="_blank" rel="noopener">WhatsApp</a>, <a href="mailto:respectorgroup@gmail.com">respectorgroup@gmail.com</a>.</p>}
            <Checkbox label={<span>Соглашаюсь с <a href="#privacy" target="_blank" rel="noopener">политикой конфиденциальности</a></span>} checked={v.ok} onChange={set("ok")} />
            <Button type="submit" size="lg" full disabled={!valid || state === "sending"} icon={<Icon name="send" size={18} />}>{state === "sending" ? "Отправляем…" : "Отправить"}</Button>
          </form>
        )}
      </div>
    </div>
  );
}

function ConfigPdf({ k, tier }) {
  const Head = window.RGPdfHead, Foot = window.RGPdfFoot;
  const no = "Сборка " + new Date().toISOString().slice(2, 10).replace(/-/g, "") + "-" + String(Date.now()).slice(-4);
  const facts = [["Тип", k.baseLayout.label], ["Площадь", area(k.layout.area)], ["Уровней", k.layout.levels], ["Квартира", k.unit && k.unit.price ? eur(k.unit.price) : "не выбрана"]];
  return (
    <section className="rg-pdf__page">
      <Head kind="Сборка квартиры" />
      <div className="rg-pdf__title">
        <div>
          <div className="rg-pdf__eyebrow">{k.unit ? "Код квартиры" : "Тип квартиры"}</div>
          <div className="rg-pdf__code">{k.unit ? k.unit.code : k.layout.label}</div>
          <div className="rg-pdf__muted">{k.unit ? k.unit.project + " · " + (k.unit.type || "") + (k.unit.floor ? " · " + k.unit.floor : "") : "Расчёт по типовой площади"}</div>
        </div>
        <div className="rg-pdf__pricebox">
          <div className="rg-pdf__eyebrow">Доплата за отделку</div>
          <div className="rg-pdf__price">{totalLabel(k)}</div>
          {k.unit && k.unit.price && <div className="rg-pdf__muted">с квартирой {(k.pending ? "от " : "") + eur(k.unit.price + k.total)}</div>}
        </div>
      </div>
      <div className="rg-pdf__facts">{facts.map(([a, b]) => <div key={a}><span>{a}</span><b>{b}</b></div>)}</div>
      <div className="rg-pdf__h2">Отделка по разделам</div>
      <table className="rg-pdf__table">
        <thead><tr><th>Раздел</th><th>Пакет</th><th>Что входит</th><th style={{ textAlign: "right" }}>Доплата</th></tr></thead>
        <tbody>{k.rows.map(r => (
          <tr key={r.c.id}><td><b>{r.c.label}</b></td><td style={{ whiteSpace: "nowrap" }}><i className="rg-pdf__dot" style={{ background: tier(r.t).color }} />{tier(r.t).label}</td>
            <td><b>{r.p.name}</b><br /><span className="rg-pdf__muted">{r.p.desc}</span></td><td style={{ textAlign: "right", whiteSpace: "nowrap" }}>{rowLabel(r)}</td></tr>
        ))}</tbody>
      </table>
      <div className="rg-pdf__contacts">
        <div><b>Отдел продаж</b><span>Пришлём точную смету и забронируем квартиру. {no}.</span></div>
        <div className="rg-pdf__contactlist">{(((window.RGDATA || {}).company || {}).phones || []).slice(0, 2).map(x => <span key={x}>{x}</span>)}<span>{((window.RGDATA || {}).company || {}).email}</span></div>
      </div>
      <Foot code={k.unit ? k.unit.code : k.layout.label} page={no} />
    </section>
  );
}

function ConfiguratorPage({ go }) {
  const C = (window.RGDATA || {}).configurator || { layouts: [], tiers: [], categories: [] };
  const cats = C.categories.filter(c => c.on !== false);
  const [at, setAt] = React.useState(-1);
  const [maxAt, setMaxAt] = React.useState(0);
  const [layoutId, setLayoutIdRaw] = React.useState(null);
  const [unitCode, setUnitCode] = React.useState(null);
  const [pick, setPick] = React.useState(() => cats.reduce((a, c) => (a[c.id] = (C.tiers[0] || {}).id, a), {}));
  const [form, setForm] = React.useState(false);
  const setLayoutId = id => { setLayoutIdRaw(id); setUnitCode(null); };
  const k = useCalc(C, cats, layoutId, unitCode, pick);
  const tier = id => C.tiers.find(t => t.id === id) || {};
  const priceLabel = (p, c) => p.price === 0 ? "Включено в стоимость" : (p.price == null || p.price === "") ? "Доплата уточняется" : "+ " + eur(p.price) + " " + MODE[c.mode];
  const steps = [{ id: "type", label: "Тип квартиры" }, { id: "unit", label: "Квартира" }, ...cats.map(c => ({ id: c.id, label: c.label, cat: c })), { id: "sum", label: "Итог" }];
  const goStep = i => { setAt(i); setMaxAt(m => Math.max(m, i)); const el = document.querySelector(".rg-stepper"); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 90; if (window.scrollY > y) window.scrollTo({ top: y, behavior: "smooth" }); } };
  const start = t => { if (t) setPick(cats.reduce((a, c) => { const f = pkgAt(C, c, t); a[c.id] = f ? f.id : a[c.id]; return a; }, { ...pick })); setAt(0); setMaxAt(0); window.scrollTo(0, 0); };
  if (at < 0) return <Intro C={C} cats={cats} start={start} />;
  const s = steps[at];
  const canNext = s.id !== "type" || !!layoutId;
  const last = at === steps.length - 1;

  return (
    <>
      <section className="rg-container" style={{ paddingBlock: "var(--space-12) var(--space-8)" }}>
        <button type="button" className="rg-backlink" onClick={() => setAt(-1)}><Icon name="arrow-left" size={16} />Пакеты</button>
        <h1 style={{ marginTop: "var(--space-4)", fontSize: "var(--fs-h1)", fontWeight: "var(--fw-black)", lineHeight: "var(--lh-tight)" }}>Конфигуратор квартиры</h1>
        <div style={{ marginTop: "var(--space-6)" }}><Stepper steps={steps} at={at} maxAt={layoutId ? Math.max(maxAt, steps.length - 1) : 0} onGo={goStep} /></div>
      </section>

      <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--space-12) var(--section-y)" }}>
        <div className="rg-container rg-cfg">
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: "var(--space-3)", marginBottom: "var(--space-6)", flexWrap: "wrap" }}>
              <span style={cfgStyles.num}>Шаг {at + 1} из {steps.length}</span>
              <h2 style={cfgStyles.h2}>{s.id === "unit" ? "Квартиры в продаже · " + k.baseLayout.label.toLowerCase() : s.id === "sum" ? "Ваша сборка" : s.label}</h2>
              {s.cat && <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-muted)" }}>{MODE[s.cat.mode]}</span>}
            </div>

            {s.id === "type" && <div className="rg-g3">
              {C.layouts.map(l => (
                <button key={l.id} type="button" onClick={() => setLayoutId(l.id)} aria-pressed={layoutId === l.id} style={cfgStyles.card(layoutId === l.id)}>
                  {l.image ? <img src={l.image} alt={"План: " + l.label} style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", background: "var(--surface-sunken)", display: "block" }} /> : <Photo ratio="4/3" radius="0" />}
                  <div style={{ padding: "var(--space-5)", display: "grid", gap: "var(--space-2)" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                      <b style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--text-strong)" }}>{l.label}</b>
                      {layoutId === l.id && <Icon name="check" size={20} />}
                    </div>
                    <span style={{ color: "var(--text-body)", textWrap: "pretty" }}>{l.desc}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--text-muted)" }}>{l.levels} {l.levels === 1 ? "уровень" : "уровня"} · в продаже: {k.allFree.filter(u => kindOf(u) === l.id).length}</span>
                  </div>
                </button>
              ))}
            </div>}

            {s.id === "unit" && (k.avail.length ? (
              <>
                <p style={{ marginBottom: "var(--space-5)", color: "var(--text-body)" }}>Выберите квартиру — расчёт пойдёт по её площади. Шаг можно пропустить.</p>
                <div className="rg-g3">
                  {k.avail.map(u => { const on = unitCode === u.project + u.code; return (
                    <div key={u.project + u.code} style={{ outline: on ? "2px solid var(--border-strong)" : "none", outlineOffset: 4, borderRadius: "var(--radius-card)" }}>
                      <UnitCard {...u} perM2={undefined} floor={u.project + " · " + u.floor} href="#" onClick={e => { e.preventDefault(); setUnitCode(on ? null : u.project + u.code); }} />
                    </div>); })}
                </div>
              </>
            ) : (
              <div className="rg-search__empty" style={{ alignItems: "flex-start", textAlign: "left" }}>
                Сейчас таких квартир в продаже нет. Расчёт пойдёт по типовой площади {area(k.baseLayout.area)}; сообщим, когда появятся.
                <Button variant="secondary" size="sm" onClick={() => go("projects")}>Все проекты</Button>
              </div>
            ))}

            {s.cat && <div className="rg-tiers rg-tiers--pick">
              {C.tiers.map(t => { const p = s.cat.packages[t.id]; if (!p) return null; const on = pick[s.cat.id] === t.id; const f = tierFill(C, t); return (
                <button key={t.id} type="button" aria-pressed={on} onClick={() => setPick(x => ({ ...x, [s.cat.id]: t.id }))}
                  style={{ ...cfgStyles.card(on), padding: on ? "calc(var(--space-5) - 1px)" : "var(--space-5)", gap: "var(--space-2)", ...(f ? { background: f.bg, color: f.ink, borderColor: on ? "var(--border-strong)" : f.bg, boxShadow: on ? "0 0 0 2px var(--surface-page, #fff), 0 0 0 4px var(--border-strong)" : "none" } : {}) }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700, color: f ? f.ink : "var(--text-strong)" }}>
                    {!f && <i style={{ width: 10, height: 10, borderRadius: 999, background: t.color }} />}{t.label}{on && <Icon name="check" size={16} style={{ marginLeft: "auto" }} />}</span>
                  <b style={{ color: f ? f.ink : "var(--text-strong)", fontSize: 19 }}>{p.name}</b>
                  <span style={{ color: f ? f.ink : "var(--text-body)", fontSize: 15, textWrap: "pretty", flex: 1 }}>{p.desc}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: f ? f.ink : p.price === 0 ? "var(--text-strong)" : "var(--text-muted)" }}>{priceLabel(p, s.cat)}</span>
                </button>); })}
            </div>}

            {s.id === "sum" && <div className="rg-cfgsum">
              <div className="rg-cfgsum__title">
                <div><span className="rg-eyebrow">{k.unit ? "Код квартиры" : "Тип квартиры"}</span><b className="rg-unitcode" style={{ fontSize: "clamp(40px,5vw,64px)" }}>{k.unit ? k.unit.code : k.layout.label}</b>
                  <span style={{ color: "var(--text-muted)" }}>{k.unit ? k.unit.project + " · " : ""}{area(k.layout.area)} · {k.layout.levels} {k.layout.levels === 1 ? "уровень" : "уровня"}</span></div>
              </div>
              <table className="rg-cfgsum__table">
                <tbody>{k.rows.map((r, i) => (
                  <tr key={r.c.id}><th>{r.c.label}</th><td><i style={{ background: tier(r.t).color }} />{tier(r.t).label} · {r.p.name}</td>
                    <td>{rowLabel(r)}</td><td><button type="button" onClick={() => goStep(2 + i)}>Изменить</button></td></tr>
                ))}</tbody>
              </table>
              <div className="rg-cfgsum__btns">
                <Button size="lg" onClick={() => setForm(true)} icon={<Icon name="send" size={18} />}>Отправить в отдел продаж</Button>
                <window.RGPdfButton size="lg" label="Скачать PDF сборки" name={"Respector Group — сборка " + titleOf(k)} build={() => <ConfigPdf k={k} tier={tier} />} />
              </div>
              {C.note && <p style={{ fontSize: 14, color: "var(--text-muted)", textWrap: "pretty" }}>{C.note}</p>}
            </div>}

            <div className="rg-cfgnav">
              <Button variant="ghost" onClick={() => at === 0 ? setAt(-1) : goStep(at - 1)} icon={<Icon name="arrow-left" size={16} />}>{at === 0 ? "К пакетам" : "Назад"}</Button>
              {!last && <Button disabled={!canNext} onClick={() => goStep(at + 1)} iconRight={<Icon name="arrow-right" size={16} />}>{s.id === "unit" && !k.unit ? "Пропустить" : at === steps.length - 2 ? "К итогу" : "Далее"}</Button>}
            </div>
          </div>

          {k.layout && <aside className="rg-cfgaside">
            <div>
              <div style={{ fontSize: 14, color: "var(--text-muted)" }}>Ваша конфигурация</div>
              <b style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--text-strong)" }}>{titleOf(k)}, {area(k.layout.area)}</b>
              {k.unit && k.unit.price && <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--text-muted)", marginTop: 4 }}>квартира {eur(k.unit.price)} + отделка</div>}
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {k.rows.map(r => (
                <div key={r.c.id} style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: 15, fontWeight: s.cat && s.cat.id === r.c.id ? 700 : 400 }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 8 }}><i style={{ width: 8, height: 8, borderRadius: 999, background: tier(r.t).color, flexShrink: 0 }} />{r.c.label} · {(tier(r.t).label || "").toLowerCase()}</span>
                  <span style={{ fontFamily: "var(--font-mono)", color: r.known ? "var(--text-strong)" : "var(--text-muted)", whiteSpace: "nowrap" }}>{rowLabel(r)}</span>
                </div>
              ))}
            </div>
            <div style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: "var(--space-4)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span>Доплата за отделку</span>
              <b style={{ fontFamily: "var(--font-display)", fontSize: k.pending ? 20 : 28, color: "var(--text-price)" }}>{totalLabel(k)}</b>
            </div>
            {k.unit && k.unit.price && <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}><span>С квартирой</span><b style={{ fontFamily: "var(--font-mono)", fontSize: 18, color: "var(--text-strong)" }}>{(k.pending ? "от " : "") + eur(k.unit.price + k.total)}</b></div>}
            {!last && <Button variant="secondary" onClick={() => goStep(steps.length - 1)}>Перейти к итогу</Button>}
          </aside>}
        </div>
      </section>
      {form && <SendForm k={k} onClose={() => setForm(false)} />}
    </>
  );
}
window.ConfiguratorPage = ConfiguratorPage;
})();