import { useEffect } from 'react';
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, useLocation } from "react-router-dom";
import { HelmetProvider } from 'react-helmet-async';
import Index from "./pages/Index";
import Services from "./pages/Services";
import ServiceDetail from "./pages/ServiceDetail";
import StrategicLaunchpad from "./pages/StrategicLaunchpad";
import ScalingBlueprint from "./pages/ScalingBlueprint";
import ProductCommand from "./pages/ProductCommand";
import InsightDrivenDesign from "./pages/InsightDrivenDesign";
import About from "./pages/About";
import Contact from "./pages/Contact";
import CaseStudies from "./pages/CaseStudies";
import BetterDronesCase from "./pages/BetterDronesCase";
import RdactdCase from "./pages/RdactdCase";
import PurcheCase from "./pages/PurcheCase";
import PrivacyPolicy from "./pages/PrivacyPolicy";
import TermsOfService from "./pages/TermsOfService";
import CookiePolicy from "./pages/CookiePolicy";
import NotFound from "./pages/NotFound";
import WhatsAppButton from "./components/WhatsAppButton";

// Optimized query client with aggressive caching
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 10, // 10 minutes
      gcTime: 1000 * 60 * 30, // 30 minutes
      retry: 1,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
    },
  },
});

// Optimized scroll to top component
const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    // Use requestAnimationFrame for smoother scrolling
    requestAnimationFrame(() => {
      window.scrollTo(0, 0);
    });
  }, [pathname]);

  return null;
};

const App = () => {
  // Preload critical resources
  useEffect(() => {
    // Preload hero image
    const heroImg = new Image();
    heroImg.src = '/lovable-uploads/634a786f-f75b-4992-a24b-0b3abe90a675.png';
    
    // Preload mobile hero image
    const mobileHeroImg = new Image();
    mobileHeroImg.src = '/lovable-uploads/2c5665b9-8aaf-4700-a05a-6e8c7c2a53e8.png';
  }, []);

  return (
    <HelmetProvider>
      <QueryClientProvider client={queryClient}>
        <TooltipProvider>
          <Toaster />
          <Sonner />
          
          <BrowserRouter>
            <ScrollToTop />
            <div className="relative gpu-accelerated">
              <Routes>
                <Route path="/" element={<Index />} />
                <Route path="/services" element={<Services />} />
                <Route path="/service/:serviceId" element={<ServiceDetail />} />
                <Route path="/services/strategic-launchpad" element={<StrategicLaunchpad />} />
                <Route path="/services/scaling-blueprint" element={<ScalingBlueprint />} />
                <Route path="/services/product-command" element={<ProductCommand />} />
                <Route path="/services/insight-driven-design" element={<InsightDrivenDesign />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/case-studies" element={<CaseStudies />} />
                <Route path="/case-studies/better-drones" element={<BetterDronesCase />} />
                <Route path="/case-studies/rdactd" element={<RdactdCase />} />
                <Route path="/case-studies/purche" element={<PurcheCase />} />
                <Route path="/privacy-policy" element={<PrivacyPolicy />} />
                <Route path="/terms-of-service" element={<TermsOfService />} />
                <Route path="/cookie-policy" element={<CookiePolicy />} />
                <Route path="*" element={<NotFound />} />
              </Routes>
              <WhatsAppButton />
            </div>
          </BrowserRouter>
        </TooltipProvider>
      </QueryClientProvider>
    </HelmetProvider>
  );
};

export default App;