/* Мурка — Tweaks (overall-look + hero exploration) */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "headFont": "Baloo 2",
  "radius": "medium",
  "hero": "image",
  "density": "comfy"
}/*EDITMODE-END*/;

const THEMES = {
  warm:  { accent:"#EF8420", deep:"#D96D0C", soft:"#FCEAD3", label:"Тёплый" },
  beige: { accent:"#B5905A", deep:"#977440", soft:"#F1E6D4", label:"Беж" },
  steel: { accent:"#3D7CD6", deep:"#2C63B4", soft:"#DEEAF8", label:"Сталь" }
};
const RADII = { soft:"12px", medium:"22px", round:"34px" };

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

  useEffect(() => {
    const root = document.documentElement;
    const th = THEMES[t.theme] || THEMES.warm;
    root.style.setProperty('--accent', th.accent);
    root.style.setProperty('--accent-deep', th.deep);
    root.style.setProperty('--accent-soft', th.soft);
    root.style.setProperty('--r-scale', RADII[t.radius] || RADII.medium);
    root.style.setProperty('--font-head', `'${t.headFont}', system-ui, sans-serif`);
    document.body.dataset.hero = t.hero;
    document.body.dataset.density = t.density;
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Внешний вид" />
      <TweakRadio label="Акцент" value={t.theme}
        options={[{value:"warm",label:"Тёплый"},{value:"beige",label:"Беж"},{value:"steel",label:"Сталь"}]}
        onChange={v => setTweak('theme', v)} />
      <TweakRadio label="Шрифт заголовков" value={t.headFont}
        options={[{value:"Baloo 2",label:"Округлый"},{value:"Nunito",label:"Чистый"}]}
        onChange={v => setTweak('headFont', v)} />
      <TweakRadio label="Скругление" value={t.radius}
        options={[{value:"soft",label:"Мягкое"},{value:"medium",label:"Среднее"},{value:"round",label:"Круглое"}]}
        onChange={v => setTweak('radius', v)} />

      <TweakSection label="Макет" />
      <TweakRadio label="Главный экран" value={t.hero}
        options={[{value:"image",label:"С фото"},{value:"bold",label:"Крупный"}]}
        onChange={v => setTweak('hero', v)} />
      <TweakRadio label="Плотность каталога" value={t.density}
        options={[{value:"comfy",label:"Просторно"},{value:"compact",label:"Компактно"}]}
        onChange={v => setTweak('density', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tw-panel-host')).render(<App />);