/* ============== App + Tweaks wiring ============== */

const PALETTES = [
  { name: "Azul lunar", accent: "#5b8def", accent2: "#8aafff", accentDeep: "#2a4fb8", glow: "91, 141, 239" },
  { name: "Violeta", accent: "#8b5cf6", accent2: "#b794f6", accentDeep: "#5b21b6", glow: "139, 92, 246" },
  { name: "Cyan tech", accent: "#22d3ee", accent2: "#67e8f9", accentDeep: "#0e7490", glow: "34, 211, 238" },
  { name: "Âmbar", accent: "#f59e0b", accent2: "#fbbf24", accentDeep: "#b45309", glow: "245, 158, 11" },
];

const FONTS = {
  "Instrument Serif": '"Instrument Serif", serif',
  "Space Grotesk": '"Space Grotesk", sans-serif',
  "JetBrains Mono": '"JetBrains Mono", monospace',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paletteIdx": 0,
  "theme": "dark",
  "animations": "high",
  "displayFont": "Instrument Serif",
  "heroLayout": "split",
  "headline": "Software que orbita seus *problemas*."
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply palette + font + theme to :root
  React.useEffect(() => {
    const p = PALETTES[tweaks.paletteIdx] || PALETTES[0];
    const r = document.documentElement;
    r.style.setProperty("--accent", p.accent);
    r.style.setProperty("--accent-2", p.accent2);
    r.style.setProperty("--accent-deep", p.accentDeep);
    r.style.setProperty("--accent-glow", p.glow);
    r.style.setProperty("--font-display", FONTS[tweaks.displayFont] || FONTS["Instrument Serif"]);
    r.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.paletteIdx, tweaks.displayFont, tweaks.theme]);

  const paletteOptions = PALETTES.map((p) => [p.accent2, p.accent, p.accentDeep]);
  const currentPalette = paletteOptions[tweaks.paletteIdx];

  return (
    <>
      <Nav tweaks={tweaks} setTweak={setTweak} />
      <Hero tweaks={tweaks} />
      <About />
      <Dores />
      <Cases />
      <Anatomia />
      <Processo />
      <Tipos />
      <Stack />
      <FAQ />
      <Contato />
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Identidade" />
        <window.TweakColor
          label="Paleta"
          value={currentPalette}
          options={paletteOptions}
          onChange={(v) => {
            const idx = paletteOptions.findIndex((p) => JSON.stringify(p) === JSON.stringify(v));
            setTweak("paletteIdx", idx >= 0 ? idx : 0);
          }}
        />
        <window.TweakRadio
          label="Tema"
          value={tweaks.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <window.TweakSelect
          label="Fonte display"
          value={tweaks.displayFont}
          options={Object.keys(FONTS)}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <window.TweakSection label="Hero" />
        <window.TweakRadio
          label="Animações"
          value={tweaks.animations}
          options={["low", "medium", "high"]}
          onChange={(v) => setTweak("animations", v)}
        />
        <window.TweakSelect
          label="Layout"
          value={tweaks.heroLayout}
          options={["split", "centered", "full"]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <window.TweakText
          label="Headline (use *palavra*)"
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
        />
      </window.TweaksPanel>
    </>
  );
};

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