{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "property-amenities-grid",
  "title": "Property Amenities Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/property-amenities-grid/PropertyAmenitiesGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  ArrowRight,\n  Building2,\n  Calendar,\n  Car,\n  Check,\n  CircleDot,\n  Clock,\n  Compass,\n  ConciergeBell,\n  Dumbbell,\n  FileText,\n  Flame,\n  HeartPulse,\n  Laptop,\n  MapPin,\n  Package,\n  PawPrint,\n  Search,\n  ShieldCheck,\n  Shirt,\n  Video,\n  Wifi,\n  X,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  title?: string\n  subtitle?: string\n  badge?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'World-Class Amenities & Services',\n  subtitle: 'Designed for wellness, productivity, and quiet luxury living.',\n  badge: 'Building Features & Lifestyle',\n})\n\ntype CategoryId = 'all' | 'wellness' | 'work' | 'services' | 'parking'\n\ninterface AmenityCategory {\n  id: CategoryId\n  label: string\n  count: number\n  icon: any\n  description: string\n}\n\nconst categories: AmenityCategory[] = [\n  {\n    id: 'all',\n    label: 'All Amenities',\n    count: 24,\n    icon: Building2,\n    description: 'Explore the full suite of resident services, wellness facilities, and private lounges.',\n  },\n  {\n    id: 'wellness',\n    label: 'Wellness & Recreation',\n    count: 4,\n    icon: HeartPulse,\n    description: 'Resort-inspired spaces to rejuvenate body and mind, featuring sky-high fitness and hydrotherapy.',\n  },\n  {\n    id: 'work',\n    label: 'Work & Productivity',\n    count: 3,\n    icon: Laptop,\n    description: 'High-speed professional environments for focused execution, remote meetings, and collaboration.',\n  },\n  {\n    id: 'services',\n    label: 'Convenience & Services',\n    count: 3,\n    icon: ConciergeBell,\n    description: 'White-glove 24/7 concierge, contactless cold storage lockers, and on-demand valet care.',\n  },\n  {\n    id: 'parking',\n    label: 'Parking & Pet Care',\n    count: 2,\n    icon: Car,\n    description: 'Subterranean EV charging and a dedicated pet-care suite.',\n  },\n]\n\nconst activeCategory = ref<CategoryId>('all')\nconst searchQuery = ref('')\n\nconst isSearching = computed(() => searchQuery.value.trim().length > 0)\n\nfunction matchesQuery(text: string): boolean {\n  if (!isSearching.value) return true\n  return text.toLowerCase().includes(searchQuery.value.toLowerCase().trim())\n}\n\nconst showWellness = computed(() => {\n  if (activeCategory.value !== 'all' && activeCategory.value !== 'wellness') return false\n  if (!isSearching.value) return true\n  return (\n    matchesQuery('Heated Rooftop Infinity Pool') ||\n    matchesQuery('Equinox-style Fitness Center & Yoga Studio') ||\n    matchesQuery('Nordic Sauna & Cold Plunge Spa') ||\n    matchesQuery('Private Tennis & Pickleball Court') ||\n    matchesQuery('wellness recreation pool gym sauna')\n  )\n})\n\nconst showWork = computed(() => {\n  if (activeCategory.value !== 'all' && activeCategory.value !== 'work') return false\n  if (!isSearching.value) return true\n  return (\n    matchesQuery('Resident Co-Working Lounge with Private Pods') ||\n    matchesQuery('Executive Conference Room with AV') ||\n    matchesQuery('High-Speed 10 Gbps Fiber WiFi throughout') ||\n    matchesQuery('work productivity office wifi conference')\n  )\n})\n\nconst showServices = computed(() => {\n  if (activeCategory.value !== 'all' && activeCategory.value !== 'services') return false\n  if (!isSearching.value) return true\n  return (\n    matchesQuery('24/7 Doorman & Concierge Desk') ||\n    matchesQuery('Automated Package Lockers & Cold Storage Delivery') ||\n    matchesQuery('Dry Cleaning Valet & Laundry Services') ||\n    matchesQuery('convenience services concierge doorman package laundry')\n  )\n})\n\nconst showParking = computed(() => {\n  if (activeCategory.value !== 'all' && activeCategory.value !== 'parking') return false\n  if (!isSearching.value) return true\n  return (\n    matchesQuery('Secure Underground Parking with EV Chargers') ||\n    matchesQuery('Private Rooftop Dog Park & Pet Spa Station') ||\n    matchesQuery('parking ev charger pet care dog park')\n  )\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"property-amenities-grid\"\n    :class=\"cn('bg-background text-foreground w-full py-12 sm:py-16 lg:py-20', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Top Section Header -->\n      <div class=\"flex flex-col items-start justify-between gap-6 lg:flex-row lg:items-end\">\n        <div class=\"max-w-2xl space-y-3\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge\n              variant=\"outline\"\n              class=\"border-primary/30 bg-primary/5 text-primary gap-1.5 px-3 py-1 text-xs font-medium\"\n            >\n              <Compass class=\"size-3.5\" />\n              {{ props.badge }}\n            </Badge>\n            <Badge variant=\"secondary\" class=\"gap-1 px-2.5 py-1 text-xs font-medium\">\n              <Building2 class=\"size-3\" />\n              24 Total Amenities\n            </Badge>\n          </div>\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            {{ props.title }}\n          </h2>\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            {{ props.subtitle }}\n          </p>\n        </div>\n\n        <!-- Quick Summary Stats Bar -->\n        <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4\">\n          <div class=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n            <p class=\"text-foreground font-mono text-xl font-bold\">24</p>\n            <p class=\"text-muted-foreground text-xs font-medium\">Curated Amenities</p>\n          </div>\n          <div class=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n            <p class=\"text-foreground font-mono text-xl font-bold\">4</p>\n            <p class=\"text-muted-foreground text-xs font-medium\">Lifestyle Zones</p>\n          </div>\n          <div class=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n            <p class=\"text-foreground font-mono text-xl font-bold\">24/7</p>\n            <p class=\"text-muted-foreground text-xs font-medium\">Concierge Access</p>\n          </div>\n          <div class=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n            <p class=\"text-foreground font-mono text-xl font-bold\">100%</p>\n            <p class=\"text-muted-foreground text-xs font-medium\">Pet Friendly</p>\n          </div>\n        </div>\n      </div>\n\n      <Separator class=\"my-8\" />\n\n      <!-- Interactive Controls: Category Filter Tabs & Quick Search -->\n      <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <!-- Category Filter Pills -->\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Button\n            v-for=\"cat in categories\"\n            :key=\"cat.id\"\n            size=\"sm\"\n            :variant=\"activeCategory === cat.id ? 'default' : 'outline'\"\n            class=\"h-8 gap-1.5 rounded-full px-3.5 text-xs font-medium\"\n            @click=\"activeCategory = cat.id\"\n          >\n            <component :is=\"cat.icon\" class=\"size-3.5\" />\n            <span>{{ cat.label }}</span>\n            <span\n              :class=\"\n                cn(\n                  'py-0.2 ml-1 rounded-full px-1.5 font-mono text-xs',\n                  activeCategory === cat.id\n                    ? 'bg-primary-foreground/20 text-primary-foreground'\n                    : 'bg-muted text-muted-foreground',\n                )\n              \"\n            >\n              {{ cat.count }}\n            </span>\n          </Button>\n        </div>\n\n        <!-- Keyword Search Input -->\n        <div class=\"relative w-full sm:w-72\">\n          <Search class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n          <input\n            v-model=\"searchQuery\"\n            type=\"text\"\n            placeholder=\"Search amenities...\"\n            class=\"bg-card border-border placeholder:text-muted-foreground focus-visible:ring-primary h-9 w-full min-w-0 rounded-lg border pr-8 pl-9 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          />\n          <button\n            v-if=\"searchQuery\"\n            type=\"button\"\n            class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2.5 -translate-y-1/2\"\n            aria-label=\"Clear search\"\n            @click=\"searchQuery = ''\"\n          >\n            <X class=\"size-3.5\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Search Results Indicator -->\n      <div\n        v-if=\"isSearching\"\n        class=\"bg-muted/40 border-border mt-4 flex items-center justify-between rounded-lg border px-4 py-2 text-xs\"\n      >\n        <span class=\"text-muted-foreground\">\n          Showing matching results for <strong class=\"text-foreground\">\"{{ searchQuery }}\"</strong>\n        </span>\n        <button\n          aria-label=\"Clear search\"\n          type=\"button\"\n          class=\"text-primary font-medium hover:underline\"\n          @click=\"searchQuery = ''\"\n        >\n          Reset Filter\n        </button>\n      </div>\n\n      <!-- Categories Container -->\n      <div class=\"mt-10 space-y-14\">\n        <!-- ================================================================= -->\n        <!-- CATEGORY 1: WELLNESS & RECREATION -->\n        <!-- ================================================================= -->\n        <div v-if=\"showWellness\" class=\"space-y-6\">\n          <!-- Category Header -->\n          <div class=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                <HeartPulse class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-xl font-bold tracking-tight\">Wellness & Recreation</h3>\n                <p class=\"text-muted-foreground text-xs sm:text-sm\">\n                  Resort-inspired spaces to rejuvenate body and mind with skyline views and recovery hydrotherapy.\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs font-medium\">\n              4 Featured Amenities\n            </Badge>\n          </div>\n\n          <!-- Wellness Cards Grid -->\n          <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n            <!-- Card 1: Heated Rooftop Infinity Pool (Featured Card with Photo Thumbnail) -->\n            <Card\n              v-if=\"matchesQuery('Heated Rooftop Infinity Pool pool skyline swim cabana')\"\n              class=\"group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md md:col-span-2 lg:col-span-2\"\n            >\n              <div class=\"relative h-64 w-full overflow-hidden sm:h-72\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?w=1200&auto=format&fit=crop&q=80\"\n                  alt=\"Heated Rooftop Infinity Pool\"\n                  class=\"size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n                />\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent\" />\n                <div class=\"absolute top-4 left-4 flex flex-wrap gap-2\">\n                  <Badge class=\"bg-primary text-primary-foreground border-transparent text-xs font-medium shadow-xs\">\n                    Featured Highlight\n                  </Badge>\n                  <Badge\n                    variant=\"secondary\"\n                    class=\"bg-background/80 text-foreground border-white/20 text-xs font-medium backdrop-blur-md\"\n                  >\n                    Year-Round Heated (84°F)\n                  </Badge>\n                </div>\n                <div class=\"absolute right-4 bottom-4 left-4 text-white\">\n                  <div class=\"flex items-center gap-1.5 text-xs text-zinc-300\">\n                    <MapPin class=\"size-3.5 text-zinc-300\" />\n                    <span>Level 42 Sky Deck</span>\n                    <span class=\"mx-1.5\">·</span>\n                    <Clock class=\"size-3.5 text-zinc-300\" />\n                    <span>6:00 AM – 10:00 PM Daily</span>\n                  </div>\n                </div>\n              </div>\n\n              <CardContent class=\"flex flex-1 flex-col justify-between p-6\">\n                <div class=\"space-y-2\">\n                  <CardTitle class=\"text-foreground text-xl font-bold\">Heated Rooftop Infinity Pool</CardTitle>\n                  <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                    50-meter temperature-controlled infinity pool on the 42nd floor featuring private cabanas, teak\n                    daybeds, outdoor sun deck, and poolside refreshment bar with 360-degree panoramic skyline views.\n                  </CardDescription>\n                </div>\n\n                <div class=\"border-border mt-6 flex flex-wrap items-center gap-2 border-t pt-4\">\n                  <Badge variant=\"outline\" class=\"bg-muted/30 text-xs font-normal\">\n                    <Check class=\"text-success mr-1 size-3\" />\n                    Panoramic Views\n                  </Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/30 text-xs font-normal\">\n                    <Check class=\"text-success mr-1 size-3\" />\n                    Private Cabanas\n                  </Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/30 text-xs font-normal\">\n                    <Check class=\"text-success mr-1 size-3\" />\n                    Towel Valet\n                  </Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/30 text-xs font-normal\">\n                    <Check class=\"text-success mr-1 size-3\" />\n                    Poolside Bar\n                  </Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 2: Equinox-style Fitness Center & Yoga Studio -->\n            <Card\n              v-if=\"matchesQuery('Equinox-style Fitness Center & Yoga Studio gym pilates workout')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Dumbbell class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">24/7 Access</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Levels 3 & 4\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Equinox-style Fitness Center & Yoga Studio\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Multi-level 4,500 sq ft strength and conditioning training facility outfitted with Woodway treadmills,\n                  Peloton bikes, Olympic lifting racks, and a dedicated sunlit yoga and reformer Pilates studio.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Woodway & Peloton</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Reformer Pilates</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Personal Trainers</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 3: Nordic Sauna & Cold Plunge Spa -->\n            <Card\n              v-if=\"matchesQuery('Nordic Sauna & Cold Plunge Spa steam therapy recovery')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Flame class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Hydrotherapy</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Level 3 Spa Suite\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">Nordic Sauna & Cold Plunge Spa</CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Therapeutic cedarwood dry sauna, aromatic eucalyptus steam room, and dual 48°F contrast therapy cold\n                  plunge pools engineered for post-workout muscle recovery and immune resilience.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">48°F Cold Plunge</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Cedar Dry Sauna</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Eucalyptus Steam</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 4: Private Tennis & Pickleball Court -->\n            <Card\n              v-if=\"matchesQuery('Private Tennis & Pickleball Court sports rooftop court')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md md:col-span-2 lg:col-span-2\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <CircleDot class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Rooftop Court</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Level 43 Sports Deck\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">Private Tennis & Pickleball Court</CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Championship-grade rooftop regulation court with multi-sport cushioned acrylic surface,\n                  tournament-spec LED night illumination, automated Spinshot ball machines, and resident league\n                  reservations.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-2 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Tournament LEDs</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Ball Machine Loan</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">App Reservation</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Skyline Backdrop</Badge>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        <!-- ================================================================= -->\n        <!-- CATEGORY 2: WORK & PRODUCTIVITY -->\n        <!-- ================================================================= -->\n        <div v-if=\"showWork\" class=\"space-y-6\">\n          <!-- Category Header -->\n          <div class=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                <Laptop class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-xl font-bold tracking-tight\">Work & Productivity</h3>\n                <p class=\"text-muted-foreground text-xs sm:text-sm\">\n                  Executive business facilities, private acoustic pods, and ultra-high-speed fiber network.\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs font-medium\">\n              3 Featured Amenities\n            </Badge>\n          </div>\n\n          <!-- Work Cards Grid -->\n          <div class=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n            <!-- Card 1: Resident Co-Working Lounge with Private Pods -->\n            <Card\n              v-if=\"matchesQuery('Resident Co-Working Lounge with Private Pods workspace zoom office')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Laptop class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Quiet Focus</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Level 2 Mezzanine\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Resident Co-Working Lounge with Private Pods\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Spacious communal workspace with Herman Miller ergonomic seating, acoustic focus booths, private\n                  soundproof Zoom phone pods, and complimentary artisan espresso and nitro cold brew bar.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Soundproof Pods</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Herman Miller Chairs</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Espresso Bar</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 2: Executive Conference Room with AV -->\n            <Card\n              v-if=\"matchesQuery('Executive Conference Room with AV boardroom meeting video presentation')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Video class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">App Booking</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Level 2 North Wing\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\"> Executive Conference Room with AV </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  16-person board room equipped with 85-inch 4K HDR video conferencing displays, spatial beamforming\n                  microphone arrays, digital whiteboard, and integrated presentation hub.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">16-Seat Capacity</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">4K Video Suite</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Digital Whiteboard</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 3: High-Speed 10 Gbps Fiber WiFi throughout -->\n            <Card\n              v-if=\"matchesQuery('High-Speed 10 Gbps Fiber WiFi throughout wifi internet mesh')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md sm:col-span-2 lg:col-span-1\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Wifi class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Ultra-Fast</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Building-wide Coverage\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    High-Speed 10 Gbps Fiber WiFi throughout\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Enterprise-grade symmetrical 10 Gbps redundant fiber backbone with Wi-Fi 7 access points delivering\n                  uninterrupted zero-drop roaming across all indoor lounges and outdoor terraces.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Wi-Fi 7 Mesh</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">10 Gbps Symmetrical</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Zero Roam Handoff</Badge>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        <!-- ================================================================= -->\n        <!-- CATEGORY 3: CONVENIENCE & SERVICES -->\n        <!-- ================================================================= -->\n        <div v-if=\"showServices\" class=\"space-y-6\">\n          <!-- Category Header -->\n          <div class=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                <ConciergeBell class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-xl font-bold tracking-tight\">Convenience & Services</h3>\n                <p class=\"text-muted-foreground text-xs sm:text-sm\">\n                  White-glove hospitality, smart package handling, and premium garment care at your fingertips.\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs font-medium\">\n              3 Featured Amenities\n            </Badge>\n          </div>\n\n          <!-- Convenience Cards Grid -->\n          <div class=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n            <!-- Card 1: 24/7 Doorman & Concierge Desk -->\n            <Card\n              v-if=\"matchesQuery('24/7 Doorman & Concierge Desk doorman front desk hospitality security')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <ConciergeBell class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">24/7 Attended</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Main Lobby Entrance\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\"> 24/7 Doorman & Concierge Desk </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Round-the-clock uniform concierge team providing white-glove resident hospitality, verified visitor\n                  check-in, key holding, luggage assistance, taxi dispatch, and dining reservations.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">White-Glove Staff</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Key Holding</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Guest Escort</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 2: Automated Package Lockers & Cold Storage Delivery -->\n            <Card\n              v-if=\"matchesQuery('Automated Package Lockers & Cold Storage Delivery parcel grocery refrigerated')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Package class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Smart Storage</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Lobby Concourse\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Automated Package Lockers & Cold Storage Delivery\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Contactless Luxer One smart package room with digital PIN and barcode pickup alerts, secure oversized\n                  parcel rooms, and commercial-grade refrigerated storage for fresh grocery deliveries.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Cold Grocery Lockers</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">24/7 App QR Pickup</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Oversized Item Vault</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 3: Dry Cleaning Valet & Laundry Services -->\n            <Card\n              v-if=\"matchesQuery('Dry Cleaning Valet & Laundry Services garment tailoring wash')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md sm:col-span-2 lg:col-span-1\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Shirt class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Valet Care</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Service Concourse B1\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Dry Cleaning Valet & Laundry Services\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  On-demand eco-friendly dry cleaning drop-off lockers with 24-hour turnaround, garment pressing, shoe\n                  shining, tailored alterations, and in-locker contactless delivery return.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">24h Turnaround</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Eco-Friendly Cleaning</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Tailored Alterations</Badge>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        <!-- ================================================================= -->\n        <!-- CATEGORY 4: PARKING & PET CARE -->\n        <!-- ================================================================= -->\n        <div v-if=\"showParking\" class=\"space-y-6\">\n          <!-- Category Header -->\n          <div class=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                <Car class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-xl font-bold tracking-tight\">Parking & Pet Care</h3>\n                <p class=\"text-muted-foreground text-xs sm:text-sm\">\n                  Subterranean EV charging bays and private rooftop pet facilities for four-legged residents.\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs font-medium\">\n              2 Featured Amenities\n            </Badge>\n          </div>\n\n          <!-- Parking & Pet Care Cards Grid -->\n          <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <!-- Card 1: Secure Underground Parking with EV Chargers -->\n            <Card\n              v-if=\"matchesQuery('Secure Underground Parking with EV Chargers electric vehicle garage stall')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Car class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">EV Ready</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Levels P1 – P3 Subterranean\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Secure Underground Parking with EV Chargers\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Gated subterranean multi-level garage featuring automated license plate recognition entry gates,\n                  assigned private stalls, 48 universal Level 2 EV charging stations, and dedicated bike storage.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">48 EV Charging Ports</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">LPR Auto-Gate</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Covered Bike Vault</Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            <!-- Card 2: Private Rooftop Dog Park & Pet Spa Station -->\n            <Card\n              v-if=\"matchesQuery('Private Rooftop Dog Park & Pet Spa Station canine grooming wash animal')\"\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\"\n            >\n              <CardHeader class=\"space-y-3 p-6 pb-2\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <PawPrint class=\"size-5\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Pet Friendly</Badge>\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <MapPin class=\"text-primary size-3\" />\n                    Level 44 Sky Deck\n                  </div>\n                  <CardTitle class=\"text-foreground text-lg font-bold\">\n                    Private Rooftop Dog Park & Pet Spa Station\n                  </CardTitle>\n                </div>\n              </CardHeader>\n\n              <CardContent class=\"space-y-4 p-6 pt-2\">\n                <CardDescription class=\"text-muted-foreground text-sm leading-relaxed\">\n                  Enclosed rooftop canine park with anti-microbial synthetic turf and agility obstacles, paired with an\n                  indoor heated pet wash spa featuring stainless steel wash tubs and pro blow dry station.\n                </CardDescription>\n\n                <div class=\"flex flex-wrap gap-1.5 pt-2\">\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Anti-Microbial Turf</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Heated Wash Tubs</Badge>\n                  <Badge variant=\"outline\" class=\"bg-muted/20 text-xs\">Pro Blow Dryers</Badge>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Bottom Callout Card: Resident Keycard App & Tour Booking -->\n      <Card class=\"bg-muted/30 border-border mt-16 overflow-hidden border shadow-xs\">\n        <CardContent class=\"flex flex-col items-start justify-between gap-6 p-6 sm:p-8 md:flex-row md:items-center\">\n          <div class=\"flex items-start gap-4\">\n            <div class=\"bg-primary/10 text-primary flex size-12 shrink-0 items-center justify-center rounded-xl\">\n              <ShieldCheck class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <h4 class=\"text-foreground text-base font-semibold sm:text-lg\">\n                Keyless Resident Access & Mobile App Integration\n              </h4>\n              <p class=\"text-muted-foreground max-w-2xl text-xs sm:text-sm\">\n                All 24 building amenities are digitally accessible via NFC mobile key, offering instant cabana and\n                conference room reservations, real-time fitness occupancy, and automated guest passes.\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-3\">\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\">\n              <FileText class=\"size-3.5\" />\n              Amenity Guide PDF\n            </Button>\n            <Button size=\"sm\" class=\"gap-1.5 text-xs\">\n              <Calendar class=\"size-3.5\" />\n              Schedule a Tour\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PropertyAmenitiesGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Building and luxury residential amenities matrix featuring categorized lifestyle zones, interactive category tabs, instant keyword search, and detailed feature cards with pool photography thumbnail.",
  "categories": [
    "real-estate",
    "hospitality",
    "marketing"
  ]
}