/* Au Pair Mastery Brasil — Tweaks panel */
/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakColor, TweakSlider, TweakText */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "aurora",
  "ctaColor": "#BA7517",
  "displayFont": "Newsreader",
  "roundness": 18,
  "heroHighlight": "alto valor."
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Newsreader": '"Newsreader", Georgia, serif',
  "Spectral": '"Spectral", Georgia, serif',
  "Lora": '"Lora", Georgia, serif',
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif'
};

function ensureFont(name) {
  if (name === "Newsreader" || name === "Hanken Grotesk") return;
  var id = "gf-" + name.replace(/\s+/g, "-");
  if (document.getElementById(id)) return;
  var l = document.createElement("link");
  l.id = id;
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" + name.replace(/\s+/g, "+") +
    ":ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap";
  document.head.appendChild(l);
}

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

  // direction theme
  React.useEffect(() => {
    document.body.className = "theme-" + t.direction;
  }, [t.direction]);

  // cta color
  React.useEffect(() => {
    document.body.style.setProperty("--cta-bg", t.ctaColor);
    // pick readable text color
    document.body.style.setProperty("--cta-text",
      (t.ctaColor === "#E8C068" || t.ctaColor === "#F2CB5C" || t.ctaColor === "#DAB87F") ? "#2A1A0A" : "#ffffff");
  }, [t.ctaColor]);

  // display font
  React.useEffect(() => {
    ensureFont(t.displayFont);
    document.body.style.setProperty("--display", FONT_STACKS[t.displayFont] || FONT_STACKS.Newsreader);
  }, [t.displayFont]);

  // roundness
  React.useEffect(() => {
    document.body.style.setProperty("--radius", t.roundness + "px");
    document.body.style.setProperty("--radius-lg", (t.roundness + 10) + "px");
  }, [t.roundness]);

  // hero highlight copy
  React.useEffect(() => {
    const el = document.querySelector(".hero h1 .accent");
    if (el) el.textContent = t.heroHighlight;
  }, [t.heroHighlight]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direção visual" />
      <TweakSelect
        label="Estilo"
        value={t.direction}
        options={[
          { value: "aurora", label: "Aurora — editorial, calmo" },
          { value: "jornada", label: "Jornada — quente, cinematográfico" },
          { value: "sereno", label: "Sereno — claro, verde, leve" }
        ]}
        onChange={(v) => setTweak("direction", v)}
      />
      <TweakSection label="Marca" />
      <TweakColor
        label="Cor do botão"
        value={t.ctaColor}
        options={["#BA7517", "#14566A", "#1D9E75", "#E8C068"]}
        onChange={(v) => setTweak("ctaColor", v)}
      />
      <TweakSelect
        label="Fonte dos títulos"
        value={t.displayFont}
        options={["Newsreader", "Spectral", "Lora", "Hanken Grotesk"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSlider
        label="Arredondamento"
        value={t.roundness}
        min={4} max={32} step={2} unit="px"
        onChange={(v) => setTweak("roundness", v)}
      />
      <TweakSection label="Conteúdo" />
      <TweakText
        label="Destaque do título"
        value={t.heroHighlight}
        onChange={(v) => setTweak("heroHighlight", v)}
      />
    </TweaksPanel>
  );
}

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