/* global React, ReactDOM */
function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [contact, setContact] = React.useState(false);
  const [route, setRoute] = React.useState("home"); // "home" | "blog" | "article"
  const [postId, setPostId] = React.useState(null);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = (id) => {
    const scrollTo = () => {
      if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: "smooth" });
    };
    if (route !== "home") { setRoute("home"); setTimeout(scrollTo, 60); }
    else scrollTo();
  };

  const openBlog = () => { setRoute("blog"); window.scrollTo(0, 0); };
  const openPost = (id) => { setPostId(id); setRoute("article"); };

  const inner = route !== "home";

  return (
    <React.Fragment>
      <Navbar scrolled={inner ? false : scrolled} solid={inner} activeBlog={inner}
        onContact={() => setContact(true)} onNav={nav} onBlog={openBlog} />
      {route === "home" && (
        <React.Fragment>
          <Hero onContact={() => setContact(true)} onNav={nav} />
          <About />
          <Services />
          <Method />
          <AISection />
          <Why />
          <Cases />
          <Contacto />
        </React.Fragment>
      )}
      {route === "blog" && <BlogList onOpen={openPost} />}
      {route === "article" && <BlogArticle postId={postId} onBack={openBlog} />}
      <Footer onContact={() => setContact(true)} onNav={nav} onBlog={openBlog} />
      <ContactModal open={contact} onClose={() => setContact(false)} />
    </React.Fragment>
  );
}

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