/* Tweaks island — applies theme tokens to the vanilla site via CSS variables */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e55800",
  "headingFont": "Newsreader",
  "tone": "warm",
  "motion": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Newsreader": '"Newsreader", Georgia, serif',
  "Source Serif 4": '"Source Serif 4", Georgia, serif',
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif'
};
const TONE_MAP = {
  "warm":  { paper:"#f6f1e7", paper2:"#efe7d8", line:"#dcd2bf" },
  "cool":  { paper:"#f1f2f4", paper2:"#e7e9ee", line:"#d6dae1" },
  "light": { paper:"#fbfaf6", paper2:"#f3f1ea", line:"#e7e2d6" }
};

function applyTweaks(t){
  const root = document.documentElement;
  root.style.setProperty('--accent', t.accent);
  root.style.setProperty('--font-display', FONT_MAP[t.headingFont] || FONT_MAP.Newsreader);
  const tone = TONE_MAP[t.tone] || TONE_MAP.warm;
  root.style.setProperty('--paper', tone.paper);
  root.style.setProperty('--paper-2', tone.paper2);
  root.style.setProperty('--line', tone.line);
  root.classList.toggle('reduce-motion', !t.motion);
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(function(){ applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cor de acento" />
      <TweakColor label="Acento" value={t.accent}
        options={["#e55800","#c2410c","#b88a2a","#3f7d6e"]}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSection label="Tipografia" />
      <TweakSelect label="Fonte dos títulos" value={t.headingFont}
        options={["Newsreader","Source Serif 4","Hanken Grotesk"]}
        onChange={(v)=>setTweak('headingFont', v)} />
      <TweakSection label="Fundo & movimento" />
      <TweakRadio label="Tom do fundo" value={t.tone}
        options={["warm","cool","light"]}
        onChange={(v)=>setTweak('tone', v)} />
      <TweakToggle label="Animações" value={t.motion}
        onChange={(v)=>setTweak('motion', v)} />
    </TweaksPanel>
  );
}

// Apply persisted/default tweaks immediately (before panel mount) to avoid flash
try{
  const saved = JSON.parse(localStorage.getItem('tweaks') || 'null');
  applyTweaks(Object.assign({}, TWEAK_DEFAULTS, saved || {}));
}catch(e){ applyTweaks(TWEAK_DEFAULTS); }

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