{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "complex-product-description-01",
  "type": "registry:block",
  "description": "Product description with accordion",
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/complex-product-description-01/page.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart, Package, RefreshCw, Shield, Star, Truck } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nconst IMAGES = [\n  \"https://v3.material-tailwind.com/coat-1.png\",\n  \"https://v3.material-tailwind.com/coat-2.png\",\n  \"https://v3.material-tailwind.com/coat-3.png\",\n  \"https://v3.material-tailwind.com/coat-4.png\",\n]\n\nconst SIZES = [\"XS\", \"S\", \"M\", \"L\", \"XL\"]\n\nconst COLORS = [\n  { name: \"Black\", hex: \"#1a1a1a\" },\n  { name: \"White\", hex: \"#ffffff\" },\n  { name: \"Gray\", hex: \"#e5e7eb\" },\n]\n\nconst FEATURES = [\n  { icon: Package, text: \"Premium quality materials\" },\n  { icon: Truck, text: \"Free shipping on orders $100+\" },\n  { icon: RefreshCw, text: \"30-day return policy\" },\n  { icon: Shield, text: \"2-year warranty included\" },\n]\n\nconst ACCORDION_DATA = [\n  {\n    value: \"one\",\n    title: \"Features\",\n    desc: \"This premium coat is crafted from weather-resistant fabric with advanced Gore-Tex technology, ensuring you stay dry and comfortable in all conditions. Features include adjustable cuffs, reinforced seams, and breathable lining.\",\n  },\n  {\n    value: \"two\",\n    title: \"Product Care\",\n    desc: \"Machine wash cold with like colors. Use mild detergent and avoid bleach. Tumble dry on low heat or hang to dry. For best results, store in a cool, dry place and avoid direct sunlight to maintain color and fabric integrity.\",\n  },\n  {\n    value: \"three\",\n    title: \"Shipping & Returns\",\n    desc: \"Free standard shipping on orders over $100. Express shipping available at checkout. We offer a 30-day return policy with free returns. Items must be unworn, unwashed, and in original packaging with tags attached.\",\n  },\n  {\n    value: \"four\",\n    title: \"Warranty\",\n    desc: \"All our products come with a comprehensive 2-year warranty covering manufacturing defects. This includes issues with stitching, zippers, and fabric quality. Contact our customer service for warranty claims and support.\",\n  },\n]\n\nexport default function ComplexProductDescription01() {\n  const [selectedImage, setSelectedImage] = useState(0)\n  const [selectedColor, setSelectedColor] = useState(0)\n  const [selectedSize, setSelectedSize] = useState(\"M\")\n  const [isFavorite, setIsFavorite] = useState(false)\n\n  return (\n    <section className=\"min-h-screen bg-neutral-50 py-12\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\n          <div className=\"flex flex-col-reverse lg:flex-row lg:gap-4\">\n            <div className=\"mt-4 flex gap-2 lg:mt-0 lg:flex-col\">\n              {IMAGES.map((img, index) => (\n                <button\n                  key={index}\n                  onClick={() => setSelectedImage(index)}\n                  className={`h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all ${\n                    selectedImage === index\n                      ? \"border-neutral-900\"\n                      : \"border-neutral-200 hover:border-neutral-400\"\n                  }`}\n                >\n                  <img\n                    src={img}\n                    alt={`Product view ${index + 1}`}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </button>\n              ))}\n            </div>\n\n            <div className=\"flex-1\">\n              <div className=\"aspect-square overflow-hidden rounded-2xl bg-white\">\n                <img\n                  src={IMAGES[selectedImage]}\n                  alt=\"Product main view\"\n                  className=\"h-full w-full object-cover object-center\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col\">\n            <Badge\n              variant=\"outline\"\n              className=\"mb-4 w-fit border-neutral-300 text-xs font-medium text-neutral-600\"\n            >\n              New Arrival\n            </Badge>\n\n            <h1 className=\"mb-2 text-3xl font-light tracking-tight text-neutral-900 sm:text-4xl\">\n              Premium Winter Coat\n            </h1>\n\n            <div className=\"mb-6 flex items-center gap-4\">\n              <span className=\"text-2xl font-normal text-neutral-900\">\n                $1,490.00\n              </span>\n              <div className=\"flex items-center gap-1\">\n                <div className=\"flex\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star\n                      key={i}\n                      className={`h-4 w-4 ${\n                        i < 4\n                          ? \"fill-neutral-900 text-neutral-900\"\n                          : \"fill-neutral-300 text-neutral-300\"\n                      }`}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-sm text-neutral-500\">(100 reviews)</span>\n              </div>\n            </div>\n\n            <p className=\"mb-6 text-sm leading-relaxed text-neutral-600\">\n              Experience unparalleled comfort and style with our premium winter\n              coat. Meticulously crafted with attention to detail, this coat\n              features weather-resistant fabric and a timeless design that\n              complements any wardrobe. Perfect for both casual and formal\n              occasions.\n            </p>\n\n            <div className=\"mb-6\">\n              <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n                Color:{\" \"}\n                <span className=\"font-normal\">\n                  {COLORS[selectedColor].name}\n                </span>\n              </p>\n              <div className=\"flex gap-2\">\n                {COLORS.map((color, index) => (\n                  <button\n                    key={index}\n                    onClick={() => setSelectedColor(index)}\n                    className={`h-10 w-10 rounded-md border-2 transition-all ${\n                      selectedColor === index\n                        ? \"border-neutral-900 ring-2 ring-neutral-900 ring-offset-2\"\n                        : \"border-neutral-200 hover:border-neutral-400\"\n                    }`}\n                    style={{ backgroundColor: color.hex }}\n                    title={color.name}\n                  />\n                ))}\n              </div>\n            </div>\n\n            <div className=\"mb-6\">\n              <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n                Size: <span className=\"font-normal\">{selectedSize}</span>\n              </p>\n              <div className=\"flex gap-2\">\n                {SIZES.map((size) => (\n                  <button\n                    key={size}\n                    onClick={() => setSelectedSize(size)}\n                    className={`flex h-10 w-12 items-center justify-center rounded-md border-2 text-sm font-medium transition-all ${\n                      selectedSize === size\n                        ? \"border-neutral-900 bg-neutral-900 text-white\"\n                        : \"border-neutral-200 bg-white text-neutral-900 hover:border-neutral-400\"\n                    }`}\n                  >\n                    {size}\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"mb-6 flex flex-col gap-3 sm:flex-row\">\n              <Button\n                size=\"lg\"\n                className=\"flex-1 bg-neutral-900 text-white hover:bg-neutral-800\"\n              >\n                Add to Cart\n              </Button>\n              <Button\n                size=\"lg\"\n                variant=\"outline\"\n                className={`border-neutral-900 transition-colors ${\n                  isFavorite\n                    ? \"bg-neutral-900 text-white hover:bg-neutral-800\"\n                    : \"text-neutral-900 hover:bg-neutral-900 hover:text-white\"\n                }`}\n                onClick={() => setIsFavorite(!isFavorite)}\n              >\n                <Heart\n                  className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n                />\n              </Button>\n            </div>\n\n            <div className=\"mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              {FEATURES.map((feature, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-2 text-sm text-neutral-600\"\n                >\n                  <feature.icon className=\"h-4 w-4 flex-shrink-0\" />\n                  <span>{feature.text}</span>\n                </div>\n              ))}\n            </div>\n\n            <Accordion\n              type=\"single\"\n              defaultValue=\"one\"\n              collapsible\n              className=\"w-full border-t border-neutral-200\"\n            >\n              {ACCORDION_DATA.map(({ value, title, desc }) => (\n                <AccordionItem key={value} value={value}>\n                  <AccordionTrigger className=\"text-sm font-medium text-neutral-900 hover:text-neutral-600\">\n                    {title}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"text-sm leading-relaxed text-neutral-600\">\n                    {desc}\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/complex-product-description/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1200px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "ecommerce"
  ]
}