"use client";

import { Suspense, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import dynamic from 'next/dynamic';
import { HeroSection } from "@/components/sections/hero-section";
import { SectionSkeleton } from "@/components/ui/loading-skeleton";

const ServicesSection = dynamic(
  () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
  { 
    loading: () => <SectionSkeleton />,
    ssr: false 
  }
);

const ProductsSection = dynamic(
  () => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })),
  { 
    loading: () => <SectionSkeleton />,
    ssr: false 
  }
);

const CasesSection = dynamic(
  () => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })),
  { 
    loading: () => <SectionSkeleton />,
    ssr: false 
  }
);

const AboutSection = dynamic(
  () => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
  { 
    loading: () => <SectionSkeleton />,
    ssr: false 
  }
);

const NewsSection = dynamic(
  () => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })),
  { 
    loading: () => <SectionSkeleton />,
    ssr: false 
  }
);

function HomeContent() {
  const searchParams = useSearchParams();
  
  useEffect(() => {
    const section = searchParams.get('section');
    if (section) {
      const timer = setTimeout(() => {
        const targetElement = document.getElementById(section);
        if (targetElement) {
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }, 100);
      
      return () => clearTimeout(timer);
    }
    return undefined;
  }, [searchParams]);
  
  return (
    <main className="min-h-screen bg-white dark:bg-(--color-bg-primary)">
      <HeroSection />
      <ServicesSection />
      <ProductsSection />
      <CasesSection />
      <AboutSection />
      <NewsSection />
    </main>
  );
}

export default function HomePage() {
  return (
    <Suspense fallback={<SectionSkeleton />}>
      <HomeContent />
    </Suspense>
  );
}