{
  "name": "digital-product-layout",
  "title": "DigitalProductLayout",
  "description": "Digital product layout with file details, download limits, event info, and access passes.",
  "type": "component",
  "registryDependencies": [
    "product-image-gallery",
    "product-customizer",
    "price",
    "rich-text",
    "cn"
  ],
  "files": [
    {
      "path": "layouts/digital-product-layout.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst DIGITAL_TYPE_LABELS: Record<string, string> = {\n  download: \"Digital download\",\n  license_key: \"Software license\",\n  ticket: \"Event ticket\",\n  access_grant: \"Access pass\",\n  redemption_code: \"Redemption code\",\n};\n\nexport function DigitalProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const currency = getProductCurrency(product);\n  const typeLabel = product.digital_type\n    ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type\n    : \"Digital product\";\n\n  const isTicket = product.digital_type === \"ticket\";\n  const isAccessPass = product.digital_type === \"access_grant\";\n  const isDownload = product.digital_type === \"download\" || product.digital_type === \"license_key\";\n\n  return (\n    <div data-cimplify-product-layout=\"digital\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Type badge + tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span data-cimplify-product-layout-badge className=\"text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full\">\n                {typeLabel}\n              </span>\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} currency={currency} className=\"text-2xl font-bold mt-2 block\" />\n            </div>\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Delivery notice */}\n            {isDownload && (\n              <div data-cimplify-product-layout-delivery className=\"flex items-center gap-3 px-4 py-3 bg-muted rounded-lg\">\n                <svg className=\"w-5 h-5 text-primary shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                </svg>\n                <div>\n                  <p className=\"text-sm font-medium\">Instant delivery</p>\n                  <p className=\"text-xs text-muted-foreground\">Download immediately after purchase</p>\n                </div>\n              </div>\n            )}\n\n            {/* Event info */}\n            {isTicket && (product.event_date || product.venue) && (\n              <div data-cimplify-product-layout-event className=\"border border-border p-4 space-y-2\">\n                {product.event_date && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Date:</span>\n                    <span className=\"font-medium\">{new Date(product.event_date).toLocaleDateString(undefined, { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}</span>\n                  </div>\n                )}\n                {product.venue && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Venue:</span>\n                    <span className=\"font-medium\">{product.venue}</span>\n                  </div>\n                )}\n                {product.ticket_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Type:</span>\n                    <span className=\"font-medium capitalize\">{product.ticket_type}</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Access pass info */}\n            {isAccessPass && (product.access_type || product.access_duration_days) && (\n              <div data-cimplify-product-layout-access className=\"border border-border p-4 space-y-2\">\n                {product.access_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Access:</span>\n                    <span className=\"font-medium capitalize\">{product.access_type}</span>\n                  </div>\n                )}\n                {product.access_level && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Level:</span>\n                    <span className=\"font-medium capitalize\">{product.access_level}</span>\n                  </div>\n                )}\n                {product.access_duration_days && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Duration:</span>\n                    <span className=\"font-medium\">{product.access_duration_days} days</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* File details */}\n            {isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && (\n              <div data-cimplify-product-layout-file-details className=\"grid grid-cols-2 gap-3\">\n                {product.file_type && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Format</p>\n                    <p className=\"text-sm font-semibold\">{product.file_type.toUpperCase()}</p>\n                  </div>\n                )}\n                {product.file_size_mb != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Size</p>\n                    <p className=\"text-sm font-semibold\">{product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB`}</p>\n                  </div>\n                )}\n                {product.max_downloads != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Downloads</p>\n                    <p className=\"text-sm font-semibold\">{product.max_downloads}</p>\n                  </div>\n                )}\n                {product.version && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Version</p>\n                    <p className=\"text-sm font-semibold\">v{product.version}</p>\n                  </div>\n                )}\n                {product.download_expires_days != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Expires</p>\n                    <p className=\"text-sm font-semibold\">{product.download_expires_days} days</p>\n                  </div>\n                )}\n                {product.max_activations != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Activations</p>\n                    <p className=\"text-sm font-semibold\">{product.max_activations}</p>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (license variants, billing plans, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"More digital products\"\n        />\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}