import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router";
import { Layout } from "./components/layouts";
import { ImageLayout } from "./components/layouts/imageLayout";
import App from "./pages/App";
import { HowItWorks } from "./pages/howItWorks/howItWorks";

import { AboutUs } from "./pages/about-us";
import { BlogPage } from "./pages/blog/index";
import { BlogPageId } from "./pages/blog/single";
import { ContactUs } from "./pages/contact-us";
import { OutPlatform } from "./pages/our-platform";
import { Pricing } from "./pages/pricing/pricing";

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { HelmetProvider } from "react-helmet-async";
import { I18nextProvider, initReactI18next } from 'react-i18next';
import PrivacyPolicy from "./pages/privacy-policy";
import RefundPolicy from "./pages/refund-policy";
import { ScheduleConsultation } from "./pages/schedule";
import { ServicesBrandingAndIdentity } from "./pages/services/subPages/brandingAndIdentity";
import { ServicesConceptDesign } from "./pages/services/subPages/conceptDesign";
import { ServicesContentProduction } from "./pages/services/subPages/contentProduction";
import { ServicesIllustrationDesign } from "./pages/services/subPages/illustrationDesign";
import { ServicesMarketingAndAds } from "./pages/services/subPages/marketingAndAds";
import { ServicesSocialMediaCreatives } from "./pages/services/subPages/socialMediaCreatives";
import { ServicesWebsiteAndOnlineStores } from "./pages/services/subPages/websiteAndOnlineStore";
import TermsAndConditions from "./pages/terms-and-condition";
import { UseCaseAppTechStartups } from "./pages/use-cases/subpages/appTechStartups/appTechStartups";
import { UseCaseCoachAndConsultant } from "./pages/use-cases/subpages/coachesAndConsultants/coachesAndConsultants";
import { UseCaseMarketingAgencies } from "./pages/use-cases/subpages/marketingAgencies/marketingAgencies";
import { UseCaseOnlineStore } from "./pages/use-cases/subpages/onlineStores/onlineStores";

// ------------------------
// i18n Initialization
// ------------------------
i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    backend: {
      // Use /dist/languages in production, /languages in dev
      loadPath: `${import.meta.env.VITE_I18N_PATH || '/dist/languages'}/{{lng}}/index.json`,
    },
    detection: {
      order: ['queryString', 'cookie'],
      caches: ['cookie'],
    },
    interpolation: {
      escapeValue: false,
    },
    returnObjects: true,
    keySeparator: '.', // allows dot notation keys
  });

// ------------------------
// ReactDOM Render
// ------------------------
const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <I18nextProvider i18n={i18n}>
      <HelmetProvider>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<App />} />
          </Route>

          <Route element={<ImageLayout />}>
            <Route path="/how-it-works" element={<HowItWorks />} />
          </Route>

          <Route element={<ImageLayout />}>
            <Route path="/services/branding-and-identity" element={<ServicesBrandingAndIdentity />} />
            <Route path="/services/social-media-creatives" element={<ServicesSocialMediaCreatives />} />
            <Route path="/services/marketing-and-ads" element={<ServicesMarketingAndAds />} />
            <Route path="/services/concept-design" element={<ServicesConceptDesign />} />
            <Route path="/services/illustration-design" element={<ServicesIllustrationDesign />} />
            <Route path="/services/content-production" element={<ServicesContentProduction />} />
            <Route path="/services/website-and-online-stores" element={<ServicesWebsiteAndOnlineStores />} />
          </Route>

          <Route element={<ImageLayout />}>
            <Route path="/pricing" element={<Pricing />} />
          </Route>

          <Route element={<ImageLayout />}>
            <Route path="/use-cases/marketing-agencies" element={<UseCaseMarketingAgencies />} />
            <Route path="/use-cases/online-stores" element={<UseCaseOnlineStore />} />
            <Route path="/use-cases/app-tech-startups" element={<UseCaseAppTechStartups />} />
            <Route path="/use-cases/coaches-consultants" element={<UseCaseCoachAndConsultant />} />
          </Route>

          <Route element={<Layout />}>
            <Route path="/blog" element={<BlogPage />} />
          </Route>

          <Route element={<ImageLayout />}>
            <Route path="/blog/:id" element={<BlogPageId />} />
            <Route path="/why-us" element={<AboutUs />} />
            <Route path="/our-platform" element={<OutPlatform />} />
            <Route path="/terms-and-conditions" element={<TermsAndConditions />} />
            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
            <Route path="/refund-policy" element={<RefundPolicy />} />
          </Route>

          <Route element={<Layout />}>
            <Route path="/contact" element={<ContactUs />} />
            <Route path="/bookdemo" element={<ScheduleConsultation />} />
          </Route>

        </Routes>
      </HelmetProvider>
    </I18nextProvider>
  </BrowserRouter>
);