// Savings calculator + Packages + Video + Contact + Footer
const Calculator = () => {
  const [area, setArea] = React.useState(60);
  const [billing, setBilling] = React.useState(7000); // monthly utility bill
  const [risk, setRisk] = React.useState(true);

  // Heuristic savings (purely illustrative, conservative):
  const heatingShare = 0.45; // share of utility going to heat/electricity
  const climateSavings = Math.round(billing * heatingShare * 0.15); // 15% saved by smart climate
  const lightSavings = Math.round(area * 25); // 25 ₽ per m² per month from auto light
  const leakAvoidance = risk ? 3300 : 0;     // amortized risk-adjusted

  const monthly = climateSavings + lightSavings + leakAvoidance;
  const yearly = monthly * 12;

  return (
    <section id="calc">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "center" }} className="calc-grid">
          <div>
            <span className="eyebrow">Сколько экономит</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Экономия складывается<br />из&nbsp;трёх привычек.
            </h2>
            <p className="lede" style={{ marginTop: 22 }}>
              Климат держится только когда нужно. Свет не горит впустую.
              А&nbsp;вовремя замеченная протечка экономит десятки тысяч на ремонте.
              Это консервативная оценка — реальные цифры обычно выше.
            </p>

            <div className="card" style={{ marginTop: 26, padding: 26 }}>
              <Slider label="Площадь квартиры" value={area} min={25} max={250} step={5} suffix=" м²" onChange={setArea} />
              <Slider label="Платёж за коммуналку в месяц" value={billing} min={2000} max={25000} step={500} suffix=" ₽" onChange={setBilling} />
              <label style={{
                display: "flex", alignItems: "center", gap: 12, marginTop: 18,
                cursor: "pointer",
              }}>
                <span style={{
                  width: 40, height: 24, borderRadius: 999,
                  background: risk ? "var(--ink-2)" : "var(--line)",
                  position: "relative", transition: "background 200ms",
                  flexShrink: 0,
                }}>
                  <span style={{
                    position: "absolute", top: 2, left: risk ? 18 : 2,
                    width: 20, height: 20, borderRadius: 999, background: "#fff",
                    transition: "left 200ms",
                  }} />
                </span>
                <input type="checkbox" checked={risk} onChange={e => setRisk(e.target.checked)}
                  style={{ position: "absolute", opacity: 0, pointerEvents: "none" }} />
                <span style={{ fontSize: 14, color: "var(--ink-3)" }}>Учитывать риск дорогой протечки</span>
              </label>
            </div>
          </div>

          <div style={{
            background: "var(--ink-2)",
            color: "#EEF3FA",
            borderRadius: 26,
            padding: 36,
            boxShadow: "var(--shadow-lg)",
          }}>
            <div className="label" style={{ color: "rgba(238,243,250,0.55)" }}>В год можно сэкономить</div>
            <div style={{
              fontSize: "clamp(48px, 7vw, 96px)",
              fontWeight: 500, letterSpacing: "-0.035em",
              lineHeight: 1, marginTop: 8,
            }}>
              {yearly.toLocaleString("ru-RU")} <span style={{ color: "var(--accent)" }}>₽</span>
            </div>
            <div className="mono" style={{ marginTop: 8, fontSize: 12, opacity: 0.7, letterSpacing: "0.06em" }}>
              {monthly.toLocaleString("ru-RU")} ₽ В МЕСЯЦ · ОЦЕНКА
            </div>

            <hr style={{ border: 0, height: 1, background: "rgba(238,243,250,0.12)", margin: "26px 0" }} />

            <div style={{ display: "grid", gap: 14 }}>
              <Line label="Климат-контроль" value={climateSavings} hint="−15% к расходу на отопление" />
              <Line label="Авто-выключение света" value={lightSavings} hint={`из расчёта 25 ₽/м² × ${area} м²`} />
              <Line label="Предотвращение протечки" value={leakAvoidance} hint={leakAvoidance ? "усреднённый риск × вероятность" : "отключено"} />
            </div>

            <div style={{ marginTop: 28, padding: 14, borderRadius: 14, background: "rgba(238,243,250,0.06)", fontSize: 13, color: "rgba(238,243,250,0.75)" }}>
              Это базовая оценка. На реальном объекте экономия складывается
              из десятков мелочей: ночные тарифы, контроль приборов в режиме ожидания,
              уход в эко-режим при отсутствии — расскажем при осмотре.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .calc-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
};

