{
  "name": "lease-service-card",
  "title": "LeaseServiceCard",
  "description": "Long-term lease card with per-month/year pricing, volume tiers, and billing.",
  "type": "component",
  "registryDependencies": [
    "price",
    "volume-pricing",
    "cn",
    "strip-html"
  ],
  "files": [
    {
      "path": "cards/lease-service-card.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function LeaseServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"mo\";\n  const tags = product.tags || [];\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} currency={currency} />/{unit}\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Tags as amenity pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Volume tiers (lease terms) */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        {/* Info row */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} currency={currency} /> deposit\n            </span>\n          )}\n          {cancellationHours != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground\">\n              {cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice`}\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {product.billing_plans && product.billing_plans.length > 0 && (\n            <span className=\"text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              {product.billing_plans[0].frequency} billing\n            </span>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors ml-auto\"\n          >\n            Enquire now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
    }
  ]
}