// app.jsx — router + entry
const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA } = React;

function App() {
  // route state: { name: 'home'|'projects'|'sectors'|'services'|'studio'|'contact'|'case', id?, filter?, subject? }
  const [route, setRoute] = useStateA({ name: "home" });
  const [lightbox, setLightbox] = useStateA(null); // { images, index }

  const navigate = useCallbackA((next) => {
    setRoute(next);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  const openLightbox = useCallbackA((images, index) => {
    setLightbox({ images, index });
  }, []);

  let view;
  switch (route.name) {
    case "projects":
      view = <ProjectsIndex navigate={navigate} initialFilter={route.filter} />;
      break;
    case "case": {
      const project = PROJECTS.find(p => p.id === route.id) || PROJECTS[0];
      view = <CaseStudy project={project} navigate={navigate} openLightbox={openLightbox} />;
      break;
    }
    case "sectors":
      view = <Sectors navigate={navigate} />;
      break;
    case "services":
      view = <Services navigate={navigate} />;
      break;
    case "studio":
      view = <Studio navigate={navigate} />;
      break;
    case "contact":
      view = <Contact navigate={navigate} subject={route.subject} />;
      break;
    case "home":
    default:
      view = <Home navigate={navigate} />;
  }

  return (
    <React.Fragment>
      <Topbar route={route} navigate={navigate} />
      {view}
      <Footer navigate={navigate} />
      <WhatsappFab context={route.name === "case" ? "project" : "general"} />
      {lightbox && (
        <Lightbox
          images={lightbox.images}
          startIndex={lightbox.index}
          onClose={() => setLightbox(null)}
        />
      )}
    </React.Fragment>
  );
}

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