const Line = ({ label, value, hint }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
    <div>
      <div style={{ fontSize: 15 }}>{label}</div>
      <div className="mono" style={{ fontSize: 11, color: "rgba(238,243,250,0.55)", letterSpacing: "0.04em", marginTop: 2 }}>{hint}</div>
    </div>
    <div className="mono" style={{ fontSize: 18, color: value ? "var(--accent)" : "rgba(238,243,250,0.4)" }}>
      {value ? `+${value.toLocaleString("ru-RU")} ₽` : "0 ₽"}
    </div>
  </div>
);

const Slider = ({ label, value, min, max, step, suffix, onChange }) => (
  <div style={{ marginTop: 14 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <span style={{ fontSize: 14, color: "var(--ink-3)" }}>{label}</span>
      <span className="mono" style={{ fontSize: 15, color: "var(--ink-2)", fontWeight: 500 }}>
        {value.toLocaleString("ru-RU")}{suffix}
      </span>
    </div>
    <input type="range" min={min} max={max} step={step} value={value}
      onChange={e => onChange(Number(e.target.value))}
      style={{ width: "100%", marginTop: 10, accentColor: "#1E3A2F" }} />
  </div>
);

// ----- Packages -----
const Packages = ({ onSelect, onRequest, onConsult, activeName }) => {
  const { PACKAGES, computeQuote, money } = window.RD;

  return (
    <section id="packages" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, alignItems: "end" }} className="pkg-head">
          <div>
            <span className="eyebrow">Готовые пакеты</span>
            <h2 className="h-section" style={{ marginTop: 16, maxWidth: "18ch" }}>
              Готовые пакеты с&nbsp;чётким составом.
            </h2>
          </div>
          <div style={{ maxWidth: 360 }}>
            <p className="lede">
              Выберите пакет — оставьте заявку или дособерите состав в конструкторе.
              К любой заявке автоматически прикрепляются КП и счёт.
            </p>
            <button onClick={onConsult} className="btn btn-ghost" style={{ marginTop: 16 }}>
              Проконсультироваться бесплатно <RDIcon name="arrow-right" size={14} />
            </button>
          </div>
        </div>

        <div style={{
          marginTop: 36,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 14,
          alignItems: "stretch",
        }} className="pkg-grid">
          {PACKAGES.map(p => {
            const quote = computeQuote(p.compose);
            const isActive = activeName === p.name;
            return (
              <div key={p.id} className="card" style={{
                background: p.flagship ? "var(--ink-2)" : "var(--surface)",
                color: p.flagship ? "#EEF3FA" : "var(--ink)",
                borderColor: isActive ? "var(--accent)" : (p.flagship ? "var(--ink-2)" : "var(--line-2)"),
                boxShadow: isActive ? "0 0 0 2px var(--accent)" : undefined,
                padding: 24,
                display: "flex", flexDirection: "column",
                position: "relative",
              }}>
                {p.flagship && (
                  <span className="mono" style={{
                    position: "absolute", top: 18, right: 18,
                    fontSize: 10, letterSpacing: "0.08em",
                    background: "var(--accent)", color: "#fff",
                    padding: "4px 8px", borderRadius: 999, textTransform: "uppercase",
                  }}>Флагман</span>
                )}
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: p.flagship ? "rgba(238,243,250,0.1)" : "var(--bg-2)",
                  color: p.color,
                  display: "grid", placeItems: "center",
                }}>
                  <RDIcon name={p.icon} size={22} stroke={1.8} />
                </div>
                <div className="mono" style={{ marginTop: 16, fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: p.flagship ? "rgba(238,243,250,0.6)" : "var(--muted)" }}>{p.tagline}</div>
                <h3 className="h-card" style={{ marginTop: 6, color: p.flagship ? "#EEF3FA" : "var(--ink-2)" }}>{p.name}</h3>
                <div style={{ marginTop: 8, fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em", color: p.flagship ? "#EEF3FA" : "var(--ink-2)" }}>
                  {money(quote.total)}
                </div>
                <p style={{ marginTop: 10, fontSize: 13.5, lineHeight: 1.5, color: p.flagship ? "rgba(238,243,250,0.75)" : "var(--ink-3)" }}>{p.blurb}</p>

                <div className="label" style={{ marginTop: 16, marginBottom: 8, color: p.flagship ? "rgba(238,243,250,0.55)" : "var(--muted)" }}>Состав · {quote.pieces} шт.</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 9, alignContent: "start", flex: 1 }}>
                  {quote.items.map(it => (
                    <li key={it.id} style={{ display: "flex", justifyContent: "space-between", gap: 10, fontSize: 13, lineHeight: 1.35, alignItems: "flex-start", color: p.flagship ? "rgba(238,243,250,0.85)" : "var(--ink-3)" }}>
                      <span style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                        <span style={{ width: 5, height: 5, borderRadius: 99, background: p.flagship ? "var(--accent)" : "var(--ink-2)", flexShrink: 0, marginTop: 6 }} />
                        {it.name}
                      </span>
                      <span className="mono" style={{ opacity: 0.7, flexShrink: 0, marginTop: 1 }}>×{it.qty}</span>
                    </li>
                  ))}
                </ul>

                <div className="pkg-actions" style={{ marginTop: 20, display: "grid", gap: 8 }}>
                  <button onClick={() => onRequest(p)} className="btn" style={{
                    background: isActive ? "var(--good)" : "var(--accent)",
                    color: "#fff",
                    justifyContent: "center", width: "100%",
                    fontSize: 14, height: 44, border: "none", cursor: "pointer",
                  }}>
                    {isActive ? <><RDIcon name="check" size={15} stroke={2.4} /> Выбран — оставить заявку</> : <>Оставить заявку на пакет <RDIcon name="arrow-right" size={14} /></>}
                  </button>
                  <button onClick={() => onSelect(p)} className="btn" style={{
                    background: "transparent",
                    color: p.flagship ? "#EEF3FA" : "var(--ink-2)",
                    border: "1px solid " + (p.flagship ? "rgba(238,243,250,0.3)" : "var(--line)"),
                    justifyContent: "center", width: "100%",
                    fontSize: 13.5, height: 42, cursor: "pointer",
                  }}>
                    {isActive ? "Изменить состав" : "Рассчитать / изменить состав"}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

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

// ----- Video -----
const VideoDemo = () => (
  <section id="video">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 48, alignItems: "center" }} className="vid-grid">
        <div>
          <span className="eyebrow">Видео-демо</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Посмотрите, как РазумДом<br />работает на объекте.
          </h2>
          <p className="lede" style={{ marginTop: 22 }}>
            Короткое видео с реального объекта в Иркутске. Показываем,
            как срабатывает защита от протечки, как греется пол по утрам,
            как один сценарий выключает всю квартиру.
          </p>
          <a href="#contact" className="btn btn-ghost" style={{ marginTop: 22 }}>
            Запросить ссылку <RDIcon name="arrow-right" size={14} />
          </a>
        </div>
        <div style={{ position: "relative" }}>
          <div className="ph" style={{ aspectRatio: "16 / 10", borderRadius: 22 }}>
            <button style={{
              position: "absolute", inset: 0, margin: "auto",
              width: 84, height: 84, borderRadius: 999,
              background: "var(--ink-2)", color: "var(--accent)",
              border: "none", cursor: "pointer",
              display: "grid", placeItems: "center",
              boxShadow: "var(--shadow-lg)",
            }}>
              <RDIcon name="play" size={32} />
            </button>
            <div className="ph-label">video · 1:42 · placeholder</div>
            <div style={{
              position: "absolute", top: 14, left: 14,
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 10px", borderRadius: 999,
              background: "rgba(19,31,56,0.7)", color: "#EEF3FA",
              fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em",
              textTransform: "uppercase", backdropFilter: "blur(4px)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)", animation: "pulse-ring 2s infinite ease-out" }} />
              Объект · Иркутск
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) { .vid-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

// ----- Contact -----
const Contact = ({ picked, presetName, kpNumber, consult, setConsult }) => {
  const { computeQuote, matchPackage, money, submitLead } = window.RD;
  const quote = computeQuote(picked || {});
  const configName = presetName || matchPackage(picked || {}) || "Индивидуальная конфигурация";
  const interest = consult ? "Бесплатная консультация" : configName;

  const [name, setName] = React.useState("");
  const [contact, setContact] = React.useState("");
  const [objectType, setObjectType] = React.useState("Квартира в новостройке");
  const [comment, setComment] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | done | error
  const [valErr, setValErr] = React.useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    if (name.trim().length < 2) { setValErr("Напишите, как к вам обращаться."); return; }
    if (contact.trim().length < 3) { setValErr("Укажите телефон или Telegram — как с вами связаться."); return; }
    setValErr("");
    setStatus("sending");

    const payload = window.RD.buildLeadPayload({
      name, contact, objectType, comment, picked, configName, kpNumber, interest,
    });
    const res = await submitLead(payload);
    setStatus(res.ok ? "done" : "error");
  };

  return (
    <section id="contact" style={{ background: "var(--ink-2)", color: "#EEF3FA" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }} className="ct-grid">
          <div>
            <span className="eyebrow" style={{ color: "rgba(238,243,250,0.55)" }}>Связаться</span>
            <h2 className="h-section" style={{ marginTop: 16, color: "#EEF3FA" }}>
              Оставьте заявку —<br />ответим в течение дня.
            </h2>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8, marginTop: 18,
              padding: "7px 14px", borderRadius: 999,
              background: "rgba(232,154,28,0.16)", border: "1px solid rgba(232,154,28,0.4)",
              color: "#F4C77F", fontSize: 13, fontWeight: 500,
            }}>
              <span style={{ width: 7, height: 7, borderRadius: 99, background: "var(--accent)" }} />
              Бесплатная консультация — 0&nbsp;₽
            </div>
            <p className="lede" style={{ marginTop: 18, color: "rgba(238,243,250,0.7)" }}>
              Поможем понять, что можно автоматизировать в вашей квартире или частном доме,
              и подскажем оптимальный состав. К заявке автоматически прикрепляется
              собранная комплектация и КП. Работаем по Иркутску и области.
            </p>

            {/* Прикреплённый блок: КП — или карточка бесплатной консультации */}
            {consult ? (
              <div style={{
                marginTop: 28,
                background: "rgba(232,154,28,0.08)",
                border: "1px solid rgba(232,154,28,0.3)",
                borderRadius: 16,
                padding: 18,
              }}>
                <div className="label" style={{ color: "rgba(238,243,250,0.6)" }}>Тип заявки</div>
                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                  <span style={{ fontSize: 16, fontWeight: 500 }}>Бесплатная консультация</span>
                  <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>0&nbsp;₽</span>
                </div>
                <div className="mono" style={{ marginTop: 4, fontSize: 11, color: "rgba(238,243,250,0.5)", letterSpacing: "0.04em" }}>
                  Подберём состав под вашу квартиру или дом
                </div>
                <a href="#builder" onClick={(e) => { e.preventDefault(); setConsult && setConsult(false); window.RD.scrollTo("builder"); }}
                   style={{ display: "inline-flex", gap: 6, alignItems: "center", marginTop: 12, fontSize: 13, color: "var(--accent)" }}>
                  Собрать пакет самостоятельно <RDIcon name="arrow-right" size={13} />
                </a>
              </div>
            ) : (
              <div style={{
                marginTop: 28,
                background: "rgba(238,243,250,0.05)",
                border: "1px solid rgba(238,243,250,0.12)",
                borderRadius: 16,
                padding: 18,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="label" style={{ color: "rgba(238,243,250,0.6)" }}>Прикреплено к заявке</div>
                  <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>КП № {kpNumber}</span>
                </div>
                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                  <span style={{ fontSize: 16, fontWeight: 500 }}>{interest}</span>
                  <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{money(quote.total)}</span>
                </div>
                <div className="mono" style={{ marginTop: 4, fontSize: 11, color: "rgba(238,243,250,0.5)", letterSpacing: "0.04em" }}>
                  {quote.pieces} устройств · монтаж и настройка включены
                </div>
                <a href="#builder" onClick={(e) => { e.preventDefault(); window.RD.scrollTo("builder"); }}
                   style={{ display: "inline-flex", gap: 6, alignItems: "center", marginTop: 12, fontSize: 13, color: "var(--accent)" }}>
                  Изменить состав <RDIcon name="arrow-right" size={13} />
                </a>
              </div>
            )}

            <div style={{ marginTop: 24, display: "grid", gap: 12 }}>
              <ContactRow icon="phone" label="Телефон" value="+7 950 052-77-12" href="tel:+79500527712" />
              <ContactRow icon="mic" label="Telegram" value="@razumdom38" href="https://t.me/8577041302" />
              <ContactRow icon="leaf" label="WhatsApp" value="+7 950 052-77-12" href="https://wa.me/+79500527712" />
            </div>
          </div>

          <div style={{
            background: "rgba(238,243,250,0.04)",
            border: "1px solid rgba(238,243,250,0.12)",
            borderRadius: 22,
            padding: 28,
          }}>
            {status === "done" ? (
              <div style={{ textAlign: "center", padding: "40px 0" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: "var(--accent)", color: "#fff",
                  display: "grid", placeItems: "center", margin: "0 auto",
                }}>
                  <RDIcon name="check" size={32} stroke={2.4} />
                </div>
                <h3 className="h-card" style={{ marginTop: 18, color: "#EEF3FA" }}>Заявка отправлена</h3>
                <p style={{ marginTop: 8, color: "rgba(238,243,250,0.7)" }}>
                  {consult
                    ? "Заявка на бесплатную консультацию принята. Свяжемся с вами в ближайшее время."
                    : `КП № ${kpNumber} на ${money(quote.total)} принят. Свяжемся с вами в ближайшее время.`}
                </p>
                <button onClick={() => setStatus("idle")} className="btn btn-ghost" style={{ marginTop: 22, color: "#EEF3FA", borderColor: "rgba(238,243,250,0.3)" }}>
                  Новая заявка
                </button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <Field label="Как к вам обращаться">
                  <input type="text" required value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" autoComplete="name" style={inputStyle} />
                </Field>
                <Field label="Телефон или Telegram">
                  <input type="text" required value={contact} onChange={(e) => setContact(e.target.value)} placeholder="+7 ___ ___-__-__ или @username" inputMode="tel" autoComplete="tel" style={inputStyle} />
                </Field>
                <Field label="Тип объекта">
                  <div className="ct-obj" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                    {["Квартира в новостройке", "Квартира в обжитом фонде", "Частный дом", "Другое"].map((o) => (
                      <button type="button" key={o} onClick={() => setObjectType(o)}
                        style={{
                          padding: "11px 10px", minHeight: 48, borderRadius: 12,
                          border: "1px solid " + (objectType === o ? "var(--accent)" : "rgba(238,243,250,0.2)"),
                          background: objectType === o ? "var(--accent)" : "transparent",
                          color: objectType === o ? "#fff" : "rgba(238,243,250,0.8)",
                          fontSize: 13, cursor: "pointer", fontWeight: 500, lineHeight: 1.25, textAlign: "center",
                        }}>{o}</button>
                    ))}
                  </div>
                </Field>
                <Field label="Комментарий (опционально)">
                  <textarea rows={3} value={comment} onChange={(e) => setComment(e.target.value)} placeholder="Площадь, этаж, что хотите автоматизировать" style={{ ...inputStyle, resize: "none", minHeight: 80 }} />
                </Field>

                {valErr && (
                  <div style={{ marginBottom: 14, padding: "10px 12px", borderRadius: 10, background: "rgba(232,154,28,0.16)", border: "1px solid rgba(232,154,28,0.4)", fontSize: 13, color: "#F4C77F" }}>
                    {valErr}
                  </div>
                )}

                {status === "error" && (
                  <div style={{ marginBottom: 14, padding: "10px 12px", borderRadius: 10, background: "rgba(210,96,60,0.18)", border: "1px solid rgba(210,96,60,0.4)", fontSize: 13, color: "#FFD9CC" }}>
                    Не удалось отправить. Позвоните нам: +7 950 052-77-12
                  </div>
                )}

                <button type="submit" disabled={status === "sending"} className="btn btn-accent" style={{ width: "100%", justifyContent: "center", marginTop: 8, opacity: status === "sending" ? 0.7 : 1 }}>
                  {status === "sending" ? "Отправляем…" : <>Отправить заявку с КП <RDIcon name="arrow-right" size={16} /></>}
                </button>
                <p className="label" style={{ marginTop: 10, textAlign: "center", color: "rgba(238,243,250,0.5)" }}>
                  Нажимая «Отправить», вы соглашаетесь с обработкой данных
                </p>
              </form>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) { .ct-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const ContactRow = ({ icon, label, value, href }) => (
  <a href={href} style={{
    display: "flex", gap: 14, alignItems: "center",
    padding: "14px 16px",
    background: "rgba(238,243,250,0.04)",
    border: "1px solid rgba(238,243,250,0.08)",
    borderRadius: 14,
    transition: "background 200ms, border-color 200ms",
  }}>
    <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(238,243,250,0.06)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
      <RDIcon name={icon} size={16} stroke={1.8} />
    </span>
    <div>
      <div className="label" style={{ color: "rgba(238,243,250,0.5)" }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 500, marginTop: 2 }}>{value}</div>
    </div>
  </a>
);

const Field = ({ label, children }) => (
  <div style={{ marginBottom: 18 }}>
    <div className="label" style={{ color: "rgba(238,243,250,0.6)", marginBottom: 8 }}>{label}</div>
    {children}
  </div>
);

const inputStyle = {
  width: "100%",
  minHeight: 48,
  background: "rgba(238,243,250,0.06)",
  border: "1px solid rgba(238,243,250,0.16)",
  borderRadius: 12,
  padding: "12px 14px",
  color: "#EEF3FA",
  fontSize: 15,
  fontFamily: "inherit",
  outline: "none",
};

// ----- Footer -----
const Footer = () => (
  <footer style={{ background: "var(--bg-2)", padding: "48px 0", borderTop: "1px solid var(--line-2)" }}>
    <div className="container" style={{ display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
      <div>
        <div className="brand">
          <RDIcon name="logo" size={28} />
          <span>РазумДом</span>
        </div>
        <p className="label" style={{ marginTop: 12, maxWidth: 300, color: "var(--ink-3)", fontSize: 13, textTransform: "none", letterSpacing: 0, fontFamily: "var(--font)" }}>
          Умный дом для квартир и частных домов Иркутска и&nbsp;области: новостройки, ремонт и&nbsp;обжитой жилой фонд
        </p>
      </div>
      <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
        <div>
          <div className="label">Навигация</div>
          <div style={{ display: "grid", gap: 6, marginTop: 12, fontSize: 14, color: "var(--ink-3)" }}>
            <a href="#problems">Проблемы</a>
            <a href="#house">Карта дома</a>
            <a href="#scenarios">Сценарии</a>
            <a href="#vs">Сравнение</a>
            <a href="#builder">Конструктор</a>
            <a href="#packages">Пакеты</a>
          </div>
        </div>
        <div>
          <div className="label">Контакты</div>
          <div style={{ display: "grid", gap: 6, marginTop: 12, fontSize: 14, color: "var(--ink-3)" }}>
            <a href="tel:+79500527712">+7 950 052-77-12</a>
            <a href="mailto:Baikal.Infolink@gmail.com">Baikal.Infolink@gmail.com</a>
            <a href="https://t.me/8577041302">Telegram</a>
            <a href="https://wa.me/+79500527712">WhatsApp</a>
          </div>
        </div>
      </div>
    </div>
    <div className="container" style={{ marginTop: 32, paddingTop: 22, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 12, color: "var(--muted)", fontSize: 13 }}>
      <span>© 2026 РазумДом</span>
      <span className="mono" style={{ letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 11 }}>razumdom38.ru</span>
    </div>
  </footer>
);

window.Calculator = Calculator;
window.Packages = Packages;
window.VideoDemo = VideoDemo;
window.Contact = Contact;
window.Footer = Footer;