/* Alpago — main app */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#9A7A4E",
  "heroStyle": "cinematic",
  "showFlag": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateA({ name: "home" });
  const [lang, setLang] = useStateA("en");
  const [modalOpen, setModalOpen] = useStateA(false);
  const [modalProject, setModalProject] = useStateA(null);
  const [tweaks, setTweakState] = useTweaks(TWEAK_DEFAULTS);

  // Apply lang dir + persist
  useEffectA(() => {
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = lang;
  }, [lang]);

  // Apply accent CSS var
  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
  }, [tweaks.accent]);

  // Scroll-to-top on route change
  useEffectA(() => {
    if (route.name !== "project") window.scrollTo({ top: 0 });
  }, [route.name, route.slug]);

  const openCta = (slug) => { setModalProject(slug || null); setModalOpen(true); };
  const openProject = (slug) => setRoute({ name: "project", slug });

  const transparentNav = route.name === "home" || route.name === "project";

  let screen;
  if (route.name === "home") {
    screen = <HomeScreen lang={lang} setRoute={setRoute} onCta={() => openCta()} openProject={openProject} />;
  } else if (route.name === "projects") {
    screen = <ProjectsScreen lang={lang} openProject={openProject} />;
  } else if (route.name === "project") {
    screen = <ProjectDetail slug={route.slug} lang={lang} openProject={openProject} onCta={() => openCta(route.slug)} setRoute={setRoute} />;
  } else if (route.name === "about") {
    screen = <AboutScreen lang={lang} setRoute={setRoute} onCta={() => openCta()} />;
  } else if (route.name === "contact") {
    screen = <ContactScreen lang={lang} onCta={() => openCta()} />;
  }

  const stickyShow = route.name === "project";
  const stickyProj = stickyShow ? window.AlpagoData.projects.find(p => p.slug === route.slug) : null;

  return (
    <div>
      {tweaks.showFlag && <FlagStrip lang={lang} />}
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} onCta={() => openCta()} transparent={transparentNav} withFlag={tweaks.showFlag} />
      <main>{screen}</main>
      <Footer lang={lang} setRoute={setRoute} onCta={() => openCta()} />
      <WhatsAppFab onClick={() => window.open("https://wa.me/97142630022", "_blank")} />
      <RegisterModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        lang={lang}
        defaultProject={modalProject}
      />
      <StickyCta
        show={stickyShow}
        label={stickyProj ? `${stickyProj.location} · ${stickyProj.typology}` : ""}
        title={stickyProj ? stickyProj.name : ""}
        onPrimary={() => openCta(route.slug)}
        primaryLabel={lang === "ar" ? "سجل اهتمامك" : "Register interest"}
        onSecondary={() => window.open("https://wa.me/97142630022", "_blank")}
        secondaryLabel="WhatsApp"
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweakState("accent", v)}
            options={["#9A7A4E", "#2E6F73", "#617669", "#B07A3A", "#9C5630"]}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Hero treatment"
            value={tweaks.heroStyle}
            onChange={(v) => setTweakState("heroStyle", v)}
            options={[
              { value: "cinematic", label: "Cinematic" },
              { value: "editorial", label: "Editorial" }
            ]}
          />
          <TweakToggle
            label="Show licensing flag"
            value={tweaks.showFlag}
            onChange={(v) => setTweakState("showFlag", v)}
          />
        </TweakSection>
        <TweakSection label="Quick jump">
          <TweakButton onClick={() => setRoute({ name: "project", slug: "palm-flower" })}>Open Palm Flower</TweakButton>
          <TweakButton onClick={() => setRoute({ name: "project", slug: "casa-del-sole" })}>Open Casa Del Sole</TweakButton>
          <TweakButton onClick={() => setRoute({ name: "project", slug: "kural-vista" })}>Open Kural Vista</TweakButton>
          <TweakButton onClick={() => setLang(lang === "en" ? "ar" : "en")}>Toggle EN ↔ AR (RTL)</TweakButton>
          <TweakButton onClick={() => setModalOpen(true)}>Open Register Interest</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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