// Main app — router, theme
const { useState: uS, useEffect: uE } = React;

function App() {
  // Initial theme: stored → OS preference → light
  const initialTheme = (() => {
    try {
      const stored = localStorage.getItem("eidosoma.theme");
      if (stored === "light" || stored === "dark") return stored;
    } catch {}
    if (typeof window !== "undefined" && window.matchMedia) {
      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    }
    return "light";
  })();

  const [theme, setTheme] = uS(initialTheme);
  const [userOverride, setUserOverride] = uS(() => {
    try { return !!localStorage.getItem("eidosoma.theme"); } catch { return false; }
  });
  const [route, setRoute] = uS(() => (location.hash || "#home").replace("#", "") || "home");

  // Fixed design knobs (Tweaks removed)
  const accent = "moss";
  const heroTreatment = "field";
  const headline = 0;

  uE(() => {
    document.documentElement.dataset.theme = theme;
    document.documentElement.dataset.accent = accent;
  }, [theme]);

  // Follow OS preference until the user explicitly overrides it
  uE(() => {
    if (userOverride) return;
    if (!window.matchMedia) return;
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    const onChange = (e) => setTheme(e.matches ? "dark" : "light");
    if (mq.addEventListener) mq.addEventListener("change", onChange);
    else mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", onChange);
      else mq.removeListener(onChange);
    };
  }, [userOverride]);

  const go = (id) => {
    setRoute(id);
    location.hash = id;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  uE(() => {
    const onHash = () => setRoute((location.hash || "#home").replace("#", "") || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const dark = theme === "dark";

  const toggleTheme = () => {
    const next = dark ? "light" : "dark";
    setTheme(next);
    setUserOverride(true);
    try { localStorage.setItem("eidosoma.theme", next); } catch {}
  };

  let page = null;
  if (route === "consulting") page = <ConsultingPage go={go} />;
  else if (route === "lab") page = <LabPage go={go} />;
  else if (route === "scientist") page = <ScientistPage go={go} />;
  else if (route === "team") page = <TeamPage go={go} />;
  else if (route === "contact") page = <ContactPage go={go} />;
  else page = <HomePage treatment={heroTreatment} dark={dark} accent={accent} headline={headline} go={go} />;

  return (
    <>
      <Nav route={route} go={go} dark={dark} onToggleTheme={toggleTheme} />
      {page}
      <Footer go={go} />
    </>
  );
}

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