{
  "name": "accommodation-card",
  "title": "AccommodationCard",
  "description": "Hotel/accommodation card with per-night pricing, amenities, capacity, and cancellation.",
  "type": "component",
  "registryDependencies": [
    "price",
    "volume-pricing",
    "cn",
    "strip-html"
  ],
  "files": [
    {
      "path": "cards/accommodation-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\nexport function AccommodationCard({\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 hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n  const tags = product.tags || [];\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 night\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} />/night\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        {/* Amenity / tag 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        {/* Guest capacity */}\n        {product.general_service_capacity != null && (\n          <div className=\"flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0\" />\n            </svg>\n            {product.general_service_capacity} guest{product.general_service_capacity > 1 ? \"s\" : \"\"}\n          </div>\n        )}\n\n        {/* Extended stay pricing */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {cancellationHours != null && (\n              <span className=\"text-emerald-600 font-medium\">\n                Free cancellation {cancellationHours}h\n              </span>\n            )}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <span>Min. {product.min_order_quantity} nights</span>\n            )}\n          </div>\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\"\n          >\n            Book room &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
    }
  ]
}