/* Root app + router map */

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

  // Map path to page
  let page = null;
  switch (path) {
    case '/': page = <HomePage />; break;
    case '/product': page = <ProductPage />; break;
    case '/checkout': page = <CheckoutPage />; break;
    case '/login': page = <LoginPage />; break;
    case '/register': page = <RegisterPage />; break;
    case '/forgot': page = <ForgotPage />; break;
    case '/verify': page = <VerifyPage />; break;
    case '/dashboard': page = <DashboardOverview />; break;
    case '/dashboard/orders': page = <OrdersPage />; break;
    case '/dashboard/domains/new': page = <DomainsNewPage />; break;
    case '/dashboard/invoices': page = <InvoicesPage />; break;
    case '/dashboard/profile': page = <ProfilePage />; break;
    case '/dashboard/company': page = <CompanyPage />; break;
    case '/dashboard/support': page = <SupportPage />; break;
    case '/dashboard/support/new': page = <NewTicketPage />; break;
    case '/agb': page = <AGBPage />; break;
    case '/datenschutz': page = <DatenschutzPage />; break;
    case '/impressum': page = <ImpressumPage />; break;
    case '/faq': page = <FAQPage />; break;
    default: page = <NotFound />;
  }

  return page;
}

function NotFound() {
  return (
    <PublicPage>
      <section style={{ padding: '120px 0', textAlign: 'center' }}>
        <div className="container-narrow">
          <div className="mono" style={{ color: 'var(--muted-2)', fontSize: 12, letterSpacing: '0.1em' }}>404</div>
          <h1 style={{ marginTop: 8 }}>Seite nicht gefunden.</h1>
          <p className="lead muted" style={{ marginTop: 14 }}>Die aufgerufene Seite existiert nicht oder wurde verschoben.</p>
          <div className="row" style={{ justifyContent: 'center', marginTop: 22 }}>
            <Link to="/" className="btn btn-primary">Zur Startseite</Link>
            <Link to="/faq" className="btn btn-secondary">FAQ</Link>
          </div>
        </div>
      </section>
    </PublicPage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </RouterProvider>
);