/* ============================================================
   FLORESCER — Tweaks panel (React island)
   Aplica paleta / cor de destaque / fonte / intensidade floral
   às CSS vars do documento (página é HTML puro).
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Terroso",
  "accent": "#F6D387",
  "displayFont": "Clássica",
  "floral": "Equilibrado"
}/*EDITMODE-END*/;

const PALETTE_ATTR = { "Terroso": "", "Candy Rosé": "rose", "Champagne": "champagne" };
const FLORAL_ATTR  = { "Sutil": "sutil", "Equilibrado": "", "Destaque": "destaque" };
const FONT_STACK   = {
  "Clássica":  "'Cormorant Garamond', Georgia, serif",
  "Editorial": "'Playfair Display', Georgia, serif"
};

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

  useEffect(() => {
    const root = document.documentElement;
    // palette
    const p = PALETTE_ATTR[t.palette] || "";
    if (p) root.setAttribute('data-palette', p); else root.removeAttribute('data-palette');
    // floral intensity
    const f = FLORAL_ATTR[t.floral] || "";
    if (f) root.setAttribute('data-floral', f); else root.removeAttribute('data-floral');
    // display font
    root.style.setProperty('--font-display', FONT_STACK[t.displayFont] || FONT_STACK["Clássica"]);
    // accent (butter) — drives badges, blossom centers, bonus tags
    root.style.setProperty('--c-butter', t.accent);
  }, [t.palette, t.floral, t.displayFont, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidade visual" />
      <TweakRadio label="Paleta" value={t.palette}
        options={["Terroso", "Candy Rosé", "Champagne"]}
        onChange={(v) => setTweak('palette', v)} />
      <TweakColor label="Cor de destaque" value={t.accent}
        options={["#F6D387", "#E0B6A6", "#E8CB84", "#C9A9C9"]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Tipografia" />
      <TweakRadio label="Fonte display" value={t.displayFont}
        options={["Clássica", "Editorial"]}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSection label="Florais" />
      <TweakRadio label="Intensidade" value={t.floral}
        options={["Sutil", "Equilibrado", "Destaque"]}
        onChange={(v) => setTweak('floral', v)} />
    </TweaksPanel>
  );
}

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