import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import Viewer from './userside/userhome/viewer';
import Signin from './userside/auth/Csignin';
import SignUp from './userside/auth/Csignup';
import Client from './userside/Client/Cprofile';
import Buypackage from './userside/buypackage/buypackage';
import Requireddetails from './userside/buypackage/requireddetails';
import Aboutus from './userside/userhome/aboutus/aboutus';
import Team from './userside/Team/team';
import Career from './userside/career/career';
import AuthProvider from './userside/Provider/AuthProvider';
import MProfile from './userside/Employee/Mprofile';
import ESignUp from './userside/auth/Esignup';
import EmployeeProfile from './userside/Employee/Eprofile';
import CSignUp from './userside/auth/Csignup';
import Csignin from './userside/auth/Csignin';
import Clientprofile from './userside/Client/Cprofile';
import PackDetails from './userside/packages/packdetails';
import { base_url } from './config/config';
import ErrorPage from './userside/ErrorPage/ErrorPage';
import { PageShimmer, RouteLoadingBar } from './userside/utils/Shimmer';

// Wraps every route: shows a top loading bar while the next page's data loads.
const RootLayout = () => (
  <>
    <RouteLoadingBar />
    <Outlet />
  </>
);
import HomePortfolio from './userside/userhome/homeportfolio/homeportfolio';
import { HelmetProvider } from 'react-helmet-async'
import PortfolioDetail from './userside/userhome/homeportfolio/PortfolioDetails';
import PaymentGateway from './userside/buypackage/paymentGateway';
import SupportChat from './userside/userhome/supportchat/SupportChat';
import Social from './userside/userhome/Social/Social';
import PrivacyPolicy from './userside/footerpages/privactpolicy';
import TermsConditions from './userside/footerpages/Terms&condition';
import ForgotPasswordOtp from './userside/auth/otppage';
import ResetPassword from './userside/auth/resetpasswordpage';
import BlogList from './userside/blog/BlogList';
import BlogDetail from './userside/blog/BlogDetail';
import PushManager from './userside/utils/PushManager';


const router = createBrowserRouter([
  {
  element: <RootLayout />,
  errorElement: <ErrorPage />,
  children: [
  {
    path: "/",
    element: <Viewer></Viewer>,
  },

  {
    path: "/signin",
    element: <Signin></Signin>,
  },

  {
    path: "/clientsignup",
    element: <SignUp></SignUp>,
  },

  {
    path: "/client",
    element: <Client></Client>,
  },
  {
    path: "/buypackage",
    element: <Buypackage></Buypackage>,
  },

  {
    path: "/requireddetails",
    element: <Requireddetails></Requireddetails>,
  },
  {
    path: "/packdetails/:id",
    element: <PackDetails />,
  },
  {
    path: "/aboutus",
    element: <Aboutus></Aboutus>,
  },
  {
    path: "/ourteam",
    element: <Team></Team>,
  },
  {
    path: "/portfolio",
    element: <HomePortfolio></HomePortfolio>,
  },

  {
    path: '/paymentgateway',
    element: <PaymentGateway></PaymentGateway>
  },
  {
    path: "/portfolio/:id",
    element: <PortfolioDetail />,
  },
  {
    path: "/career",
    element: <Career></Career>,
  },
  {
    path: "/marketerprofile/:id",
    element: <MProfile />,
  },
  {
    path: "/employeeprofile/:id",
    element: <EmployeeProfile />,
  },
  {
    path: "/clientprofile/:id",
    element: <Clientprofile />,
  }
  ,
  {
    path: "/employeesignup",
    element: <ESignUp></ESignUp>,
  },
  {
    path: "/clientsignup",
    element: <CSignUp></CSignUp>,
  },

  {
    path: "/clientsignin",
    element: <Csignin></Csignin>,
  },
  {
    path: "/termsandcondition",
    element: <TermsConditions></TermsConditions>,
  },
  {
    path: "/privacypolicy",
    element: <PrivacyPolicy></PrivacyPolicy>,
  },
{ path:"/forgot-password-otp" ,
  element:<ForgotPasswordOtp />,
},
{ path:"/reset-password" ,
  element:<ResetPassword />},
{ path: "/blog",
  element: <BlogList />,
},
{ path: "/blog/:slug",
  element: <BlogDetail />,
},
  // {
  //   path: "/marketerprofile",
  //   element: <MProfile></MProfile>
  // },




  { path: "*", element: <ErrorPage /> },
  ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HelmetProvider>
      <AuthProvider>
        <Social />
        <SupportChat />
        <PushManager />
        <RouterProvider router={router} fallbackElement={<PageShimmer />} />
      </AuthProvider>
    </HelmetProvider>

  </React.StrictMode>,
)