import { Routes, Route, BrowserRouter } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import { Toaster } from 'sonner';
import { ScrollToTop } from './components/ScrollToTop';
import { CookieBanner } from './components/CookieBanner';

// Lazy loading для всех страниц
const HomePage = lazy(() => import('./pages/HomePage'));
const QuizPage = lazy(() => import('./pages/QuizPage'));
const MoneyCalculatorPage = lazy(() => import('./pages/MoneyCalculatorPage'));
const TimeCalculatorPage = lazy(() => import('./pages/TimeCalculatorPage'));
const ChildPage = lazy(() => import('./pages/ChildPage'));
const ParentPage = lazy(() => import('./pages/ParentPage'));
const AdultPage = lazy(() => import('./pages/AdultPage'));
const MemorandumPage = lazy(() => import('./pages/MemorandumPage'));
const StoriesPage = lazy(() => import('./pages/StoriesPage'));
const VideosPage = lazy(() => import('./pages/VideosPage'));
const StoryPage = lazy(() => import('./pages/StoryPage'));
const BlogPage = lazy(() => import('./pages/BlogPage'));
const ArticlePage = lazy(() => import('./pages/ArticlePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const DonatePage = lazy(() => import('./pages/DonatePage'));
const ContactsPage = lazy(() => import('./pages/ContactsPage'));
const CardsPage = lazy(() => import('./pages/CardsPage'));
const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
const PolicyPage = lazy(() => import('./pages/PolicyPage'));
const TermsPage = lazy(() => import('./pages/TermsPage'));
const TagSearchPage = lazy(() => import('./pages/TagSearchPage'));
const CookiesPage = lazy(() => import('./pages/CookiesPage'));
const AdminPage = lazy(() => import('./pages/AdminPage'));

// Компонент загрузки
const PageLoader = () => (
  <div className="min-h-screen flex items-center justify-center">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600"></div>
  </div>
);

export default function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <div className="min-h-screen flex flex-col bg-[#FDFBF7] text-slate-800 font-sans selection:bg-orange-200 selection:text-orange-900">
        <Header />
        <main className="flex-1">
          <Suspense fallback={<PageLoader />}>
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/quiz/:role" element={<QuizPage />} />
              <Route path="/calculator/money" element={<MoneyCalculatorPage />} />
              <Route path="/calculator/time" element={<TimeCalculatorPage />} />
              <Route path="/child" element={<ChildPage />} />
              <Route path="/parent" element={<ParentPage />} />
              <Route path="/adult" element={<AdultPage />} />
              <Route path="/memorandum" element={<MemorandumPage />} />
              <Route path="/stories" element={<StoriesPage />} />
              <Route path="/stories/:id" element={<StoryPage />} />
              <Route path="/videos" element={<VideosPage />} />
              <Route path="/blog" element={<BlogPage />} />
              <Route path="/blog/:id" element={<ArticlePage />} />
              <Route path="/about" element={<AboutPage />} />
              <Route path="/donate" element={<DonatePage />} />
              <Route path="/contacts" element={<ContactsPage />} />
              <Route path="/cards" element={<CardsPage />} />
              <Route path="/policy" element={<PolicyPage />} />
              <Route path="/terms" element={<TermsPage />} />
              <Route path="/cookies" element={<CookiesPage />} />
              <Route path="/tags/:tag" element={<TagSearchPage />} />
              <Route path="/admin" element={<AdminPage />} />
              <Route path="*" element={<NotFoundPage />} />
            </Routes>
          </Suspense>
        </main>
        <Footer />
        <Toaster position="top-center" />
        <CookieBanner />
      </div>
    </BrowserRouter>
  );
}