import React, { Suspense, lazy, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { LanguageProvider } from '@/hooks/useLanguage';
import Header from '@/components/Header';
import Hero from '@/components/Hero';
import WhyChooseUs from '@/components/home/WhyChooseUs';
import ConcreteResults from '@/components/home/ConcreteResults';
import ServicesComponent from '@/components/Services';
import ClientsAndProjects from '@/components/home/ClientsAndProjects';
import CaseStudies from '@/components/CaseStudies';
import InternationalAgency from '@/components/home/InternationalAgency';
import TrainingExpertise from '@/components/home/TrainingExpertise';
import FreeAuditCTA from '@/components/home/FreeAuditCTA';
import Contact from '@/components/Contact';
import Footer from '@/components/Footer';
import CookieConsent from '@/components/CookieConsent';
import { Toaster } from 'sonner';

// Lazy load heavy components and pages
const EnhancedChatBot = lazy(() => import('@/components/EnhancedChatBot'));
const ServicesPage = lazy(() => import('@/pages/Services'));
const AuditPage = lazy(() => import('@/pages/AuditPage'));

// New 9 Service Pages
const GenerationDeLeads = lazy(() => import('@/pages/Services/GenerationDeLeads'));
const SEOReferencement = lazy(() => import('@/pages/Services/SEOReferencement'));
const PubliciteDigitale = lazy(() => import('@/pages/Services/PubliciteDigitale'));
const AutomatisationIA = lazy(() => import('@/pages/Services/AutomatisationIA'));
const CreationSiteWeb = lazy(() => import('@/pages/Services/CreationSiteWeb'));
const DeveloppementWeb = lazy(() => import('@/pages/Services/DeveloppementWeb'));
const SocialMedia = lazy(() => import('@/pages/Services/SocialMedia'));
const GraphicDesign = lazy(() => import('@/pages/Services/GraphicDesign'));
const StudioPhoto = lazy(() => import('@/pages/Services/StudioPhoto'));

// Legacy or specific service pages
const ServicesHub = lazy(() => import('@/pages/Services/ServicesHub'));
const AcquisitionCroissance = lazy(() => import('@/pages/Services/AcquisitionCroissance'));
const PlateformeIA = lazy(() => import('@/pages/Services/PlateformeIA'));
const ContenuVisibilite = lazy(() => import('@/pages/Services/ContenuVisibilite'));
const LeadsImmobilier = lazy(() => import('@/pages/Services/LeadsImmobilier'));
const ServiceDetail = lazy(() => import('@/pages/Services/ServiceDetail'));

const ContactPage = lazy(() => import('@/pages/Contact'));
const CookiePolicy = lazy(() => import('@/pages/CookiePolicy'));
const SettingsPage = lazy(() => import('@/components/SettingsPage'));
const AboutPage = lazy(() => import('@/pages/AboutPage'));
const PortfolioPage = lazy(() => import('@/pages/PortfolioPage'));
const TrainingPage = lazy(() => import('@/pages/TrainingPage'));
const RegionalPage = lazy(() => import('@/pages/RegionalPage'));
const IndustryPage = lazy(() => import('@/pages/IndustryPage'));

const LoadingFallback = () => (
  <div className="min-h-screen flex items-center justify-center bg-black text-orange-500">
    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-orange-500"></div>
  </div>
);

// Updated HomePage combining new and existing sections in requested order
function HomePage() {
  return (
    <>
      <Helmet>
        <title>Agence Marketing Digital & Automation | Génération de Leads & IA — Digital Doorway</title>
        <meta 
          name="description" 
          content="Digital Doorway accompagne entreprises et PME avec des stratégies de marketing digital, SEO, automatisation IA et génération de leads pour booster leur croissance et leur ROI." 
        />
      </Helmet>
      
      {/* 1. Hero (modified) */}
      <Hero />
      
      {/* 2. Pourquoi choisir Digital Doorway (new) */}
      <WhyChooseUs />
      
      {/* 3. Résultats concrets (new) */}
      <ConcreteResults />
      
      {/* 4 & 5. Solutions marketing digital & IA + Existing services cards */}
      <ServicesComponent /> 
      
      {/* 6. Nos clients & réalisations (new) */}
      <ClientsAndProjects />
      
      {/* 7. Case Studies (kept) */}
      <CaseStudies />
      
      {/* 8. Agence internationale (new) */}
      <InternationalAgency />
      
      {/* 9. Formations & expertise (new) */}
      <TrainingExpertise />
      
      {/* 10. Audit marketing gratuit CTA (new) */}
      <FreeAuditCTA />
      
      {/* 11. Contact (kept) */}
      <Contact />
    </>
  );
}

function AppContent() {
  useEffect(() => {
    try {
        performance.mark('app_render_end');
        performance.measure('app_render_time', 'app_render_start', 'app_render_end');
        const entries = performance.getEntriesByName('app_render_time');
        if (entries.length > 0) {
            console.log('App Critical Path Render Time:', entries[0].duration.toFixed(2), 'ms');
        }
    } catch (e) {
        console.error("Performance monitoring error:", e);
    }
  }, []);

  return (
    <>
      <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-4 focus:bg-orange-500 focus:text-white top-0 left-0">
        Aller au contenu principal
      </a>
      
      <Header />
      
      <main id="main-content" role="main" className="flex-grow">
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/portfolio" element={<PortfolioPage />} />
            <Route path="/training" element={<TrainingPage />} />
            <Route path="/regions/:city" element={<RegionalPage />} />
            <Route path="/industries/:industry" element={<IndustryPage />} />
            <Route path="/audit" element={<AuditPage />} />
            
            <Route path="/settings" element={<SettingsPage />} />
            <Route path="/contact" element={<ContactPage />} />
            <Route path="/cookie-policy" element={<CookiePolicy />} />

            {/* Services Hub Page */}
            <Route path="/services" element={<ServicesPage />} />

            {/* Core 9 Specific Service Pages */}
            <Route path="/services/generation-de-leads" element={<GenerationDeLeads />} />
            <Route path="/services/seo-referencement-naturel" element={<SEOReferencement />} />
            <Route path="/services/publicite-digitale" element={<PubliciteDigitale />} />
            <Route path="/services/automatisation-intelligence-artificielle" element={<AutomatisationIA />} />
            <Route path="/services/creation-site-web" element={<CreationSiteWeb />} />
            <Route path="/services/developpement-web" element={<DeveloppementWeb />} />
            <Route path="/services/social-media" element={<SocialMedia />} />
            <Route path="/services/graphic-design" element={<GraphicDesign />} />
            <Route path="/services/studio-photo" element={<StudioPhoto />} />

            {/* Other Specific Service Routes */}
            <Route path="/services/hub" element={<ServicesHub />} />
            <Route path="/services/acquisition-croissance" element={<AcquisitionCroissance />} />
            <Route path="/services/plateforme-ia" element={<PlateformeIA />} />
            <Route path="/services/contenu-visibilite" element={<ContenuVisibilite />} />
            <Route path="/services/leads-immobilier" element={<LeadsImmobilier />} />
            
            {/* Fallback Catch-all for services */}
            <Route path="/services/:slug" element={<ServiceDetail />} />
          </Routes>
        </Suspense>
      </main>

      <Suspense fallback={null}>
        <EnhancedChatBot />
      </Suspense>
      
      <Footer />
      <CookieConsent />
      <Toaster position="bottom-right" richColors />
    </>
  );
}

function App() {
  return (
    <LanguageProvider>
      <Helmet>
        <title>Digital Doorway — Agence marketing digital & automation</title>
        <meta 
          name="description" 
          content="Digital Doorway booste marques & entreprises : stratégie digitale, automation Odoo, agents IA, SEO local, social ads, contenu premium et création de trafic" 
        />
      </Helmet>
      <Router>
        <div className="flex flex-col min-h-screen bg-white">
          <AppContent />
        </div>
      </Router>
    </LanguageProvider>
  );
}

export default App;