/* HQWS App — router + state */

const APP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accent": "magenta-amber",
  "navStyle": "dark"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(APP_TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home");          // "home" | "work" | "capabilities" | "about" | "clients" | "contact" | "case:<id>"
  const [routeParams, setRouteParams] = useState({});
  const [briefOpen, setBriefOpen] = useState(false);
  const [briefCategory, setBriefCategory] = useState(null);

  const lang = tweaks.lang || "en";
  const setLang = (v) => setTweak("lang", v);

  // sync direction on lang change
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  // sync accent palette
  useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accent === "cyan-amber") {
      r.style.setProperty("--brand-gradient",
        "linear-gradient(90deg, #00A4D7 0%, #62B439 40%, #FED200 100%)");
    } else if (tweaks.accent === "monotone-amber") {
      r.style.setProperty("--brand-gradient",
        "linear-gradient(90deg, #FED200 0%, #ED7408 100%)");
    } else {
      r.style.setProperty("--brand-gradient",
        "linear-gradient(90deg, #E50284 0%, #E94140 28%, #ED7408 55%, #FED200 100%)");
    }
  }, [tweaks.accent]);

  function navigate(r, params = {}) {
    setRoute(r);
    setRouteParams(params);
    window.scrollTo({ top: 0, behavior: "instant" });
  }
  function openBrief(category = null) {
    setBriefCategory(category);
    setBriefOpen(true);
  }

  // page resolution
  let page;
  if (route === "home") page = <PageHome lang={lang} navigate={navigate} onBrief={() => openBrief()} />;
  else if (route === "work") page = <PageWork lang={lang} navigate={navigate} initialCat={routeParams.cat || "all"} />;
  else if (route.startsWith("case:")) page = <PageCase lang={lang} navigate={navigate} id={route.split(":")[1]} onBrief={(cat) => openBrief(cat)} />;
  else if (route === "capabilities") page = <PageCapabilities lang={lang} navigate={navigate} onBrief={() => openBrief()} />;
  else if (route === "about") page = <PageAbout lang={lang} navigate={navigate} onBrief={() => openBrief()} />;
  else if (route === "clients") page = <PageClients lang={lang} navigate={navigate} />;
  else if (route === "contact") page = <PageContact lang={lang} navigate={navigate} onBrief={(cat) => openBrief(cat)} />;

  // home & case-study have dark hero, so nav stays dark
  const navLight = false;

  return (
    <div>
      <RightsBanner lang={lang} />
      <Navbar route={route} navigate={navigate} lang={lang} setLang={setLang} onBrief={() => openBrief()} light={navLight} />
      <main>{page}</main>
      <Footer navigate={navigate} lang={lang} onBrief={() => openBrief()} />

      <StickyCTA onClick={() => openBrief()} lang={lang} />
      <BriefModal open={briefOpen} onClose={() => setBriefOpen(false)} lang={lang} initialCategory={briefCategory} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Locale"
            value={lang}
            onChange={(v) => setLang(v)}
            options={[{ label: "EN", value: "en" }, { label: "عربي", value: "ar" }]}
          />
        </TweakSection>
        <TweakSection label="Brand accent">
          <TweakColor
            label="Gradient"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { label: "Magenta → Amber",  value: "magenta-amber",  color: ["#E50284", "#ED7408", "#FED200"] },
              { label: "Cyan → Amber",     value: "cyan-amber",     color: ["#00A4D7", "#62B439", "#FED200"] },
              { label: "Amber monotone",   value: "monotone-amber", color: ["#FED200", "#ED7408"] },
            ]}
          />
        </TweakSection>
        <TweakSection label="Jump to page">
          <TweakButton label="Home" onClick={() => navigate("home")} />
          <TweakButton label="Work index" onClick={() => navigate("work")} secondary />
          <TweakButton label="Case · Dubai World Cup" onClick={() => navigate("case:dubai-world-cup")} secondary />
          <TweakButton label="Case · State Visit" onClick={() => navigate("case:queen-elizabeth-state-visit")} secondary />
          <TweakButton label="Capabilities" onClick={() => navigate("capabilities")} secondary />
          <TweakButton label="About" onClick={() => navigate("about")} secondary />
          <TweakButton label="Clients" onClick={() => navigate("clients")} secondary />
          <TweakButton label="Contact" onClick={() => navigate("contact")} secondary />
        </TweakSection>
        <TweakSection label="Flow">
          <TweakButton label="Open brief modal" onClick={() => openBrief()} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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