/* LW Design Group — app shell, router, tweaks */

const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "displayFont": "cormorant",
  "density": "editorial",
  "language": "en",
  "showRefBadge": true
}/*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const { palette, displayFont, density, language, showRefBadge } = t;

  /* lightweight route state — hash-driven so refresh keeps page */
  const [route, setRoute] = uS(() => parseHash());
  uE(() => {
    const on = () => setRoute(parseHash());
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  uE(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [route.name, route.params.slug]);

  function go(name, params) {
    const h = "#/" + name + (params ? "?" + new URLSearchParams(params).toString() : "");
    window.location.hash = h;
  }

  /* lang/density/palette → root data-attrs */
  uE(() => {
    const root = document.documentElement;
    root.setAttribute("data-palette", palette);
    root.setAttribute("data-display", displayFont);
    root.setAttribute("data-density", density);
    root.setAttribute("dir", language === "ar" ? "rtl" : "ltr");
    root.setAttribute("lang", language);
    root.setAttribute("data-ref-on", String(showRefBadge));
  }, [palette, displayFont, density, language, showRefBadge]);

  const setLang = (L) => setT("language", L);

  const page = (() => {
    switch (route.name) {
      case "projects": return <ProjectsPage go={go} lang={language} initialFilter={route.params} />;
      case "project":  return <ProjectPage  go={go} lang={language} slug={route.params.slug || PROJECTS[0].slug} />;
      case "sectors":  return <SectorsPage  go={go} lang={language} />;
      case "studio":   return <StudioPage   go={go} lang={language} />;
      case "offices":  return <OfficesPage  go={go} lang={language} />;
      case "awards":   return <AwardsPage   go={go} lang={language} />;
      case "contact":  return <ContactPage  go={go} lang={language} />;
      default:         return <HomePage     go={go} lang={language} />;
    }
  })();

  return (
    <div className="lw-app">
      <Navbar route={route} go={go} lang={language} setLang={setLang} density={density} />
      {page}
      <Footer go={go} lang={language} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio label="Theme" value={t.palette}
                    options={[{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]}
                    onChange={v => setT("palette", v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Display" value={t.displayFont}
                     options={[
                       { value: "cormorant",  label: "Cormorant — refined serif" },
                       { value: "fraunces",   label: "Fraunces — warm modern serif" },
                       { value: "italiana",   label: "Italiana — high-contrast didone" },
                       { value: "manrope",    label: "Manrope — all-grotesque" },
                     ]}
                     onChange={v => setT("displayFont", v)} />

        <TweakSection label="Density" />
        <TweakRadio label="Rhythm" value={t.density}
                    options={[{ value: "editorial", label: "Editorial" }, { value: "compact", label: "Compact" }]}
                    onChange={v => setT("density", v)} />

        <TweakSection label="Language" />
        <TweakRadio label="UI" value={t.language}
                    options={[{ value: "en", label: "EN" }, { value: "ar", label: "العربية" }]}
                    onChange={v => setT("language", v)} />

        <TweakSection label="Photography" />
        <TweakToggle label="Show REF tags" value={t.showRefBadge}
                     onChange={v => setT("showRefBadge", v)} />
      </TweaksPanel>
    </div>
  );
}

function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, "");
  if (!h) return { name: "home", params: {} };
  const [name, q] = h.split("?");
  const params = {};
  if (q) for (const [k, v] of new URLSearchParams(q)) params[k] = v;
  return { name, params };
}

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