"use client";

import { useState, useEffect } from "react";
import Banner from "@/components/sections/home2/Banner";
import MobileBanner from "@/components/sections/home2/MobileBanner";
import ServicesSection from "@/components/sections/home/ServicesSection";
import MobileServices from "@/components/sections/home/MobileServicesSection";

export function HomeBannerSwitch() {
  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 isMobile ? <MobileBanner /> : <Banner />;
}

export function HomeServicesSwitch() {
  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 isMobile ? <MobileServices /> : <ServicesSection />;
}