// App — routing + state + Tweaks panel
const { useState: __useState, useEffect: __useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "heroVariant": "full",
  "density": "regular",
  "showFab": true,
  "showCatchBoard": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = __useState(window.__BYTESGLUE_SHOWCASE_ROUTE || "home");
  const lang = t.lang;
  const setLang = (v) => setTweak("lang", v);

  // Apply lang + dir on the document
  __useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.documentElement.setAttribute("data-density", t.density);
  }, [lang, t.density]);

  // Reset scroll on route change
  __useEffect(() => {
    const el = document.querySelector(".app-shell");
    if (el) el.scrollTop = 0;
  }, [route]);

  let Page = null;
  switch (route) {
    case "how": Page = <HowItWorks lang={lang} setRoute={setRoute} />; break;
    case "menu": Page = <Menu lang={lang} setRoute={setRoute} />; break;
    case "visit": Page = <Visit lang={lang} setRoute={setRoute} />; break;
    case "press": Page = <Press lang={lang} setRoute={setRoute} />; break;
    case "faq": Page = <FAQ lang={lang} setRoute={setRoute} />; break;
    default: Page = <Home lang={lang} setRoute={setRoute} heroVariant={t.heroVariant} />;
  }

  const forceSolid = route !== "home" || t.heroVariant !== "full";

  return (
    <div className="app-shell" data-screen-label={"page-" + route}>
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} forceSolid={forceSolid} />
      {Page}
      <Footer lang={lang} setRoute={setRoute} />
      {t.showFab && <CallFab lang={lang} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={lang}
          options={[{ value: "en", label: "EN" }, { value: "ar", label: "AR (RTL)" }]}
          onChange={(v) => setTweak("lang", v)}
        />

        <TweakSection label="Home hero" />
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={[
            { value: "full", label: "Full" },
            { value: "editorial", label: "Editorial" },
            { value: "stack", label: "Stacked" },
          ]}
          onChange={(v) => { setTweak("heroVariant", v); setRoute("home"); }}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular"]}
          onChange={(v) => setTweak("density", v)}
        />

        <TweakSection label="Surface" />
        <TweakToggle label="Show call FAB" value={t.showFab} onChange={(v) => setTweak("showFab", v)} />

        <TweakSection label="Jump to page" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
          {[
            ["home", "Home"], ["how", "How"], ["menu", "Menu"],
            ["visit", "Visit"], ["press", "Press"], ["faq", "FAQ"],
          ].map(([id, label]) => (
            <button
              key={id}
              onClick={() => setRoute(id)}
              style={{
                appearance: "none", border: 0, padding: "8px 10px",
                background: route === id ? "var(--ink, #161412)" : "rgba(0,0,0,0.06)",
                color: route === id ? "#fff" : "inherit",
                fontFamily: "ui-monospace, monospace", fontSize: 11,
                letterSpacing: "0.08em", textTransform: "uppercase",
                cursor: "pointer", borderRadius: 4,
              }}
            >
              {label}
            </button>
          ))}
        </div>
      </TweaksPanel>
    </div>
  );
}

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