/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState: useAppState } = React;

const FONT_MAP = {
  Cormorant: '"Cormorant Garamond", Georgia, serif',
  Marcellus: '"Marcellus", Georgia, serif',
  Playfair: '"Playfair Display", Georgia, serif',
};
const HUE_MAP = { Bronze: 72, Ouro: 90, Champagne: 106 };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "animacao",
  "goldTone": "Ouro",
  "headingFont": "Cormorant"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menu, setMenu] = useAppState(false);

  const { Header, MobileMenu, Hero, About, Diferenciais, Areas, Testimonials } = window.Sections1;
  const { Noticias, NoticiasJuridicas, Contact, Footer, WhatsAppFloat, CookieBanner } = window.Sections2;

  const rootStyle = {
    "--font-display": FONT_MAP[t.headingFont] || FONT_MAP.Cormorant,
    "--gold-h": HUE_MAP[t.goldTone] ?? 85,
  };

  return (
    <div className="app-root" style={rootStyle}>
      <Header onMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} />
      <main>
        <Hero variant={t.heroStyle} />
        <About />
        <Diferenciais />
        <Areas />
        <Testimonials />
        <NoticiasJuridicas />
        <Noticias />
        <Contact />
      </main>
      <Footer />
      <WhatsAppFloat />
      <CookieBanner />

      <TweaksPanel>
        <TweakSection label="Hero principal" />
        <TweakRadio label="Estilo do hero" value={t.heroStyle}
          options={[
            { value: "animacao", label: "Animação" },
            { value: "video", label: "Vídeo" },
            { value: "foto", label: "Foto" },
          ]}
          onChange={(v) => setTweak("heroStyle", v)} />

        <TweakSection label="Identidade" />
        <TweakRadio label="Tom dourado" value={t.goldTone}
          options={["Bronze", "Ouro", "Champagne"]}
          onChange={(v) => setTweak("goldTone", v)} />
        <TweakRadio label="Fonte dos títulos" value={t.headingFont}
          options={["Cormorant", "Marcellus", "Playfair"]}
          onChange={(v) => setTweak("headingFont", v)} />
      </TweaksPanel>
    </div>
  );
}

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