import { StrictMode, lazy, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './index.css'
import App from './App.tsx'
import ThinkbeatApp from './ThinkbeatApp.tsx';
import { VcardProvider } from './context/VcardContext';
import { AuthProvider } from './context/AuthContext';

import Layout from './intro/components/Layout/Layout';
import {
  HomeSkeleton,
  AboutSkeleton,
  ContactSkeleton,
  FeaturesSkeleton,
  SampleSkeleton,
  FAQSkeleton,
  SearchSkeleton,
  RegisterSkeleton,
} from './intro/components/ui/skeletons';

const Home             = lazy(() => import('./intro/pages/Home'));
const About            = lazy(() => import('./intro/pages/About'));
const Contact          = lazy(() => import('./intro/pages/Contact'));
const RegisterBusiness = lazy(() => import('./intro/pages/RegisterBusiness'));
const SearchResults    = lazy(() => import('./intro/pages/SearchResults'));
const Features         = lazy(() => import('./intro/pages/Features'));
const Sample           = lazy(() => import('./intro/pages/Sample'));
const FAQ              = lazy(() => import('./intro/pages/FAQ'));

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AuthProvider>
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <Routes>
          {/* Intro Routes */}
          <Route path="/" element={<Layout />}>
            <Route index element={<Suspense fallback={<HomeSkeleton />}><Home /></Suspense>} />
            <Route path="about" element={<Suspense fallback={<AboutSkeleton />}><About /></Suspense>} />
            <Route path="contact" element={<Suspense fallback={<ContactSkeleton />}><Contact /></Suspense>} />
            <Route path="register-business" element={<Suspense fallback={<RegisterSkeleton />}><RegisterBusiness /></Suspense>} />
            <Route path="search" element={<Suspense fallback={<SearchSkeleton />}><SearchResults /></Suspense>} />
            <Route path="features" element={<Suspense fallback={<FeaturesSkeleton />}><Features /></Suspense>} />
            <Route path="sample" element={<Suspense fallback={<SampleSkeleton />}><Sample /></Suspense>} />
            <Route path="faq" element={<Suspense fallback={<FAQSkeleton />}><FAQ /></Suspense>} />
          </Route>

          {/* Thinkbeat dedicated template */}
          <Route path="/thinkbeat/*" element={<VcardProvider aliasProp="thinkbeat"><ThinkbeatApp /></VcardProvider>} />                 
                    
          {/* Default template for all other slugs */}
          <Route path="/:slug/*" element={<VcardProvider><App /></VcardProvider>} />
          
          {/* Home Route fallback when there's no slug - removing this since Intro handles / now, but keeping just in case */}
          <Route path="/*" element={<VcardProvider><App /></VcardProvider>} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  </StrictMode>,
)