// App shell — orchestrates screens, nav and the lightbox.
function JHApp() {
  const [screen, setScreen] = React.useState("home");
  const [lightbox, setLightbox] = React.useState(null);
  const scrollRef = React.useRef(null);

  // Re-render Lucide icons on every commit.
  React.useEffect(() => { window.JHIcons(); });

  const go = (id) => {
    if (id === "sold") { setScreen("portfolio"); }
    else setScreen(id);
    window.__jhPortfolioFilter = id === "sold" ? "sold" : "all";
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  const onInkNav = screen === "home";

  return (
    <div ref={scrollRef} data-scroll style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: "var(--bg-canvas)" }}>
      <window.JHNav current={screen === "portfolio" && window.__jhPortfolioFilter === "sold" ? "sold" : screen} onNav={go} onInk={onInkNav} />

      {screen === "home" && <window.JHHome onNav={go} onOpen={(id) => setLightbox(id)} />}
      {screen === "portfolio" && <window.JHPortfolio initialFilter={window.__jhPortfolioFilter || "all"} onOpen={(id) => setLightbox(id)} />}
      {screen === "news" && <window.JHNews />}
      {screen === "contact" && <window.JHContact />}

      <window.JHFooter onNav={go} />

      {lightbox && (
        <window.JHArtworkDetail
          id={lightbox}
          onClose={() => setLightbox(null)}
          onNav={go}
          onNavigate={(i) => setLightbox(window.JH_ARTWORKS[i].id)}
        />
      )}
    </div>
  );
}
window.JHApp = JHApp;