import ContactCtaSection from "@/app/home/components/ContactCtaSection";
import CategoryFilters from "./components/CategoryFilters";
import CategoryHero from "./components/CategoryHero";
import CategoryProducts from "./components/CategoryProducts";
import CategoryToolbar from "./components/CategoryToolbar";

const CategoryDetailPage = () => {
  return (
    <div>
      <CategoryHero />

      <div className="px-4 pb-8 pt-8 sm:px-8 sm:pb-10 sm:pt-10 lg:px-30 lg:pb-10 lg:pt-16">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-6">
          <CategoryFilters />

          <div className="min-w-0 flex-1 space-y-4 sm:space-y-5">
            <CategoryToolbar />
            <CategoryProducts />
          </div>
        </div>
      </div>

      <ContactCtaSection />
    </div>
  );
};

export default CategoryDetailPage;