function App() {
  const [route, setRoute] = React.useState("home");
  const [video, setVideo] = React.useState(null);
  const rootRef = React.useRef(null);

  const nav = (r) => { setRoute(r); if (rootRef.current) rootRef.current.scrollTop = 0; };

  const transparentNav = route === "home";
  const showCTA = route === "home" || route === "about" || route === "testimonials";

  return (
    <div ref={rootRef} data-scroll-root style={{ height: "100vh", overflowY: "auto", background: "var(--canvas)" }}>
      <NavBar current={route} onNav={nav} transparent={transparentNav} />
      {route === "home" && <HomePage onNav={nav} onPlay={setVideo} />}
      {route === "about" && <AboutPage onNav={nav} />}
      {route === "testimonials" && <TestimonialsPage onNav={nav} onPlay={setVideo} />}
      {route === "contact" && <ContactPage onNav={nav} />}
      {showCTA && <ContactCTA onNav={nav} />}
      <SiteFooter onNav={nav} />
      <VideoLightbox video={video} onClose={() => setVideo(null)} />
    </div>
  );
}

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