// App entrypoint
function App() {
  const [route, setRoute] = useState('home');
  const [project, setProject] = useState(null);

  const openProject = (p) => { setProject(p); window.scrollTo({ top: 0, behavior: 'instant' }); };
  const closeProject = () => setProject(null);
  const navigate = (r) => { setProject(null); setRoute(r); };

  return (
    <>
      <Nav onNavigate={navigate} route={route}/>
      <div className="de-rail" onClick={() => navigate('contact')}>Got a project in mind?</div>

      <main>
        {route === 'home' && <HomeScreen onNavigate={navigate} onOpenProject={openProject}/>}
        {route === 'about' && <AboutScreen onNavigate={navigate}/>}
        {route === 'portfolio' && <PortfolioScreen onNavigate={navigate} onOpenProject={openProject}/>}
        {route === 'contact' && <ContactScreen onNavigate={navigate}/>}
      </main>

      <Footer onNavigate={navigate}/>

      {project && (
        <ProjectDetail project={project} onClose={closeProject} onOpenProject={openProject}/>
      )}
    </>
  );
}

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