import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useEffect, Suspense, lazy } from "react";
import SEO from "./components/SEO";
import PerformanceMonitor from "./components/PerformanceMonitor";
import { CookieBanner } from "./components/CookieBanner";

// Lazy load pages for better performance and code splitting
const Index = lazy(() => import("./pages/Index"));
const About = lazy(() => import("./pages/About"));
const Services = lazy(() => import("./pages/Services"));
const Portfolio = lazy(() => import("./pages/Portfolio"));
const HighConversionLandingPageCaseStudy = lazy(() => import("./pages/HighConversionLandingPageCaseStudy"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const CookiePolicy = lazy(() => import("./pages/CookiePolicy"));

const NotFound = lazy(() => import("./pages/NotFound"));

const queryClient = new QueryClient();

const App = () => {
  // Set dark mode and update body class
  useEffect(() => {
    document.documentElement.classList.add('dark');
    document.body.classList.add('animated-bg');
    
    // Update favicon dynamically based on device theme
    const favicon = document.querySelector('link[rel="icon"]');
    if (favicon) {
      favicon.setAttribute('href', '/lovable-uploads/c86b2fb1-fc54-440e-82d3-d326190794cf.png');
    }
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <PerformanceMonitor />
      <TooltipProvider>
        <Toaster />
        <Sonner />
        <CookieBanner />
        <BrowserRouter>
          <SEO 
            defaultTitle="DXO Visuals - AI Chatbots & WordPress Development"
            defaultDescription="Professional AI chatbots, WordPress development and SEO services by DXO Visuals."
            defaultFocusKeyphrase="AI chatbots WordPress development"
          />
          <Suspense fallback={
            <div className="min-h-screen bg-gray-900 flex items-center justify-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#9B5CFF]"></div>
            </div>
          }>
            <Routes>
              <Route path="/" element={<Index />} />
              <Route path="/about" element={<About />} />
              <Route path="/services" element={<Services />} />
              <Route path="/portfolio" element={<Portfolio />} />
              <Route path="/portfolio/high-conversion-landing-page-music-artist" element={<HighConversionLandingPageCaseStudy />} />
              <Route path="/privacy-policy" element={<PrivacyPolicy />} />
              <Route path="/cookie-policy" element={<CookiePolicy />} />
              
              <Route path="*" element={<NotFound />} />
            </Routes>
          </Suspense>
        </BrowserRouter>
      </TooltipProvider>
    </QueryClientProvider>
  );
};

export default App;