// Root app
const { useState: useRState, useEffect: useREffect, useMemo } = React;

function App() {
  const D = window.TIU_DATA;
  const BRAND = window.TIU_BRAND_COLORS;

  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "blossom",
    "displayFont": "Libre Baskerville",
    "bodyFont": "DM Sans",
    "hero": "collage",
    "cursor": true
  }/*EDITMODE-END*/;

  const [state, setState] = useRState(DEFAULTS);
  const [openBrand, setOpenBrand] = useRState(null);

  const palette = D.palettes[state.palette] || D.palettes.blossom;

  // Apply palette + fonts as CSS vars
  useREffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--tiu-cream", palette.cream);
    root.style.setProperty("--tiu-ink", palette.ink);
    root.style.setProperty("--tiu-ink-soft", palette.inkSoft);
    root.style.setProperty("--tiu-blush", palette.blush);
    root.style.setProperty("--tiu-sky", palette.sky);
    root.style.setProperty("--tiu-sage", palette.sage);
    root.style.setProperty("--tiu-butter", palette.butter);
    root.style.setProperty("--tiu-font-display", `'${state.displayFont}', Georgia, serif`);
    root.style.setProperty("--tiu-font-body", `'${state.bodyFont}', system-ui, sans-serif`);
    document.body.style.cursor = state.cursor ? "none" : "auto";
  }, [palette, state]);

  return (
    <>
      {state.cursor && <BlobCursor palette={palette} />}
      <Nav brand={BRAND} palette={palette} />
      <main>
        <Hero palette={palette} variant={state.hero} brand={BRAND} />
        <About palette={palette} brand={BRAND} data={D} />
        <Why palette={palette} brand={BRAND} />
        <Categories palette={palette} brand={BRAND} data={D} />
        <Brands palette={palette} brand={BRAND} data={D} onOpen={setOpenBrand} />
        <Contact palette={palette} brand={BRAND} data={D} />
      </main>
      <Footer palette={palette} brand={BRAND} data={D} />
      <BrandModal brand={openBrand} palette={palette} brandC={BRAND} data={D} onClose={() => setOpenBrand(null)} />
      <TweaksPanel state={state} setState={setState} palettes={D.palettes} />
    </>
  );
}

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