/* RAC — Tweaks island. Applies values to :root; page is vanilla CSS-var driven. */
const RAC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "claro",
  "accent": "#2e9d42",
  "motion": 1,
  "fontSize": 16,
  "whatsapp": "94 9 8195-0028"
}/*EDITMODE-END*/;

function applyTweaks(t){
  const r = document.documentElement;
  r.setAttribute('data-theme', t.theme);
  r.style.setProperty('--accent', t.accent);
  r.style.setProperty('--motion', String(t.motion));
  r.style.setProperty('--fs-base', t.fontSize + 'px');
  if(window.RAC && window.RAC.setWhatsApp) window.RAC.setWhatsApp(t.whatsapp);
}

function RacTweaks(){
  const [t, setTweak] = useTweaks(RAC_TWEAK_DEFAULTS);
  React.useEffect(()=>{ applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks — RAC">
      <TweakSection label="Direção visual" />
      <TweakRadio label="Tema" value={t.theme}
        options={[{value:'claro',label:'Claro'},{value:'cinema',label:'Cinema'}]}
        onChange={(v)=>setTweak('theme', v)} />
      <TweakColor label="Cor de destaque" value={t.accent}
        options={['#2e9d42','#f0911f','#2a9d8f','#134a82']}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSection label="Movimento & tipografia" />
      <TweakSlider label="Intensidade de animação" value={t.motion} min={0} max={1.4} step={0.1}
        onChange={(v)=>setTweak('motion', v)} />
      <TweakSlider label="Tamanho da fonte" value={t.fontSize} min={14} max={19} step={1} unit="px"
        onChange={(v)=>setTweak('fontSize', v)} />
      <TweakSection label="Contato" />
      <TweakText label="WhatsApp" value={t.whatsapp}
        onChange={(v)=>setTweak('whatsapp', v)} />
    </TweaksPanel>
  );
}

(function mount(){
  // Apply defaults immediately even before panel is opened.
  applyTweaks(RAC_TWEAK_DEFAULTS);
  const el = document.getElementById('tweaks-root');
  if(el && window.ReactDOM && ReactDOM.createRoot){
    ReactDOM.createRoot(el).render(<RacTweaks/>);
  }
})();