"use client";

import dynamic from "next/dynamic";
import { useEffect } from "react";
import { handleInitialScroll } from "@/lib/navigation";
import HeroSection from "./HeroSection";

// Lazy-load below-the-fold sections to reduce initial JS bundle size.
const BoldProductsSection = dynamic(() => import("./BoldProductsSection"), { ssr: true });
const WattsSection = dynamic(() => import("./WattsSection"), { ssr: true });
const AboutSection = dynamic(() => import("./AboutSection"), { ssr: true });
const ServicesSection = dynamic(() => import("./ServicesSection"), { ssr: true });
const LatestProjectsSection = dynamic(() => import("./LatestProjectsSection"), { ssr: true });
const ContactUsSection = dynamic(() => import("./ContactUsSection"), { ssr: true });

export default function Home() {
  useEffect(() => {
    handleInitialScroll();
  }, []);

  return (
    <main id="main-content" aria-label="Homepage main content">
      <div className="bg-gray-900 text-white">
        <HeroSection />
        <BoldProductsSection />
        <WattsSection />
        <AboutSection />
        <ServicesSection />
        <LatestProjectsSection />
        <ContactUsSection />
      </div>
    </main>
  );
}
