/* =========================================================
   SIGNET — Router / app shell
   ========================================================= */

const App = () => {
  const [route, setRoute] = React.useState({ page: "home", arg: null });
  const [scrolled, setScrolled] = React.useState(false);

  const go = (page, arg = null) => {
    setRoute({ page, arg });
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // For the home page, we want the nav to start transparent and become solid on scroll
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  let view;
  switch (route.page) {
    case "services": view = <ServicesOverview go={go} />; break;
    case "service-detail": view = <ServiceDetail serviceId={route.arg} go={go} />; break;
    case "solutions": view = <Solutions go={go} />; break;
    case "pricing": view = <Pricing go={go} />; break;
    case "cases": view = <Cases go={go} />; break;
    case "blog": view = <Blog go={go} />; break;
    case "contact": view = <Contact go={go} />; break;
    case "home":
    default: view = <Home go={go} />; break;
  }

  const isHome = route.page === "home";

  return (
    <React.Fragment>
      <Nav page={route.page} go={go} transparent={isHome && !scrolled} />
      <div key={route.page + (route.arg || "")}>{view}</div>
      <Footer go={go} />
    </React.Fragment>
  );
};

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