/* ============================================================
   ASTREALOGANDO — App root with Tweaks panel
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "mistico",
  "displayFont": "Cormorant Garamond",
  "showStars": true
}/*EDITMODE-END*/;

const FONT_CHOICES = {
  "Cormorant Garamond": '"Cormorant Garamond", Georgia, serif',
  "Cormorant SC": '"Cormorant SC", "Cormorant Garamond", serif',
};

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

  React.useEffect(() => {
    document.body.dataset.mode = t.mode || "mistico";
  }, [t.mode]);

  React.useEffect(() => {
    const f = FONT_CHOICES[t.displayFont] || FONT_CHOICES["Cormorant Garamond"];
    document.documentElement.style.setProperty("--serif-display", f);
  }, [t.displayFont]);

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

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Manifesto />
      <Services />
      <Pricing />
      <Course />
      <About />
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Direção Visual" />
        <TweakRadio
          label="Modo"
          value={t.mode}
          options={[
            { value: "mistico", label: "Místico" },
            { value: "editorial", label: "Editorial" },
            { value: "minimal", label: "Minimal" },
          ]}
          onChange={(v) => setTweak("mode", v)}
        />
        <div style={{ fontSize: 10.5, color: "rgba(41,38,27,0.6)", lineHeight: 1.5, marginTop: -2 }}>
          {t.mode === "mistico" && "Roxo profundo + ouro. Estrelas e flourishes celestiais."}
          {t.mode === "editorial" && "Fundo creme/pergaminho. Roxo e ouro como cores tipográficas."}
          {t.mode === "minimal" && "Papel claro. Roxo e ouro reservados para acentos sutis."}
        </div>

        <TweakSection label="Tipografia" />
        <TweakSelect
          label="Fonte display"
          value={t.displayFont}
          options={[
            { value: "Cormorant Garamond", label: "Cormorant Garamond" },
            { value: "Cormorant SC", label: "Cormorant SC (versalete)" },
          ]}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <TweakSection label="Detalhes" />
        <TweakToggle
          label="Estrelas no fundo"
          value={t.showStars}
          onChange={(v) => setTweak("showStars", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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