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="space-y-4 px-4 mt-10 sm:space-y-5 sm:px-8 lg:px-30 pt-8 sm:pt-10 pb-8 sm:pb-10">
        <div className="lg:grid lg:gap-x-6">
          <CategoryToolbar />
        </div>

        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-6">
          <CategoryFilters />
          <div className="min-w-0 flex-1">
            <CategoryProducts />
          </div>
        </div>
      </div>

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

export default CategoryDetailPage;
