/* App router — picks page component by path */
function App() {
  return (
    <RouterProvider>
      <Shell />
    </RouterProvider>
  );
}

function Shell() {
  const { path } = useRouter();

  let Page;
  if (path === '/' || path === '') Page = <HomePage />;
  else if (path === '/products') Page = <ProductsHubPage />;
  else if (path === '/products/voice') Page = <VoicePage />;
  else if (path === '/products/safe') Page = <SafePage />;
  else if (path === '/products/ops') Page = <OpsPage />;
  else if (path === '/products/signal') Page = <SignalPage />;
  else if (path === '/platform') Page = <PlatformHubPage />;
  else if (path === '/platform/understanding') Page = <UnderstandingPage />;
  else if (path === '/platform/data-sovereignty') Page = <SovereigntyPage />;
  else if (path === '/platform/security') Page = <SecurityPage />;
  else if (path === '/platform/multi-site') Page = <MultiSitePage />;
  else if (path === '/platform/integrations') Page = <IntegrationsPage />;
  else if (path === '/solutions') Page = <SolutionsHubPage />;
  else if (path.startsWith('/solutions/')) Page = <SolutionPage slug={path.replace('/solutions/', '')} />;
  else if (path === '/industries') Page = <IndustriesHubPage />;
  else if (path.startsWith('/industries/')) Page = <IndustryPage slug={path.replace('/industries/', '')} />;
  else if (path === '/about') Page = <AboutPage />;
  else if (path === '/contact') Page = <ContactPage />;
  else if (path === '/demo') Page = <DemoPage />;
  else if (path.startsWith('/legal/')) Page = <LegalPage slug={path.replace('/legal/', '')} />;
  else Page = <StubPage path={path} />;

  return (
    <div id="root-inner" data-screen-label={path}>
      <Nav />
      <main key={path}>{Page}</main>
      <Footer />
    </div>
  );
}

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