import React, { Suspense, lazy } from "react";
import { Route, Routes } from "react-router-dom";
import MarketingLayout from "./layout/MarketingLayout";
import LoadingPage from "./components/LoadingPage";
import { ScrollToTop } from "../components/common/ScrollToTop";

const Home = lazy(() => import("./pages/Home"));
const Product = lazy(() => import("./pages/Product"));
const Solutions = lazy(() => import("./pages/Solutions"));
const Pricing = lazy(() => import("./pages/Pricing"));
const Tour = lazy(() => import("./pages/Tour"));
const Resources = lazy(() => import("./pages/Resources"));
const CaseStudies = lazy(() => import("./pages/CaseStudies"));
const Partners = lazy(() => import("./pages/Partners"));
const Contact = lazy(() => import("./pages/Contact"));
const Waitlist = lazy(() => import("./pages/Waitlist"));
const Upcoming = lazy(() => import("./pages/Upcoming"));

const MarketingApp: React.FC = () => {
  return (
    <MarketingLayout>
      <ScrollToTop />
      <Suspense fallback={<LoadingPage />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/product" element={<Product />} />
          <Route path="/solutions" element={<Solutions />} />
          <Route path="/pricing" element={<Pricing />} />
          <Route path="/tour" element={<Tour />} />
          <Route path="/resources" element={<Resources />} />
          <Route path="/case-studies" element={<CaseStudies />} />
          <Route path="/partners" element={<Partners />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/waitlist" element={<Waitlist />} />
          <Route path="/upcoming" element={<Upcoming />} />
        </Routes>
      </Suspense>
    </MarketingLayout>
  );
};

export default MarketingApp;