import { Suspense } from "react";
import dynamic from "next/dynamic";
import { getDictionary } from "@/lib/dictionaries";
import { Hero } from "@/components/sections/Hero";
import { Features } from "@/components/sections/Features";
import { SpeedtestClient } from "@/components/sections/SpeedtestClient";

// Легкий скелетон для плавности
const SectionSkeleton = () => (
  <div className="h-[500px] w-full animate-pulse bg-card/20 rounded-3xl my-10" />
);

// Ленивая загрузка тяжелых секций
const Pricing = dynamic(
  () => import("@/components/sections/Pricing").then((mod) => mod.Pricing),
  {
    loading: () => <SectionSkeleton />,
  },
);
const FAQ = dynamic(
  () => import("@/components/sections/Faq").then((mod) => mod.FAQ),
  {
    loading: () => <SectionSkeleton />,
  },
);
const TerminalGuestbook = dynamic(
  () =>
    import("@/components/sections/TerminalGuestbook").then(
      (mod) => mod.TerminalGuestbook,
    ),
  {
    loading: () => <SectionSkeleton />,
  },
);
const BlogPreview = dynamic(() =>
  import("@/components/sections/BlogPreview").then((mod) => mod.BlogPreview),
);

export default async function Home({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const dict = await getDictionary(lang);

  return (
    <>
      <Hero dict={dict.hero} lang={lang} />
      <Features dict={dict.features} />
      <Pricing dict={dict.pricing} lang={lang} />
      <FAQ dict={dict.faq} lang={lang} />
      <TerminalGuestbook dict={dict.guestbook} />
      <SpeedtestClient />
      <Suspense fallback={<SectionSkeleton />}>
        <BlogPreview lang={lang} dict={dict.blog} />
      </Suspense>
    </>
  );
}