"use client";

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";

// ✅ Banner components — immediate load (important for FCP)
import Banner from "@/components/sections/home2/Banner";
import MobileBanner from "@/components/sections/home2/MobileBanner";

// ✅ Lazy load all other sections (FCP/LCP performance boost)
const AboutSection = dynamic(() => import("@/components/sections/home/AboutSection"), { ssr: false });
const ServicesSection = dynamic(() => import("@/components/sections/home/ServicesSection"), { ssr: false });
const MobileServices = dynamic(() => import("@/components/sections/home/MobileServicesSection"), { ssr: false });
const MobileFeatureCard = dynamic(() => import("@/components/sections/home/MobileFeatureCard"), { ssr: false });
const Features = dynamic(() => import("@/components/sections/home2/Features"), { ssr: false });
const FaqSection = dynamic(() => import("@/components/sections/home/FaqSection"), { ssr: false });
const AreaOfInjury = dynamic(() => import("@/components/sections/home/AreaOfInjury"), { ssr: false });
const WhyChooseUsSection = dynamic(() => import("@/components/sections/home/WhyChooseusSection"), { ssr: false });
const CounterSection = dynamic(() => import("@/components/sections/home/CounterSection"), { ssr: false });
const Testimonial = dynamic(() => import("@/components/sections/home1/Testimonial"), { ssr: false });
const Solution = dynamic(() => import("@/components/sections/home2/Solution"), { ssr: false });
const Video = dynamic(() => import("@/components/sections/home1/Video"), { ssr: false });

export default function Home() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // ✅ Detect mobile screen only in browser
    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  return (
    <Layout headerStyle={2} footerStyle={2}>
      {/* ✅ Prevent layout shift for banner */}
      <section style={{ minHeight: "100vh", position: "relative" }}>
        {isMobile ? <MobileBanner /> : <Banner />}
      </section>

      {/* ✅ Lazy loaded sections — improve Lighthouse performance */}
      <AboutSection />

      {isMobile ? <MobileServices /> : <ServicesSection />}

      <MobileFeatureCard />
      <Features />
      <FaqSection />
      <AreaOfInjury />
      <WhyChooseUsSection />
      <CounterSection />
      <Testimonial />
      <Solution />
      <Video />
    </Layout>
  );
}