/* ============================================================
   Shuraa Business Setup — App shell + Tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "red",
  "density": "default",
  "rtl": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState("EN");

  React.useEffect(() => {
    document.body.dataset.accent = t.accent;
    document.body.dataset.density = t.density;
    document.documentElement.dir = (t.rtl || lang === "AR") ? "rtl" : "ltr";
  }, [t.accent, t.density, t.rtl, lang]);

  const handleLang = (L) => {
    setLang(L);
    if (L === "AR") setTweak("rtl", true);
    else if (L === "EN") setTweak("rtl", false);
  };

  return (
    <>
      <Navbar lang={lang} onLang={handleLang} />
      <Hero />
      <TrustStrip />
      <ServicesBlock />
      <JurisdictionComparison />
      <CostEstimator />
      <FounderBlock />
      <GlobalOffices />
      <ConsultationForm />
      <Footer />
      <Fab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakRadio
          label="Color"
          value={t.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            { value: "red",  label: "Red" },
            { value: "gold", label: "Gold" },
            { value: "sand", label: "Sand" },
          ]}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={v => setTweak("density", v)}
          options={[
            { value: "compact", label: "Snug" },
            { value: "default", label: "Default" },
            { value: "airy",    label: "Airy" },
          ]}
        />
        <TweakToggle
          label="RTL (Arabic) preview"
          value={t.rtl}
          onChange={v => setTweak("rtl", v)}
        />
      </TweaksPanel>
    </>
  );
}

window.App = App;