const { useState, useEffect } = React;

function App() {
  const [page, setPage] = useState("home");
  const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);

  // Apply palette to body
  useEffect(() => {
    document.body.dataset.palette = tweaks.palette || "dourado-classico";
  }, [tweaks.palette]);

  // If blog is hidden via flag and someone lands on it (e.g. old URL),
  // bounce to home so the page doesn't look orphaned.
  useEffect(() => {
    if (page === "blog" && !tweaks.showBlog) setPage("home");
  }, [page, tweaks.showBlog]);

  return (
    <>
      <Header page={page} setPage={setPage} showBlog={tweaks.showBlog} />

      {page === "home" && <Home setPage={setPage} tweaks={tweaks} />}
      {page === "services" && <Services setPage={setPage} />}
      {page === "about" && <About setPage={setPage} />}
      {page === "blog" && tweaks.showBlog && <Blog setPage={setPage} />}
      {page === "contact" && <Contact setPage={setPage} />}

      <Footer setPage={setPage} showBlog={tweaks.showBlog} />

      {/* Floating WhatsApp */}
      <a className="wfloat" href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank" rel="noopener">
        <span className="pulse"><Icon name="whatsapp" size={22} color="#fff" /></span>
        <span>Fale conosco</span>
      </a>

      <TweaksPanel>
        <TweakSection label="Paleta de cores" />
        <TweakSelect
          label="Tema"
          value={tweaks.palette}
          options={[
            { value: "dourado-classico", label: "Marinho & Dourado" },
            { value: "esmeralda", label: "Esmeralda & Dourado" },
            { value: "bordeaux", label: "Bordeaux & Dourado" },
            { value: "grafite-cobre", label: "Grafite & Cobre" }
          ]}
          onChange={(v) => setTweak("palette", v)}
        />

        <TweakSection label="Layout do hero" />
        <TweakRadio
          label="Composição"
          value={tweaks.heroLayout}
          options={[
            { value: "split", label: "Split" },
            { value: "centered", label: "Centro" }
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />

        <TweakSection label="Plano destacado" />
        <TweakRadio
          label="Destaque"
          value={tweaks.featuredPlan}
          options={[
            { value: "essencial", label: "Essen." },
            { value: "profissional", label: "Profiss." },
            { value: "completo", label: "Compl." }
          ]}
          onChange={(v) => setTweak("featuredPlan", v)}
        />

        <TweakSection label="Seções opcionais" />
        <TweakToggle label="Página Blog (menu)" value={tweaks.showBlog}
          onChange={(v) => setTweak("showBlog", v)} />
        <TweakToggle label="Mockup do app" value={tweaks.showAppMockup}
          onChange={(v) => setTweak("showAppMockup", v)} />
        <TweakToggle label="Garantia 90 dias" value={tweaks.showGuarantee}
          onChange={(v) => setTweak("showGuarantee", v)} />
        <TweakToggle label="Urgência (vagas)" value={tweaks.showUrgency}
          onChange={(v) => setTweak("showUrgency", v)} />

        <TweakSection label="Navegação" />
        <TweakButton onClick={() => { setPage("home"); window.scrollTo({ top: 0 }); }}>↑ Voltar ao topo</TweakButton>
      </TweaksPanel>
    </>
  );
}

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