import {
  ContactSection,
  DownloadAppSection,
  FreeRecommendationSection,
  HeroSection,
  PartnersSection,
  ProfitSection,
} from "@/features/home/ui";
import { getCompilation } from "@/shared/api/compilationsSvc";
import ProductsSection from "@/features/category-details/ui/products-section";
import SectionsSection from "@/features/home/ui/sections-section";
import { getBrands } from "@/shared/api/brandsSvc";

const Page = async () => {
  const { data } = await getCompilation();
  const { data: partners } = await getBrands();

  return (
    <div>
      <HeroSection />
      <SectionsSection />
      {data.map((section) => (
        <div
          key={section.id}
          className={"my-container section-wrapper px-4 md:px-0"}
        >
          <h1 className={"section-title"}>{section.title}</h1>
          <ProductsSection products={section.products} />
        </div>
      ))}
      <FreeRecommendationSection />
      <ProfitSection />
      <PartnersSection partners={partners} />
      <ContactSection />
      <DownloadAppSection />
    </div>
  );
};

export default Page;
