// Main app + nav + small marquee/why strip
const Nav = () => (
  <div className="nav">
    <div className="nav-inner">
      <a href="#" className="brand">
        <RDIcon name="logo" size={42} />
        <span className="nav-brand-name" style={{ fontSize: 20, fontWeight: 600 }}>РазумДом</span>
        <span className="mono nav-irk" style={{
          fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
          background: "var(--bg-2)", color: "var(--ink-3)",
          padding: "3px 8px", borderRadius: 999, marginLeft: 6,
        }}>Иркутск</span>
      </a>
      <div className="nav-links">
        <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 className="row">
        <a href="tel:+79500527712" className="btn btn-ghost" style={{ height: 38, padding: "0 14px", fontSize: 13 }}>
          <RDIcon name="phone" size={14} />
          <span className="nav-phone">+7 950 052-77-12</span>
        </a>
        <a href="#contact" className="btn btn-primary" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
          Заявка
        </a>
      </div>
    </div>
  </div>
);

// Marquee of "why" badges
const WhyStrip = () => {
  const items = [
    { icon: "house", text: "Закладываем на этапе ремонта" },
    { icon: "gear", text: "Интеграция после ремонта" },
    { icon: "cloud-off", text: "Автономно без интернета" },
    { icon: "leaf", text: "Поддержка Zigbee" },
    { icon: "mic", text: "Голосовое управление" },
    { icon: "key", text: "Квартира или частный дом" },
    { icon: "phone", text: "Управление со смартфона" },
  ];
  const row = [...items, ...items];
  return (
    <section className="rd-marquee-wrap" style={{ padding: "28px 0", background: "var(--ink-2)", color: "#EEF3FA" }}>
      <div className="rd-marquee">
        {row.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10, fontSize: 15, opacity: 0.92, flexShrink: 0 }}>
            <RDIcon name={it.icon} size={18} />
            {it.text}
            <span style={{ marginLeft: 24, color: "var(--accent)" }}>·</span>
          </span>
        ))}
      </div>
    </section>
  );
};

// ----- Tweaks (host) -----
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "promise",
  "showWhyStrip": true,
  "accent": "#E89A1C"
}/*EDITMODE-END*/;

function App() {
  const [t, setT, setTweak] = useTweaks(DEFAULTS);

  // Ре-рендер всего дерева при правках каталога в админ-панели
  const [, forceCatalog] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => window.RD.onCatalogChange(forceCatalog), []);

  // Shared builder/quote state ---------------------------------------------
  const [picked, setPicked] = React.useState(() => ({ ...window.RD.PACKAGES[0].compose })); // Базовый ~12 000 ₽
  const [presetName, setPresetName] = React.useState(window.RD.PACKAGES[0].name);
  const [kpNumber] = React.useState(() => window.RD.kpNumber());
  const [consult, setConsult] = React.useState(false); // «Бесплатная консультация» как интерес заявки

  const requestConsult = () => {
    setConsult(true);
    window.RD.scrollTo("contact");
  };

  // Готовый пакет → пересчитать состав в конструкторе
  const selectPackage = (p) => {
    setConsult(false);
    setPicked({ ...p.compose });
    setPresetName(p.name);
    window.RD.scrollTo("builder");
  };

  // Готовый пакет → оставить заявку (прикрепляем пакет и ведём в контакты)
  const requestPackage = (p) => {
    setConsult(false);
    setPicked({ ...p.compose });
    setPresetName(p.name);
    window.RD.scrollTo("contact");
  };

  // Apply accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // shift accent-2 to darker variant
    const c = t.accent;
    document.documentElement.style.setProperty("--accent-2", shade(c, -0.15));
  }, [t.accent]);

  return (
    <>
      <Nav />
      <Hero variant={t.hero} t={t} setTweak={setTweak} onConsult={requestConsult} />
      {t.showWhyStrip && <WhyStrip />}
      <Problems />
      <House />
      <Scenarios />
      <Comparison />
      <Builder picked={picked} setPicked={setPicked} presetName={presetName} setPresetName={setPresetName} kpNumber={kpNumber} setConsult={setConsult} />
      <Calculator />
      <Packages onSelect={selectPackage} onRequest={requestPackage} onConsult={requestConsult} activeName={presetName} />
      <VideoDemo />
      <Contact picked={picked} presetName={presetName} kpNumber={kpNumber} consult={consult} setConsult={setConsult} />
      <Footer />

      <AdminPanel />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Главный экран">
          <TweakRadio
            label="Вариант героя"
            value={t.hero}
            options={[
              { value: "promise", label: "Обещание" },
              { value: "scenarios", label: "Сценарии" },
              { value: "comparison", label: "Сравнение" },
            ]}
            onChange={v => setTweak("hero", v)}
          />
          <TweakToggle
            label="Показывать ленту «Почему»"
            value={t.showWhyStrip}
            onChange={v => setTweak("showWhyStrip", v)}
          />
        </TweakSection>
        <TweakSection title="Цвет">
          <TweakColor
            label="Акцент"
            value={t.accent}
            options={["#E89A1C", "#3FC6E0", "#2E9C6E", "#C57E12", "#1C2E52"]}
            onChange={v => setTweak("accent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Darken/lighten helper
function shade(hex, amt) {
  let c = hex.replace("#", "");
  if (c.length === 3) c = c.split("").map(x => x + x).join("");
  const r = parseInt(c.slice(0, 2), 16);
  const g = parseInt(c.slice(2, 4), 16);
  const b = parseInt(c.slice(4, 6), 16);
  const f = (v) => Math.max(0, Math.min(255, Math.round(v + 255 * amt)));
  return "#" + [f(r), f(g), f(b)].map(v => v.toString(16).padStart(2, "0")).join("");
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
