import dynamic from "next/dynamic";
import Navbar from "@/components/Navbar";
import Hero from "@/components/Hero";
import TrustedBy from "@/components/TrustedBy";
import About from "@/components/About";
import Footer from "@/components/Footer";

// ─── Below-fold: lazy-loaded to reduce initial JS ───
// const AboutLeaders = dynamic(() => import("@/components/AboutLeaders"));
const Services = dynamic(() => import("@/components/Services"));
const StrategicThinking = dynamic(() => import("@/components/StrategicThinking"));
const Portfolio = dynamic(() => import("@/components/Portfolio"));
const Pricing = dynamic(() => import("@/components/Pricing"));
const Testimonials = dynamic(() => import("@/components/Testimonials"));
const Contact = dynamic(() => import("@/components/Contact"));

// ─── GSAP: animations-only client component, off the critical path ───
const GsapAnimations = dynamic(() => import("@/components/GsapAnimations"));

export default function Home() {
  return (
    <>
      <Navbar />
      <Hero />
      <TrustedBy />
      <About />
      {/* <div className="min-h-[400px]">
        <AboutLeaders />
      </div> */}
      <div className="min-h-[600px]">
        <Services />
      </div>
      <div className="min-h-[300px]">
        <StrategicThinking />
      </div>
      <div className="min-h-[500px]">
        <Portfolio />
      </div>
      <div className="min-h-[500px]">
        <Pricing />
      </div>
      <div className="min-h-[400px]">
        <Testimonials />
      </div>
      <div className="min-h-[500px]">
        <Contact />
      </div>
      <Footer />
      {/* GSAP animations loaded LAST — after all visible content */}
      <GsapAnimations />
    </>
  );
}
