/* eslint-disable no-undef */
/* ──────────────────────────────────────────────────────────────────────
   App — routing + Tweaks panel wiring.
   ────────────────────────────────────────────────────────────────────── */

const { useState: uSA, useEffect: uEA } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "red-orange",
  "showWhatsApp": true,
  "heroLayout": "split",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = uSA("home");
  const [locale, setLocale] = uSA("en");
  const [consultOpen, setConsultOpen] = uSA(false);
  const [consultPrefill, setConsultPrefill] = uSA({});
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  /* RTL switch */
  uEA(() => {
    const dir = locale === "ar" ? "rtl" : "ltr";
    document.documentElement.setAttribute("dir", dir);
    document.documentElement.setAttribute("lang", locale);
  }, [locale]);

  /* Scroll to top on route change */
  uEA(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [route]);

  /* Inject brand accent override */
  uEA(() => {
    const palettes = {
      "red-orange": { red: "#FE294D", orange: "#FD6611" },
      "indigo":     { red: "#4F46E5", orange: "#7C3AED" },
      "emerald":    { red: "#0F8B66", orange: "#10B981" },
    };
    const p = palettes[t.accent] || palettes["red-orange"];
    document.documentElement.style.setProperty("--vz-red", p.red);
    document.documentElement.style.setProperty("--vz-orange", p.orange);
    document.documentElement.style.setProperty("--vz-grad", `linear-gradient(110deg, ${p.red} 0%, ${p.orange} 100%)`);
  }, [t.accent]);

  /* Expose nav globally so footer/logo/breadcrumbs can use it */
  window.__vzNav = setRoute;

  const nav = (r) => setRoute(r);
  const openConsult = (prefill = {}) => { setConsultPrefill(prefill); setConsultOpen(true); };

  const isDarkNav = false; // route === "home"

  let page;
  if (route === "home")               page = <window.HomePage         locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "services")      page = <window.ServicesHubPage  locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route.startsWith("service:")) page = <window.ServiceDetailPage id={route.slice(8)} locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "jurisdictions") page = <window.JurisdictionsPage locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "calculator")    page = <window.CalculatorPage   locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "golden-visa")   page = <window.GoldenVisaPage   locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "resources")     page = <window.ResourcesPage    locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "about")         page = <window.AboutPage        locale={locale} nav={nav} openConsult={openConsult} />;
  else if (route === "contact")       page = <window.ContactPage      locale={locale} nav={nav} openConsult={openConsult} />;
  else                                page = <window.HomePage         locale={locale} nav={nav} openConsult={openConsult} />;

  return (
    <div className={"app density-" + t.density} key={route}>
      <window.Navbar route={route} nav={nav} locale={locale} setLocale={setLocale} openConsult={() => openConsult({})} dark={isDarkNav} />
      <div className="fade-in" key={route}>{page}</div>
      <window.Footer locale={locale} nav={nav} />
      {t.showWhatsApp && <window.WhatsAppFab />}
      <window.MobileCTA onConsult={() => openConsult({})} />
      <window.ConsultModal open={consultOpen} onClose={() => setConsultOpen(false)} prefill={consultPrefill} />

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Brand accent">
            <window.TweakRadio label="Palette" value={t.accent}
              options={["red-orange","indigo","emerald"]}
              onChange={(v) => setTweak("accent", v)} />
          </window.TweakSection>
          <window.TweakSection label="Layout">
            <window.TweakRadio label="Density"  value={t.density} options={["comfortable","compact"]} onChange={(v) => setTweak("density", v)} />
            <window.TweakToggle label="WhatsApp FAB" value={t.showWhatsApp} onChange={(v) => setTweak("showWhatsApp", v)} />
          </window.TweakSection>
          <window.TweakSection label="Jump to page">
            {[["home","Home"],["services","Services hub"],["jurisdictions","Jurisdictions"],["calculator","Cost estimator"],["golden-visa","Golden Visa"],["resources","Resources"],["about","About"],["contact","Contact"]].map(([r, lab]) => (
              <window.TweakButton key={r} onClick={() => nav(r)} label={lab} />
            ))}
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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