"use client";
import { useState, useEffect } from "react";
import Layout from "@/components/layout/Layout";
import Banner from "@/components/sections/home2/Banner";
import Features from "@/components/sections/home2/Features";
import Testimonial from "@/components/sections/home1/Testimonial";
import Video from "@/components/sections/home1/Video";
import Solution from "@/components/sections/home2/Solution";
import AboutSection from "@/components/sections/home/AboutSection";
import ServicesSection from "@/components/sections/home/ServicesSection";
import WhyChooseUsSection from "@/components/sections/home/WhyChooseusSection";
import CounterSection from "@/components/sections/home/CounterSection";
import FaqSection from "@/components/sections/home/FaqSection";
import AreaOfInjury from "@/components/sections/home/AreaOfInjury";
import MobileServices from "@/components/sections/home/MobileServicesSection";
import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard";
import MobileBanner from "@/components/sections/home2/MobileBanner";

// export const metadata = {
//   title: "Best Pain Relief & Physiotherapy – Rapharehab Clinic",
//   description:
//     "Rapharehab offers trusted physiotherapy and pain relief treatments with professional care tailored to restore your health and mobility.",
// };

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

  useEffect(() => {
    // Run 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 */}
      <section style={{ minHeight: "100vh", position: "relative" }}>
        {isMobile ? <MobileBanner /> : <Banner />}
      </section>

      <AboutSection />

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

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