// app.jsx — root composition (less is more)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "paper",
  "accent": "#FF4A1C",
  "displayFont": "Instrument Serif"
}/*EDITMODE-END*/;

const FONTS = {
  "Instrument Serif": '"Instrument Serif", "Times New Roman", serif',
  "Cormorant Garamond": '"Cormorant Garamond", "Times New Roman", serif',
  "Fraunces": '"Fraunces", "Times New Roman", serif',
};

function ensureFont(name) {
  const id = "f-" + name.replace(/\s/g, "-");
  if (document.getElementById(id)) return;
  const link = document.createElement("link");
  link.id = id; link.rel = "stylesheet";
  if (name === "Cormorant Garamond")
    link.href = "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap";
  if (name === "Fraunces")
    link.href = "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap";
  document.head.appendChild(link);
}

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

  React.useEffect(() => {
    document.body.dataset.theme = t.theme;
    document.documentElement.style.setProperty("--accent", t.accent);
    if (t.displayFont !== "Instrument Serif") ensureFont(t.displayFont);
    document.documentElement.style.setProperty("--serif", FONTS[t.displayFont] || FONTS["Instrument Serif"]);
  }, [t.theme, t.accent, t.displayFont]);

  window.useReveal();

  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <Pricing />
      <Process />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={["paper", "ink", "block"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Accent" value={t.accent}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Display font" value={t.displayFont}
          options={["Instrument Serif", "Cormorant Garamond", "Fraunces"]}
          onChange={(v) => setTweak("displayFont", v)} />
      </TweaksPanel>
    </>
  );
}

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