import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";
import Root from './routes/root.jsx';
import ErrorPage from './routes/error-page.jsx';
import Index from './routes/landing/index.jsx';
import ResidentialProxies from './routes/landing/proxies/residential.jsx';
import PricingPage from './routes/landing/pricing/pricing.jsx';
import { ThemeProvider } from './components/layout/theme-provider.jsx';
import UseCasesPage from './routes/landing/use-cases/use-cases.jsx';
import LocationsPage from './routes/landing/proxies/locations.jsx';

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            {
                path: "",
                element: <Index />,
            },
            {
                path: "proxies",
                children: [
                    {
                        path: "residential",
                        element: <ResidentialProxies />,
                    },
                    {
                        path: "locations",
                        element: <LocationsPage />,
                    }
                ]
            },
            {
                path: "pricing",
                element: <PricingPage />,
            },
            {
                path: "use-cases",
                element: <UseCasesPage />,
            }
        ],
    },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <ThemeProvider>
            <RouterProvider router={router} />
        </ThemeProvider>
    </React.StrictMode>,
)