// App root + router
const PAGES = {
  '/': window.HomePage,
  '/about': window.AboutPage,
  '/frame-selection': window.FrameSelectionPage,
  '/services': window.ServicesPage,
  '/showcase': window.ShowcasePage,
  '/commercial': window.CommercialPage,
  '/contact': window.ContactPage,
};

function App() {
  const route = window.useRoute();
  const cleanPath = route.split('?')[0];
  const Page = PAGES[cleanPath] || window.HomePage;
  return (
    <div className="min-h-screen flex flex-col">
      <window.UtilityBar />
      <window.Navbar path={cleanPath} />
      <main className="flex-1">
        <Page key={cleanPath} />
      </main>
      <window.Footer />
    </div>
  );
}

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