{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce4",
  "title": "Shop by Category Grid",
  "description": "Product category browsing with image cards, product counts, and featured badges. Responsive grid layout with hover effects. Perfect for storefront navigation and collection showcases.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/ecommerce4/ecommerce4.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Category {\n  name: string;\n  description?: string;\n  image: string;\n  href: string;\n  productCount?: string;\n  featured?: boolean;\n}\n\ninterface Ecommerce4Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  categories?: Category[];\n  className?: string;\n}\n\nexport const ecommerce4Demo: Ecommerce4Props = {\n  badge: { label: \"Shop by Category\", variant: \"default\" },\n  heading: \"Browse our collections\",\n  description: \"Find exactly what you're looking for in our curated categories.\",\n  categories: [\n    {\n      name: \"Living Room\",\n      description: \"Sofas, tables and decor\",\n      image: \"https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600&h=400&fit=crop\",\n      href: \"https://beste.co\",\n      productCount: \"124 products\",\n      featured: true,\n    },\n    {\n      name: \"Bedroom\",\n      description: \"Beds, nightstands and linens\",\n      image: \"https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=600&h=400&fit=crop\",\n      href: \"https://beste.co\",\n      productCount: \"89 products\",\n    },\n    {\n      name: \"Kitchen\",\n      description: \"Cookware and dining\",\n      image: \"https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&h=400&fit=crop\",\n      href: \"https://beste.co\",\n      productCount: \"156 products\",\n    },\n    {\n      name: \"Office\",\n      description: \"Desks, chairs and storage\",\n      image:\n        \"https://images.unsplash.com/photo-1595846265893-f433f6cca81d?w=900&auto=format&fit=crop&q=60\",\n      href: \"https://beste.co\",\n      productCount: \"67 products\",\n    },\n  ],\n};\n\nexport function Ecommerce4({\n  badge,\n  heading,\n  description,\n  categories = [],\n  className,\n}: Ecommerce4Props) {\n  if (categories.length === 0) return null;\n\n  const count = categories.length;\n  const columnCount = count >= 5 ? 3 : count % 4 === 0 ? 4 : count % 3 === 0 ? 3 : 2;\n  const gridCols =\n    columnCount === 4 ? \"lg:grid-cols-4\" : columnCount === 3 ? \"lg:grid-cols-3\" : \"lg:grid-cols-2\";\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {/* Header */}\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-8 md:mb-12 max-w-3xl text-center\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n              </div>\n            )}\n            {heading && (\n              <h2 className=\"text-3xl font-semibold md:text-4xl text-balance\">{heading}</h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-lg text-muted-foreground text-balance\">{description}</p>\n            )}\n          </div>\n        )}\n\n        {/* Categories Grid */}\n        <div className={cn(\"grid gap-6 sm:grid-cols-2\", gridCols)}>\n          {categories.map((category, index) => (\n            <Link\n              key={index}\n              href={category.href}\n              className=\"group/ecommerce4 relative overflow-hidden rounded-2xl\"\n            >\n              {/* Image */}\n              <div className=\"aspect-[3/2] md:aspect-square overflow-hidden bg-muted\">\n                <img\n                  src={category.image}\n                  width={800}\n                  height={500}\n                  alt={category.name}\n                  className=\"size-full object-cover transition-transform duration-500 group-hover/ecommerce4:scale-105\"\n                />\n                {/* Overlay */}\n                <div className=\"absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent\" />\n              </div>\n\n              {/* Content */}\n              <div className=\"absolute inset-x-0 bottom-0 p-4 md:p-6\">\n                {category.featured && (\n                  <Badge className=\"mb-2\" variant=\"secondary\">\n                    Featured\n                  </Badge>\n                )}\n                <h3 className=\"text-xl font-semibold text-white md:text-2xl\">{category.name}</h3>\n                {category.description && (\n                  <p className=\"mt-1 text-sm text-white/80\">{category.description}</p>\n                )}\n                <div className=\"mt-3 flex items-center gap-2 text-sm text-white/90\">\n                  {category.productCount && <span>{category.productCount}</span>}\n                  <ArrowRight className=\"size-4 transition-transform group-hover/ecommerce4:translate-x-1\" />\n                </div>\n              </div>\n            </Link>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce4.tsx"
    }
  ],
  "type": "registry:block"
}