// Main app — routing + shell

function App() {
  // route can be: "home", "services", "service:<slug>", "upload", "gallery", "why", "about", "careers", "contact"
  const initialRoute = window.__BYTESGLUE_SHOWCASE_ROUTE || "home";
  const [route, setRoute] = React.useState(initialRoute);
  const [routeArg, setRouteArg] = React.useState(null);

  // Sync to hash for direct linking
  React.useEffect(() => {
    const apply = () => {
      const h = (window.location.hash || ("#" + initialRoute)).slice(1);
      setRoute(h || "home");
    };
    apply();
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  const navigate = (next, arg = null) => {
    setRoute(next);
    setRouteArg(arg);
    window.location.hash = "#" + next;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  let page;
  if (route === "home") page = <HomePage onNavigate={navigate} />;
  else if (route === "services") page = <ServicesIndex onNavigate={navigate} />;
  else if (route.startsWith("service:")) page = <ServiceDetail slug={route.slice(8)} onNavigate={navigate} />;
  else if (route === "upload") page = <UploadPage onNavigate={navigate} preselect={routeArg && routeArg.service} />;
  else if (route === "gallery") page = <GalleryPage onNavigate={navigate} />;
  else if (route === "why") page = <WhyPage onNavigate={navigate} />;
  else if (route === "about") page = <AboutPage onNavigate={navigate} />;
  else if (route === "careers") page = <CareersPage onNavigate={navigate} />;
  else if (route === "contact") page = <ContactPage onNavigate={navigate} />;
  else page = <HomePage onNavigate={navigate} />;

  return (
    <React.Fragment>
      <Navbar route={route} onNavigate={navigate} />
      <main>{page}</main>
      <Footer onNavigate={navigate} />
      <MobileBar onNavigate={navigate} />
      <WhatsappFab />
    </React.Fragment>
  );
}

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