/* Sobha Realty campaign microsite — main app + tweaks */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "locale": "EN",
  "accent": "Green primary",
  "showLeadBand": true,
  "density": "comfortable",
  "showFAB": true,
  "heroOverlay": "Dusk",
  "scale": 100
}/*EDITMODE-END*/;

const ACCENTS = {
  "Green primary": { primary:"#1F6B4E", primaryDeep:"#114334", signal:"#B51E23", primaryTint:"#E7EFE9", accent:"#A8844F" },
  "Red primary":   { primary:"#B51E23", primaryDeep:"#7C1418", signal:"#1F6B4E", primaryTint:"#FCEAEC", accent:"#A8844F" },
  "Stone primary": { primary:"#A8844F", primaryDeep:"#6C5026", signal:"#B51E23", primaryTint:"#F1E9DA", accent:"#1F6B4E" }
};

const HERO_OVERLAYS = {
  "Dusk":     "media/render-sobha-one-night-overview.webp",
  "Morning":  "media/render-sobha-one-morning.webp",
  "Twilight": "media/render-sobha-one-dusk.webp",
  "Master":   "media/community-sobha-one.webp"
};

function applyAccent(name){
  const c = ACCENTS[name] || ACCENTS["Green primary"];
  const r = document.documentElement.style;
  r.setProperty("--primary",       c.primary);
  r.setProperty("--primary-deep",  c.primaryDeep);
  r.setProperty("--signal",        c.signal);
  r.setProperty("--primary-tint",  c.primaryTint);
  r.setProperty("--accent",        c.accent);
}

function applyDensity(d){
  document.documentElement.style.setProperty("--gutter",
    d === "tight" ? "clamp(16px,3vw,40px)" :
    d === "loose" ? "clamp(28px,5vw,88px)" :
                    "clamp(20px,4vw,64px)");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useState(null);

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyDensity(t.density); }, [t.density]);
  useEffect(() => {
    document.documentElement.setAttribute("data-locale", t.locale.toLowerCase());
  }, [t.locale]);

  // override featured heroImg based on tweak
  const i18n = window.SR_DATA.i18n[t.locale] || window.SR_DATA.i18n.EN;
  // patch the featured hero image live
  window.SR_DATA.featured.heroImg = HERO_OVERLAYS[t.heroOverlay] || HERO_OVERLAYS.Dusk;

  const open  = (name) => setModal(name);
  const close = () => setModal(null);

  return (
    <>
      <TopBar locale={t.locale}
              setLocale={(v)=>setTweak("locale", v)}
              openRegister={()=>open("register")}
              t={i18n} />

      <Hero openRegister={()=>open("register")}
            openBrochure={()=>open("brochure")}
            openViewing={()=>open("viewing")}
            t={i18n} />

      <CredibilityBand />
      <Narrative />
      <Craftsmanship />
      <Residences openBrochure={()=>open("brochure")}
                  openViewing={()=>open("viewing")}
                  t={i18n} />
      <Amenities />
      <Legacy />

      {t.showLeadBand && <LeadBand openBroker={()=>open("broker")} />}

      <Communities />

      <FooterBlock openRegister={()=>open("register")}
                   openBroker={()=>open("broker")}
                   openViewing={()=>open("viewing")} />

      {t.showFAB && <FAB t={i18n} />}

      {modal === "register" && <RegisterFlow onClose={close} />}
      {modal === "brochure" && <BrochureFlow onClose={close} />}
      {modal === "viewing"  && <ViewingFlow  onClose={close} />}
      {modal === "broker"   && <BrokerFlow   onClose={close} />}

      <TweaksPanel title="Tweaks · Sobha One">
        <TweakSection label="Locale" />
        <TweakRadio label="Language"
                    value={t.locale}
                    options={["EN","AR","RU","ZH"]}
                    onChange={(v)=>setTweak("locale", v)} />

        <TweakSection label="Brand accent" />
        <TweakRadio label="Palette"
                    value={t.accent}
                    options={["Green primary","Red primary","Stone primary"]}
                    onChange={(v)=>setTweak("accent", v)} />

        <TweakSection label="Hero render" />
        <TweakSelect label="Overlay image"
                     value={t.heroOverlay}
                     options={["Dusk","Morning","Twilight","Master"]}
                     onChange={(v)=>setTweak("heroOverlay", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density"
                    value={t.density}
                    options={["tight","comfortable","loose"]}
                    onChange={(v)=>setTweak("density", v)} />
        <TweakToggle label="Inline lead band"
                     value={t.showLeadBand}
                     onChange={(v)=>setTweak("showLeadBand", v)} />
        <TweakToggle label="WhatsApp FAB"
                     value={t.showFAB}
                     onChange={(v)=>setTweak("showFAB", v)} />
      </TweaksPanel>
    </>
  );
}

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