function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "cosmic",
    "particles": true,
    "defaultLang": "zh"
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(() => localStorage.getItem("apex_lang") || t.defaultLang || "zh");
  const [route, setRoute] = React.useState(() => localStorage.getItem("apex_route") || "home");

  React.useEffect(() => { if (!localStorage.getItem("apex_lang")) setLang(t.defaultLang); }, [t.defaultLang]);
  React.useEffect(() => { localStorage.setItem("apex_route", route); }, [route]);

  const go = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "smooth" }); };
  const toggleLang = () => {
    const next = lang === "zh" ? "en" : "zh";
    setLang(next);
    localStorage.setItem("apex_lang", next);
  };

  const c = window.CONTENT[lang];
  const theme = window.THEMES[t.theme] || window.THEMES.cosmic;
  const rootVars = { ...theme.vars };

  const PAGES = { home: HomePage, about: AboutPage, meetings: MeetingsPage, join: JoinPage, assistant: AssistantPage };
  const Page = PAGES[route] || HomePage;
  React.useEffect(() => { if (!PAGES[route]) setRoute("home"); }, []);

  return (
    <div style={{ ...rootVars, position: "relative", minHeight: "100vh", background: "var(--bg-grad)", color: "var(--ink)", fontFamily: "var(--font-rounded)", transition: "background var(--dur-slow) ease, color var(--dur-slow) ease" }}>
      <div aria-hidden="true" style={{ position: "fixed", inset: 0, background: "var(--glow-a), var(--glow-b)", pointerEvents: "none", zIndex: 0 }} />
      {t.particles && <ParticleField />}
      <div style={{ position: "relative", zIndex: 1 }}>
        <Header c={c} route={route} go={go} toggleLang={toggleLang} />
        <main key={route + lang} className="apex-fade">
          <Page c={c} go={go} />
        </main>
        <Footer c={c} go={go} />
      </div>

      <TweaksPanel>
        <TweakSection label={lang === "zh" ? "视觉世界" : "Visual world"} />
        <TweakSelect
          label={lang === "zh" ? "主题" : "Theme"}
          value={t.theme}
          options={Object.keys(window.THEMES).map((k) => ({ value: k, label: window.THEMES[k].label }))}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakToggle
          label={lang === "zh" ? "漂浮粒子" : "Ambient particles"}
          value={t.particles}
          onChange={(v) => setTweak("particles", v)}
        />
        <TweakSection label={lang === "zh" ? "语言" : "Language"} />
        <TweakRadio
          label={lang === "zh" ? "默认语言" : "Default language"}
          value={t.defaultLang}
          options={[{ value: "zh", label: "中文" }, { value: "en", label: "EN" }]}
          onChange={(v) => { setTweak("defaultLang", v); localStorage.removeItem("apex_lang"); setLang(v); }}
        />
      </TweaksPanel>
    </div>
  );
}

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