/* app.jsx — root, routing, tweaks panel */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "terracotta"
}/*EDITMODE-END*/;

const App = () => {
  const [page, setPage] = useState("home");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to root
  useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette || "terracotta");
  }, [tweaks.palette]);

  const navigate = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Light-overlay header only on home (which has dark hero); other pages get light/dark header on scrolled bg
  const lightOnHero = page === "home";

  return (
    <>
      <SiteHeader page={page} navigate={navigate} lightOnHero={lightOnHero} />
      <main key={page} className="page-fade-enter page-fade-enter-active" data-screen-label={page}>
        {page === "home" && <HomePage navigate={navigate} />}
        {page === "services" && <ServicesPage navigate={navigate} />}
        {page === "portfolio" && <PortfolioPage navigate={navigate} />}
        {page === "about" && <AboutPage navigate={navigate} />}
        {page === "contact" && <ContactPage navigate={navigate} />}
      </main>
      <SiteFooter navigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette emphasis" subtitle="Sunset accents shift; neutrals stay">
          <TweakRadio
            value={tweaks.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              { value: "blush", label: "Blush" },
              { value: "terracotta", label: "Terracotta" },
              { value: "plum", label: "Plum" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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