// ui_kits/portfolio/app.jsx
// Root App — single Editorial home, mobile-aware, persistent tweaks.

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "lang": "en",
  "grain": true,
  "customCursor": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateA({ name: "home", params: {} });
  const go = (name, params = {}) => setRoute({ name, params });

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang;

  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.theme]);

  let screen = null;
  if (route.name === "home") screen = <Home lang={lang} go={go} />;
  else if (route.name === "archive") screen = <Archive lang={lang} go={go} />;
  else if (route.name === "post") screen = <Post lang={lang} go={go} slug={route.params.slug} />;
  else if (route.name === "about") screen = <About lang={lang} go={go} />;
  else screen = <NotFound lang={lang} go={go} />;

  return (
    <React.Fragment>
      {tweaks.grain && <Grain />}
      {tweaks.customCursor && <Cursor />}

      <Nav lang={lang} setLang={(l) => setTweak("lang", l)} route={route.name} go={go} />

      <PageTransition pageKey={route.name + "/" + (route.params.slug || "")}>
        <main key={route.name + (route.params.slug || "")}>
          {screen}
        </main>
      </PageTransition>

      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Appearance">
          <TweakRadio label="Theme" value={tweaks.theme} onChange={(v) => setTweak("theme", v)} options={[
            { value: "dark", label: "Dark" },
            { value: "beige", label: "Beige" },
          ]} />
          <TweakRadio label="Language" value={tweaks.lang} onChange={(v) => setTweak("lang", v)} options={[
            { value: "en", label: "EN" },
            { value: "es", label: "ES" },
          ]} />
        </TweakSection>
        <TweakSection title="Effects">
          <TweakToggle label="Grain overlay" value={tweaks.grain} onChange={(v) => setTweak("grain", v)} />
          <TweakToggle label="Custom cursor" value={tweaks.customCursor} onChange={(v) => setTweak("customCursor", v)} />
        </TweakSection>
        <TweakSection title="Jump to">
          <TweakButton onClick={() => go("home")}>→ Home</TweakButton>
          <TweakButton onClick={() => go("archive")}>→ Archive</TweakButton>
          <TweakButton onClick={() => go("post", { slug: "career-pivot" })}>→ Post</TweakButton>
          <TweakButton onClick={() => go("about")}>→ About</TweakButton>
          <TweakButton onClick={() => go("404")}>→ 404</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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