// App host
const Comp = window.VariationF;

function StandaloneApp() {
  const [theme, setTheme] = React.useState("dark");
  const [lang, setLang] = React.useState("en");
  const [isTouch, setIsTouch] = React.useState(false);
  const accent = "oklch(0.7 0.2 25)";
  const tweaks = { density: "regular", theme, font: "grotesk" };

  React.useEffect(() => {
    document.body.className = `theme-${theme} font-grotesk`;
  }, [theme]);

  React.useEffect(() => {
    const mq = window.matchMedia("(hover: none), (pointer: coarse), (max-width: 768px)");
    const update = () => setIsTouch(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);

  const onTheme = () => setTheme(t => t === "dark" ? "light" : "dark");
  const onLang = (v) => setLang(v);

  return (
    <>
      <window.CustomCursor accent={accent} enabled={!isTouch} />
      <Comp tweaks={tweaks} accent={accent} lang={lang} onTheme={onTheme} onLang={onLang} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<StandaloneApp />);