/* ════════════════════════════════════════════
   DRANFI — painel de Tweaks (React island)
   Aplica os ajustes em CSS vars / data-attrs.
════════════════════════════════════════════ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0E5C6B",
  "font": "DM Serif Display",
  "anim": "full",
  "density": "regular"
}/*EDITMODE-END*/;

const FONT_MAP = {
  "DM Serif Display": "'DM Serif Display',Georgia,serif",
  "Bricolage Grotesque": "'Bricolage Grotesque','Hanken Grotesk',sans-serif",
  "Hanken Grotesk": "'Hanken Grotesk',-apple-system,sans-serif",
  "Space Grotesk": "'Space Grotesk','Hanken Grotesk',sans-serif"
};
const DENSITY_MAP = {
  compact: "clamp(5rem,8vw,9rem)",
  regular: "clamp(7rem,11vw,14rem)",
  comfy: "clamp(9rem,14vw,18rem)"
};

function hexToRgba(hex, a) {
  const m = hex.replace('#', '');
  const r = parseInt(m.substring(0, 2), 16);
  const g = parseInt(m.substring(2, 4), 16);
  const b = parseInt(m.substring(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

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

  useEffect(() => {
    const rs = document.documentElement.style;
    rs.setProperty('--accent', t.accent);
    rs.setProperty('--accent-soft', hexToRgba(t.accent, 0.10));
    rs.setProperty('--accent-line', hexToRgba(t.accent, 0.22));
    rs.setProperty('--accent-glow', hexToRgba(t.accent, 0.30));
    rs.setProperty('--f-display', FONT_MAP[t.font] || FONT_MAP["DM Serif Display"]);
    rs.setProperty('--section', DENSITY_MAP[t.density] || DENSITY_MAP.regular);
    document.documentElement.dataset.headfont = (t.font === 'DM Serif Display') ? 'serif' : 'sans';
    document.documentElement.dataset.anim = t.anim;
    window.dispatchEvent(new Event('dranfi:anim'));
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor label="Cor de acento" value={t.accent}
        options={["#0E5C6B", "#00A6C4", "#13A0A8"]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Fonte das headlines" value={t.font}
        options={["DM Serif Display", "Bricolage Grotesque", "Hanken Grotesk", "Space Grotesk"]}
        onChange={(v) => setTweak('font', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Densidade" value={t.density}
        options={["compact", "regular", "comfy"]}
        onChange={(v) => setTweak('density', v)} />

      <TweakSection label="Movimento" />
      <TweakRadio label="Animação" value={t.anim}
        options={["full", "moderate", "min"]}
        onChange={(v) => setTweak('anim', v)} />
    </TweaksPanel>
  );
}

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