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";

const SectionSkeleton = () => (
  <div className="h-[500px] w-full animate-pulse bg-card/20 rounded-3xl my-10" />
);

// Тяжёлые интерактивные секции (framer-motion анимации, клиентские запросы к PocketBase,
// realtime-подписки) грузятся через next/dynamic, а не обычным import, чтобы не раздувать
// первый JS-бандл главной страницы: Hero и Features рендерятся сразу (статично, легче),
// а Pricing/FAQ/TerminalGuestbook/BlogPreview подгружаются отдельными чанками с плейсхолдером
// SectionSkeleton, пока грузится JS.
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} />

      <Suspense fallback={<SectionSkeleton />}>
        <BlogPreview lang={lang} dict={dict.blog} />
      </Suspense>
    </>
  );
}