/* ============================================================
   B2B Slots — Tweaks mount. Drives CSS custom properties.
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#FFB020", "#FF6A1A", "#EF400A"],
  "bg": "cream",
  "glow": 100,
  "radius": 20,
  "displayFont": "Unbounded"
}/*EDITMODE-END*/;

const BG_MAP = {
  cream: ["#FBF6EE", "#F6EFE3"],
  white: ["#FFFFFF", "#F7F3ED"],
  sand:  ["#F7EEDF", "#F1E6D2"]
};

function setVar(k, v){ document.documentElement.style.setProperty(k, v); }

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

  useEffect(() => {
    const [c1,c2,c3] = t.accent;
    setVar('--c1', c1); setVar('--c2', c2); setVar('--c3', c3);
  }, [t.accent]);

  useEffect(() => {
    const [bg, tint] = BG_MAP[t.bg] || BG_MAP.cream;
    setVar('--bg', bg); setVar('--bg-tint', tint);
  }, [t.bg]);

  useEffect(() => { setVar('--glow', (t.glow/100).toFixed(2)); }, [t.glow]);

  useEffect(() => {
    setVar('--radius', t.radius + 'px');
    setVar('--radius-sm', Math.round(t.radius*0.66) + 'px');
    setVar('--radius-lg', Math.round(t.radius*1.5) + 'px');
  }, [t.radius]);

  useEffect(() => {
    setVar('--ff-display', t.displayFont === 'Manrope'
      ? "'Manrope',system-ui,sans-serif"
      : "'Unbounded',system-ui,sans-serif");
  }, [t.displayFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Акцент" />
      <TweakColor label="Градиент" value={t.accent}
        options={[
          ["#FFB020","#FF6A1A","#EF400A"],
          ["#FFCB45","#FF9E12","#F2680C"],
          ["#FF9D5C","#FF5E3A","#E22C55"],
          ["#FF7A2F","#F0410D","#C81E2E"]
        ]}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSlider label="Свечение" value={t.glow} min={0} max={140} step={5} unit="%"
        onChange={(v)=>setTweak('glow', v)} />

      <TweakSection label="Фон и форма" />
      <TweakRadio label="Фон" value={t.bg}
        options={[{value:'cream',label:'Крем'},{value:'white',label:'Белый'},{value:'sand',label:'Песок'}]}
        onChange={(v)=>setTweak('bg', v)} />
      <TweakSlider label="Скругление" value={t.radius} min={4} max={28} step={2} unit="px"
        onChange={(v)=>setTweak('radius', v)} />

      <TweakSection label="Типографика" />
      <TweakRadio label="Шрифт заголовков" value={t.displayFont}
        options={['Unbounded','Manrope']}
        onChange={(v)=>setTweak('displayFont', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);