import { createRoot } from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider, Navigate } from "react-router";
import DefaultLayout from "./components/layouts/DefaultLayout.tsx";
import AboutPage from "./components/pages/AboutPage.tsx";
import ContactsPage from "./components/pages/ContactsPage.tsx";
import PopupContainer from "./components/ui/PopupContainer.tsx";
import SurroundingsPage from "./components/pages/SurroundingsPage.tsx";
import LayoutWithoutFooter from "./components/layouts/LayoutWithoutFooter.tsx";
import MasterplanPage from "./components/pages/MasterplanPage.tsx";
import BlockPage from "./components/pages/BlockPage.tsx";

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      {
        path: "/about",
        element: <AboutPage />,
      },
      {
        path: "/contacts",
        element: <ContactsPage />,
      },
    ],
  },
  {
    path: "/",
    element: <LayoutWithoutFooter />,
    children: [
      {
        index: true,
        element: <MasterplanPage />,
      },
      {
        path: "surroundings",
        element: <SurroundingsPage />,
      },
    ],
  },
  {
    path: "/blocks",
    element: <Navigate to="/" replace />,
  },
  {
    path: "/blocks/:blockNumber",
    element: <LayoutWithoutFooter />,
    children: [
      {
        index: true,
        element: <BlockPage />,
      },
    ],
  },
]);

createRoot(document.getElementById("root")!).render(
  <>
    <RouterProvider router={router} />
    <PopupContainer />
  </>
);
