const DSA = window.ConstruimosTuEdificioDesignSystem_3f039f;
const { SiteHeader, SiteFooter } = DSA;

const SERVICE_ROUTES = Object.keys(window.SERVICE_CONTENT);

function useReveal(dep) {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { rootMargin: "0px 0px -8% 0px", threshold: .06 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [dep]);
}

function App() {
  const [route, setRoute] = React.useState(window.location.pathname || "/");
  const go = href => {
    if (!href) return;
    if (href.startsWith("#")) {
      const el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior: "smooth" });
      return;
    }
    const path = href.split("#")[0];
    setRoute(path);
    if (window.history && window.history.pushState) window.history.pushState({}, "", path);
    const s = document.querySelector(".cte-scroll");
    if (s) s.scrollTop = 0; else window.scrollTo(0, 0);
  };
  React.useEffect(() => {
    const onPop = () => setRoute(window.location.pathname || "/");
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  useReveal(route);
  let page;
  if (route === "/") page = <Home onNavigate={go} />;
  else if (route === "/ofrece-tu-terreno/") page = <LandPage onNavigate={go} />;
  else if (route === "/blog/") page = <BlogPage onNavigate={go} />;
  else if (route === "/contacto/") page = <ContactPage onNavigate={go} />;
  else if (route === "/proyectos/") page = <ProjectsPage onNavigate={go} />;
  else if (SERVICE_ROUTES.indexOf(route) > -1) page = <ServicePage route={route} onNavigate={go} />;
  else page = <Home onNavigate={go} />;
  return (
    <div className="cte-page">
      <div style={{ position: "relative" }}>
        <SiteHeader variant="transparent" active={route} onNavigate={go} />
        {page}
      </div>
      <SiteFooter backgroundImage={window.CTE_DATA.photos.footer} onNavigate={go} />
      {route !== "/contacto/" ? (
        <div className="cte-sticky-cta"><a href="/contacto/">Solicitar cotización</a></div>
      ) : null}
    </div>
  );
}

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