/* ===== app.jsx — root: routing + locale + tweaks ===== */

const ACCENT_PRESETS = {
  // hex -> { deep, tint, label }
  "#1CB095": { deep: "#14907A", tint: "#E6F6F2", label: "Teal (brand)" },
  "#C39150": { deep: "#9E7434", tint: "#FAF2E4", label: "Gold" },
  "#2A5BD7": { deep: "#1F46AE", tint: "#E7EDFB", label: "Cobalt" },
  "#B85B3E": { deep: "#92452C", tint: "#F8EAE2", label: "Copper" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":      "#1CB095",
  "heroVariant": "split",
  "density":     "regular",
  "locale":      "en"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");

  React.useEffect(() => {
    const html = document.documentElement;
    html.setAttribute("data-density", t.density);
    html.setAttribute("lang", t.locale);
    html.setAttribute("dir", t.locale === "ar" ? "rtl" : "ltr");

    const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS["#1CB095"];
    html.style.setProperty("--accent", t.accent);
    html.style.setProperty("--accent-deep", preset.deep);
    html.style.setProperty("--accent-tint", preset.tint);
  }, [t.accent, t.density, t.locale]);

  const setLocale = (l) => setTweak("locale", l);

  const screenLabel = {
    home: "01 Home",
    services: "02 Services",
    jurisdictions: "03 Jurisdictions",
    calculator: "04 Cost Calculator",
    contact: "05 Contact",
  }[route] || route;

  return (
    <div data-screen-label={screenLabel}>
      <Nav route={route} setRoute={setRoute} locale={t.locale} setLocale={setLocale}/>
      {route === "home"          && <HomeScreen          locale={t.locale} setRoute={setRoute} heroVariant={t.heroVariant}/>}
      {route === "services"      && <ServicesScreen      locale={t.locale} setRoute={setRoute}/>}
      {route === "jurisdictions" && <JurisdictionsScreen locale={t.locale} setRoute={setRoute}/>}
      {route === "calculator"    && <CalculatorScreen    locale={t.locale} setRoute={setRoute}/>}
      {route === "contact"       && <ContactScreen       locale={t.locale} setRoute={setRoute}/>}
      <Footer locale={t.locale}/>
      <WhatsAppFab/>

      <TweaksPanel>
        <TweakSection label="Aesthetic"/>
        <TweakColor label="Accent" value={t.accent}
          options={["#1CB095", "#C39150", "#2A5BD7", "#B85B3E"]}
          onChange={(v) => setTweak("accent", v)}/>
        <TweakRadio label="Density" value={t.density}
          options={["compact", "regular"]}
          onChange={(v) => setTweak("density", v)}/>

        <TweakSection label="Hero (home only)"/>
        <TweakRadio label="Layout" value={t.heroVariant}
          options={[
            { value: "split",    label: "Split" },
            { value: "centered", label: "Center" },
            { value: "image",    label: "Image" },
          ]}
          onChange={(v) => { setTweak("heroVariant", v); setRoute("home"); window.scrollTo({top:0}); }}/>

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

        <TweakSection label="Navigate"/>
        <TweakSelect label="Screen" value={route}
          options={[
            { value: "home", label: "Home" },
            { value: "services", label: "Services" },
            { value: "jurisdictions", label: "Jurisdictions" },
            { value: "calculator", label: "Cost Calculator" },
            { value: "contact", label: "Contact" },
          ]}
          onChange={(v) => { setRoute(v); window.scrollTo({top:0}); }}/>
      </TweaksPanel>
    </div>
  );
}

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