import { Route, Routes, useNavigate } from "react-router-dom";
import { OurExpertise } from "./components/about/OurExpertise";
import { OurImpact } from "./components/about/OurImpact";
import { OurVision } from "./components/about/OurVision";
import { AIChatbot } from "./components/AIChatbot";
import { Articles } from "./components/Articles";
import { AuthProvider } from "./components/AuthContext";
import { BlogDetail } from "./components/BlogDetail";
import { Blogs } from "./components/Blogs";
import { Cart } from "./components/Cart";
import { CartProvider } from "./components/CartContext";
import { Contact } from "./components/Contact";
import { CorporateSignIn } from "./components/CorporateSignIn";
import { CorporateSignUp } from "./components/CorporateSignUp";
import { Footer } from "./components/Footer";
import { LeadershipJourneyPage } from "./components/LeadershipJourneyPage";
import { LearningOnline } from "./components/LearningOnline";
import { Navigation } from "./components/Navigation";
import { ProgrammeDetail } from "./components/ProgrammeDetail";
import { SelfLearnerSignIn } from "./components/SelfLearnerSignIn";
import { SelfLearnerSignUp } from "./components/SelfLearnerSignUp";
import { Consulting } from "./components/services/Consulting";
import { CultureCompetence } from "./components/services/CultureCompetence";
import { ExecutiveCoaching } from "./components/services/ExecutiveCoaching";
import { LearningFacility } from "./components/services/LearningFacility";
import { ManagementDevelopment } from "./components/services/ManagementDevelopment";
import { Terms } from "./components/Terms";
import { Webinars } from "./components/Webinars";
import WebinarsListing from "./components/WebinarsListing";
import { WebinarsPage } from "./components/WebinarsPage";
import HomePage from './pages/HomePage';
import { AboutUs } from './components/AboutUs';
import { Services } from './components/Services';
import { LearningFacilityNew } from './components/LearningFacilityNew';
import HomePageNew from './pages/HomePageNew';
import { FooterNew } from './components/FooterNew';
import { Privacy } from "./pages/Privacy";
import { TermsCondition } from "./pages/TermsCondition";
import { FAQ } from "./pages/FAQ";
import { LeadershipPipelineDevelopment } from "./components/services/LeadershipPipelineDevelopment";
import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment";
// import EnrollPlaceholder from "./components/EnrollPlaceholder";
// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder";
// import DashboardPlaceholder from "./components/DashboardPlaceholder";
// import CheckoutPlaceholder from "./components/CheckoutPlaceholder";
// import HomePage from "./components/HomePage";

export default function App() {
  return (
    <AuthProvider>
      <CartProvider>
        <div
          className="min-h-screen main-content"
          style={{ backgroundColor: '#FFFFFF' }}
        >

          <Navigation />
          <Routes>
            {/* Home Page */}
            <Route path="/" element={<HomePage />} />
            {/* Leadership Journey */}
            <Route path="/leadership-journey" element={<LeadershipJourneyPage />} />

            {/* Services Pages */}
            <Route path="/services/leadership-pipeline-development" element={<LeadershipPipelineDevelopment />} />
            <Route path="/services/leadership-development" element={<LeadershipDevelopment />} />
            <Route path="/services/consulting" element={<Consulting />} />
            <Route path="/services/culture-competence" element={<CultureCompetence />} />
            <Route path="/services/executive-coaching" element={<ExecutiveCoaching />} />
            <Route path="/services/management-development" element={<ManagementDevelopment />} />
            <Route path="/services/learning-facility" element={<LearningFacility />} />
            <Route path="/services" element={<Services />} />

            {/* About Us Pages */}
            <Route path="/about/our-vision" element={<OurVision />} />
            <Route path="/about/our-expertise" element={<OurExpertise />} />
            <Route path="/about/our-impact" element={<OurImpact />} />
            <Route path="/about-us" element={<AboutUs />} />

            {/* Learning Pages */}
            <Route path="/learning/articles" element={<Articles />} />
            <Route path="/learning/blogs" element={<Blogs />} />
            <Route path="/learning/webcast" element={<Webinars />} />

            {/* Webinars Pages */}
            <Route path="/webinars" element={<WebinarsPage />} />
            <Route path="/webinars-legacy" element={<WebinarsListing />} />

            {/* Learning Online */}
            <Route path="/learning-online" element={<LearningOnline />} />

            {/* Terms & Conditions */}
            <Route path="/terms" element={<Terms />} />

            {/* Cart */}
            <Route path="/cart" element={<Cart />} />

            {/* Authentication Pages */}
            <Route path="/corporate-login" element={<CorporateSignIn />} />
            <Route path="/self-learner-signin" element={<SelfLearnerSignIn />} />
            <Route path="/signin/self-learner" element={<SelfLearnerSignIn />} />
            <Route path="/corporate-signup" element={<CorporateSignUp />} />
            <Route path="/self-learner-signup" element={<SelfLearnerSignUp />} />

            {/* Contact Page */}
            <Route path="/contact" element={<Contact />} />

            {/* Dynamic Routes */}
            <Route path="/learning/articles/:slug" element={<BlogDetail />} />
            <Route path="/learning/blogs/:slug" element={<BlogDetail />} />
            {/* <Route path="/learning/webcast/:slug" element={<WebinarDetail />} />
            <Route path="/webinar/:slug" element={<WebinarDetail />} /> */}
            <Route path="/course/:slug" element={<ProgrammeDetail />} />
            <Route path="/programme/:slug" element={<ProgrammeDetail />} />

            {/* Learning Facility */}
            <Route path="/learning-facility" element={<LearningFacilityNew />} />
            {/* Privacy policy  */}
            <Route path="/privacy-policy" element={<Privacy />} />
            <Route path="/term-condition" element={<TermsCondition />} />
            <Route path="/faq" element={<FAQ />} />

            {/* Placeholder Pages */}
            {/* <Route path="/enroll" element={<EnrollPlaceholder />} />
            <Route path="/forgot-password" element={<ForgotPasswordPlaceholder />} />
            <Route path="/dashboard" element={<DashboardPlaceholder />} />
            <Route path="/checkout" element={<CheckoutPlaceholder />} /> */}

            {/* 404 Page */}
            <Route path="*" element={<NotFound />} />
          </Routes>

          <FooterNew />

          {/* Add AIChatbot to all pages */}
          <AIChatbot />
        </div>
      </CartProvider>
    </AuthProvider>
  );
}

// 404 Not Found Component
function NotFound() {
  const navigate = useNavigate();
  return (
    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#FFFFFF' }}>
      <div className="text-center">
        <h1 className="text-h2 mb-4">Page Not Found</h1>
        <p className="text-body-lg text-muted mb-8">
          The page you're looking for doesn't exist.
        </p>
        <div className="flex items-center justify-center">
          <button
            onClick={() => navigate('/')}
            className="brand-button-system"
          >
            Back to Home
          </button>
        </div>
      </div>
    </div>
  );
}