/* Tweaks for ПластХимСервис landing — drives the static DOM via
   CSS custom properties + layout attributes (no markup rewrite). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#d9aa68", "#c79550", "#a87b3e", "#faf4ea"],
  "heroLayout": "Справа",
  "rhythm": "Спокойный"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#d9aa68", "#c79550", "#a87b3e", "#faf4ea"], // тёплая бронза (бренд)
  ["#3E7CB1", "#2C5C8F", "#214974", "#e9f0f6"], // индустриальная сталь
  ["#C46A3C", "#A8542C", "#834020", "#f6ece5"], // медь
  ["#7E8C99", "#5A6B79", "#3C4F5E", "#eef2f5"], // строгий графит
];

const HERO_MAP = { "Справа": "right", "Снизу": "bottom", "По центру": "center" };
const RHYTHM_MAP = { "Спокойный": "calm", "Контрастный": "bold" };

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const [a, a6, a7, a50] = t.accent;
    r.setProperty("--brand", a);
    r.setProperty("--brand-600", a6);
    r.setProperty("--brand-700", a7);
    r.setProperty("--brand-50", a50);
  }, [t.accent]);

  React.useEffect(() => {
    const hero = document.querySelector(".hero");
    if (hero) hero.setAttribute("data-hero", HERO_MAP[t.heroLayout] || "right");
  }, [t.heroLayout]);

  React.useEffect(() => {
    document.body.setAttribute("data-rhythm", RHYTHM_MAP[t.rhythm] || "calm");
  }, [t.rhythm]);

  return (
    <TweaksPanel>
      <TweakSection label="Бренд" />
      <TweakColor
        label="Акцент"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Главный слайдер" />
      <TweakRadio
        label="Подача"
        value={t.heroLayout}
        options={["Справа", "Снизу", "По центру"]}
        onChange={(v) => setTweak("heroLayout", v)}
      />
      <TweakSection label="Композиция" />
      <TweakRadio
        label="Ритм страницы"
        value={t.rhythm}
        options={["Спокойный", "Контрастный"]}
        onChange={(v) => setTweak("rhythm", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);