// App shell — state-based routing + lightbox

const { useState: aUseState } = React;

function App() {
  const [route, setRoute] = aUseState("home");
  const [lightboxIndex, setLightboxIndex] = aUseState(null);

  const openLightbox = (i) => setLightboxIndex(i);
  const closeLightbox = () => setLightboxIndex(null);
  const prev = () => setLightboxIndex((i) => (i == null ? null : (i - 1 + window.PORTFOLIO.length) % window.PORTFOLIO.length));
  const next = () => setLightboxIndex((i) => (i == null ? null : (i + 1) % window.PORTFOLIO.length));

  return (
    <div className="premium-shell min-h-screen flex flex-col bg-wafer-20">
      <window.HyperFramesBackground />
      <window.UtilityBar />
      <window.Navbar route={route} setRoute={setRoute} />

      <div className="flex-1">
        {route === "home" && <window.HomePage setRoute={setRoute} openLightbox={openLightbox} />}
        {route === "about" && <window.AboutPage setRoute={setRoute} />}
        {route === "portfolio" && <window.PortfolioPage setRoute={setRoute} openLightbox={openLightbox} />}
        {route === "services" && <window.ServicesPage setRoute={setRoute} openLightbox={openLightbox} />}
        {route === "special-projects" && <window.ServicesPage setRoute={setRoute} openLightbox={openLightbox} />}
        {route === "contact" && <window.ContactPage setRoute={setRoute} />}
      </div>

      <window.Footer setRoute={setRoute} />

      <window.Lightbox
        images={window.PORTFOLIO}
        index={lightboxIndex}
        onClose={closeLightbox}
        onPrev={prev}
        onNext={next}
      />


    </div>
  );
}

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