/* AVALOON · essencial Sales Force — Tweaks app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingFont": "Kallisto",
  "accent": "Laranja",
  "cardLayout": "Grade",
  "motion": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Kallisto": '"Kallisto", "Montserrat", sans-serif',
  "Space Grotesk": '"Space Grotesk", "Montserrat", sans-serif',
  "Montserrat": '"Montserrat", sans-serif'
};

// each accent: [base, soft, line]
const ACCENT_MAP = {
  "Laranja": ["#fe8026", "rgba(254,128,38,.12)", "rgba(254,128,38,.28)"],
  "Âmbar":   ["#f5a623", "rgba(245,166,35,.12)", "rgba(245,166,35,.28)"],
  "Coral":   ["#ff6a3d", "rgba(255,106,61,.12)", "rgba(255,106,61,.28)"]
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--font-display", FONT_MAP[t.headingFont] || FONT_MAP.Kallisto);

  const a = ACCENT_MAP[t.accent] || ACCENT_MAP.Laranja;
  root.style.setProperty("--orange", a[0]);
  root.style.setProperty("--accent", a[0]);
  root.style.setProperty("--orange-soft", a[1]);
  root.style.setProperty("--accent-soft", a[1]);
  root.style.setProperty("--orange-line", a[2]);

  const grid = document.getElementById("solGrid");
  if (grid) grid.classList.toggle("layout-list", t.cardLayout === "Lista");

  root.classList.toggle("no-motion", !t.motion);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tipografia" />
      <TweakSelect label="Fonte dos títulos" value={t.headingFont}
        options={["Kallisto", "Space Grotesk", "Montserrat"]}
        onChange={(v) => setTweak("headingFont", v)} />

      <TweakSection label="Marca" />
      <TweakColor label="Cor de destaque" value={ACCENT_MAP[t.accent][0]}
        options={[ACCENT_MAP.Laranja[0], ACCENT_MAP["Âmbar"][0], ACCENT_MAP.Coral[0]]}
        onChange={(hex) => {
          const name = Object.keys(ACCENT_MAP).find(k => ACCENT_MAP[k][0] === hex) || "Laranja";
          setTweak("accent", name);
        }} />

      <TweakSection label="Layout" />
      <TweakRadio label="Cards de soluções" value={t.cardLayout}
        options={["Grade", "Lista"]}
        onChange={(v) => setTweak("cardLayout", v)} />

      <TweakSection label="Movimento" />
      <TweakToggle label="Animações flutuantes" value={t.motion}
        onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

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