// Clube da Luz — app entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "aqua",
  "showMarquee": true,
  "grain": true,
  "showChat": true
}/*EDITMODE-END*/;

const PALETTES = {
  aqua:   { "--aqua": "#7AD7E8", "--aqua-2": "#4AB8D8", "--deep": "#2890B0" },
  amber:  { "--aqua": "#F2C879", "--aqua-2": "#D9A84A", "--deep": "#A8741F" },
  rose:   { "--aqua": "#F4A8A8", "--aqua-2": "#D77878", "--deep": "#9B4848" },
  violet: { "--aqua": "#C8A5F0", "--aqua-2": "#9D72D4", "--deep": "#6A47A8" },
};

const PALETTE_OPTIONS = [
  ["#7AD7E8", "#E8C079", "#0e1424"],
  ["#F2C879", "#D9A84A", "#0e1424"],
  ["#F4A8A8", "#D77878", "#0e1424"],
  ["#C8A5F0", "#9D72D4", "#0e1424"],
];
const PALETTE_KEYS = ["aqua", "amber", "rose", "violet"];

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

  React.useEffect(() => {
    const palette = PALETTES[t.palette] || PALETTES.aqua;
    Object.entries(palette).forEach(([k, v]) => {
      document.documentElement.style.setProperty(k, v);
    });
  }, [t.palette]);

  React.useEffect(() => {
    document.body.classList.toggle("grain", !!t.grain);
  }, [t.grain]);

  const paletteValue = PALETTE_OPTIONS[PALETTE_KEYS.indexOf(t.palette)] || PALETTE_OPTIONS[0];

  return (
    <>
      <window.Nav />
      <window.Hero />
      {t.showMarquee && <window.Marquee />}
      <window.Manifesto />
      <window.Trilhas />
      <window.Mentor />
      <window.Regua />
      <window.Vozes />
      <window.Aplicacao />
      <window.Footer />

      {t.showChat && <window.ChatbotFAB />}

      <window.TweaksPanel>
        <window.TweakSection label="Atmosfera" />
        <window.TweakColor
          label="Paleta de luz"
          value={paletteValue}
          options={PALETTE_OPTIONS}
          onChange={(v) => {
            const idx = PALETTE_OPTIONS.findIndex(o => o[0] === v[0]);
            setTweak("palette", PALETTE_KEYS[idx] || "aqua");
          }}
        />
        <window.TweakToggle label="Grão de filme" value={t.grain}
          onChange={(v) => setTweak("grain", v)} />
        <window.TweakToggle label="Faixa rolante" value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)} />
        <window.TweakSection label="Anfitriã" />
        <window.TweakToggle label="Coraline (chatbot)" value={t.showChat}
          onChange={(v) => setTweak("showChat", v)} />
      </window.TweaksPanel>
    </>
  );
}

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