import { PageSeo } from "@/components/PageSeo";
import { HeroSection } from "@/components/HeroSection";
import { SocialProofBar } from "@/components/SocialProofBar";
import { GuaranteeStrip } from "@/components/GuaranteeStrip";
import { SectionNav } from "@/components/SectionNav";
import { ScrollProgressBar } from "@/components/ScrollProgressBar";
import { Footer } from "@/components/Footer";
import { ExitIntentPopup } from "@/components/ExitIntentPopup";
import { PersistentCTA } from "@/components/PersistentCTA";
import { MacaChatWidget } from "@/components/MacaChatWidget";
import { Suspense } from "react";
import { lazyWithRetry } from "@/lib/lazyWithRetry";

const BenefitsSection = lazyWithRetry(() => import("@/components/BenefitsSection").then(module => ({ default: module.BenefitsSection })));
const ClinicianReviewsHeader = lazyWithRetry(() => import("@/components/ClinicianReviewsHeader").then(module => ({ default: module.ClinicianReviewsHeader })));
const ClinicianEvaluations = lazyWithRetry(() => import("@/components/ClinicianEvaluations").then(module => ({ default: module.ClinicianEvaluations })));
const TestimonialMarquee = lazyWithRetry(() => import("@/components/TestimonialMarquee").then(module => ({ default: module.TestimonialMarquee })));
const FeaturedReviews = lazyWithRetry(() => import("@/components/FeaturedReviews").then(module => ({ default: module.FeaturedReviews })));
const RarityCallout = lazyWithRetry(() => import("@/components/RarityCallout").then(module => ({ default: module.RarityCallout })));
const FAQSection = lazyWithRetry(() => import("@/components/FAQSection").then(module => ({ default: module.FAQSection })));
const BundleSelector = lazyWithRetry(() => import("@/components/BundleSelector").then(module => ({ default: module.BundleSelector })));
const ReviewsSection = lazyWithRetry(() => import("@/components/ReviewsSection").then(module => ({ default: module.ReviewsSection })));
const TrustSafetySection = lazyWithRetry(() => import("@/components/TrustSafetySection").then(module => ({ default: module.TrustSafetySection })));
const UsVsThemSection = lazyWithRetry(() => import("@/components/UsVsThemSection").then(module => ({ default: module.UsVsThemSection })));
const BBLComparisonSection = lazyWithRetry(() => import("@/components/BBLComparisonSection").then(module => ({ default: module.BBLComparisonSection })));

const Index = () => {
  return (
    <div className="min-h-screen" id="page-root">
      <PageSeo
        title="Tri-Color Maca — The Natural Curve Builder | Everybody's Juice"
        description="Tri-Color Maca supports lean muscle, hormone balance, and natural curves. Free shipping on every order."
        path="/"
      />
      <ScrollProgressBar />
      <SectionNav />
      <ExitIntentPopup />
      <PersistentCTA />
      <MacaChatWidget />
      
      {/* 0. Top guarantee strip */}
      <GuaranteeStrip />

      {/* 1. Hero */}
      <HeroSection />

      {/* 2. Social Proof Bar */}
      <SocialProofBar />

      {/* 3. Primary Pricing — front-loaded buy box */}
      <Suspense fallback={<div className="py-20 bg-background" />}>
        <section id="pricing-section" className="py-20 bg-background">
          <div className="container mx-auto px-6">
            <BundleSelector variant="clinical" />
          </div>
        </section>
      </Suspense>

      {/* 4. Clinician Reviews header */}
      <Suspense fallback={<div className="py-10" />}>
        <ClinicianReviewsHeader />
      </Suspense>

      {/* 4a. Independent Clinician Evaluations */}
      <Suspense fallback={<div className="py-20 bg-background" />}>
        <ClinicianEvaluations />
      </Suspense>

      {/* 4. Before/After Carousel — front-loaded social proof */}
      <Suspense fallback={<div className="py-20 bg-gradient-editorial" />}>
        <TestimonialMarquee />
      </Suspense>

      {/* 5a. Benefits 01-02 (emotional peak) */}
      <Suspense fallback={<div className="py-20 bg-gradient-editorial" />}>
        <div id="benefits">
          <BenefitsSection range={[0, 2]} />
        </div>
      </Suspense>

      {/* 5b. Benefits 03-05 (for those who need more convincing) */}
      <Suspense fallback={<div className="py-20 bg-gradient-editorial" />}>
        <BenefitsSection range={[2, 5]} showHeader={false} />
      </Suspense>

      {/* 4. Featured Reviews — 3 photo-led written reviews */}
      <Suspense fallback={<div className="py-20 bg-background" />}>
        <FeaturedReviews />
      </Suspense>

      {/* 6. Rarity Callout */}
      <Suspense fallback={<div className="py-12 bg-card" />}>
        <RarityCallout />
      </Suspense>

      {/* 7. FAQ (Objection Handling) */}
      <Suspense fallback={<div className="py-20 bg-gradient-editorial" />}>
        <div id="faq">
          <FAQSection />
        </div>
      </Suspense>

      {/* 8. Reviews */}
      <Suspense fallback={<div className="py-20 bg-background" />}>
        <ReviewsSection />
      </Suspense>

      {/* 9. Second Pricing — for readers who scroll all the way */}
      <Suspense fallback={<div className="py-20 bg-background" />}>
        <div className="mb-16">
          <UsVsThemSection />
        </div>
      </Suspense>

      <Suspense fallback={<div className="py-20 bg-background" />}>
        <BBLComparisonSection />
      </Suspense>

      <Suspense fallback={<div className="py-20 bg-background" />}>
        <section id="pricing-section-bottom" className="py-20 bg-background">
          <div className="container mx-auto px-6">
            <BundleSelector />
          </div>
        </section>
      </Suspense>

      {/* Trust & Safety + Us vs Them (kept for depth) */}
      <Suspense fallback={<div className="py-20 bg-muted/30" />}>
        <div id="safety">
          <TrustSafetySection />
        </div>
      </Suspense>

      {/* 9. Footer */}
      <Footer />
    </div>
  );
};

export default Index;