// Main app — handles routing between pages
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [page, setPage] = useStateApp('home');
  const [projectId, setProjectId] = useStateApp(null);

  const navigate = (next, id = null) => {
    if (next === 'project-detail') {
      setProjectId(id);
    }
    setPage(next);
    // Scroll to top on page change
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  let pageEl;
  if (page === 'home') pageEl = <window.HomePage navigate={navigate} />;
  else if (page === 'projects') pageEl = <window.ProjectsPage navigate={navigate} />;
  else if (page === 'project-detail') pageEl = <window.ProjectDetailPage navigate={navigate} projectId={projectId} />;
  else if (page === 'about') pageEl = <window.AboutPage navigate={navigate} />;
  else if (page === 'contact') pageEl = <window.ContactPage navigate={navigate} />;
  else pageEl = <window.HomePage navigate={navigate} />;

  return (
    <React.Fragment>
      <Nav page={page} navigate={navigate} />
      <div key={page + (projectId || '')}>
        {pageEl}
      </div>
      <Footer navigate={navigate} />
    </React.Fragment>
  );
}

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