{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "property-amenities-grid",
  "title": "Property Amenities Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/property-amenities-grid/PropertyAmenitiesGrid.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\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-react'\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\nexport interface PropertyAmenitiesGridProps {\n  title?: string\n  subtitle?: string\n  badge?: string\n  className?: string\n}\n\ntype CategoryId = 'all' | 'wellness' | 'work' | 'services' | 'parking'\n\ninterface AmenityCategory {\n  id: CategoryId\n  label: string\n  count: number\n  icon: React.ComponentType<{ className?: string }>\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\nexport function PropertyAmenitiesGrid({\n  title = 'World-Class Amenities & Services',\n  subtitle = 'Designed for wellness, productivity, and quiet luxury living.',\n  badge = 'Building Features & Lifestyle',\n  className,\n}: PropertyAmenitiesGridProps) {\n  const [activeCategory, setActiveCategory] = React.useState<CategoryId>('all')\n  const [searchQuery, setSearchQuery] = React.useState('')\n\n  const isSearching = searchQuery.trim().length > 0\n\n  const matchesQuery = React.useCallback(\n    (text: string) => {\n      if (!isSearching) return true\n      return text.toLowerCase().includes(searchQuery.toLowerCase().trim())\n    },\n    [isSearching, searchQuery],\n  )\n\n  const showWellness =\n    (activeCategory === 'all' || activeCategory === 'wellness') &&\n    (!isSearching ||\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  const showWork =\n    (activeCategory === 'all' || activeCategory === 'work') &&\n    (!isSearching ||\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  const showServices =\n    (activeCategory === 'all' || activeCategory === 'services') &&\n    (!isSearching ||\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  const showParking =\n    (activeCategory === 'all' || activeCategory === 'parking') &&\n    (!isSearching ||\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  return (\n    <section\n      data-slot=\"property-amenities-grid\"\n      className={cn('bg-background text-foreground w-full py-12 sm:py-16 lg:py-20', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Top Section Header */}\n        <div className=\"flex flex-col items-start justify-between gap-6 lg:flex-row lg:items-end\">\n          <div className=\"max-w-2xl space-y-3\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge\n                variant=\"outline\"\n                className=\"border-primary/30 bg-primary/5 text-primary gap-1.5 px-3 py-1 text-xs font-medium\"\n              >\n                <Compass className=\"size-3.5\" />\n                {badge}\n              </Badge>\n              <Badge variant=\"secondary\" className=\"gap-1 px-2.5 py-1 text-xs font-medium\">\n                <Building2 className=\"size-3\" />\n                24 Total Amenities\n              </Badge>\n            </div>\n            <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n            <p className=\"text-muted-foreground text-base sm:text-lg\">{subtitle}</p>\n          </div>\n\n          {/* Quick Summary Stats Bar */}\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4\">\n            <div className=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n              <p className=\"text-foreground font-mono text-xl font-bold\">24</p>\n              <p className=\"text-muted-foreground text-xs font-medium\">Curated Amenities</p>\n            </div>\n            <div className=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n              <p className=\"text-foreground font-mono text-xl font-bold\">4</p>\n              <p className=\"text-muted-foreground text-xs font-medium\">Lifestyle Zones</p>\n            </div>\n            <div className=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n              <p className=\"text-foreground font-mono text-xl font-bold\">24/7</p>\n              <p className=\"text-muted-foreground text-xs font-medium\">Concierge Access</p>\n            </div>\n            <div className=\"bg-card border-border rounded-xl border p-3 shadow-xs\">\n              <p className=\"text-foreground font-mono text-xl font-bold\">100%</p>\n              <p className=\"text-muted-foreground text-xs font-medium\">Pet Friendly</p>\n            </div>\n          </div>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        {/* Interactive Controls: Category Filter Tabs & Quick Search */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          {/* Category Filter Pills */}\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {categories.map((cat) => {\n              const Icon = cat.icon\n              const isActive = activeCategory === cat.id\n              return (\n                <Button\n                  key={cat.id}\n                  size=\"sm\"\n                  variant={isActive ? 'default' : 'outline'}\n                  className=\"h-8 gap-1.5 rounded-full px-3.5 text-xs font-medium\"\n                  onClick={() => setActiveCategory(cat.id)}\n                >\n                  <Icon className=\"size-3.5\" />\n                  <span>{cat.label}</span>\n                  <span\n                    className={cn(\n                      'py-0.2 ml-1 rounded-full px-1.5 font-mono text-xs',\n                      isActive ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-muted text-muted-foreground',\n                    )}\n                  >\n                    {cat.count}\n                  </span>\n                </Button>\n              )\n            })}\n          </div>\n\n          {/* Keyword Search Input */}\n          <div className=\"relative w-full sm:w-72\">\n            <Search className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n            <input\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              type=\"text\"\n              placeholder=\"Search amenities...\"\n              className=\"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            {searchQuery ? (\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2.5 -translate-y-1/2\"\n                aria-label=\"Clear search\"\n                onClick={() => setSearchQuery('')}\n              >\n                <X className=\"size-3.5\" />\n              </button>\n            ) : null}\n          </div>\n        </div>\n\n        {/* Search Results Indicator */}\n        {isSearching && (\n          <div className=\"bg-muted/40 border-border mt-4 flex items-center justify-between rounded-lg border px-4 py-2 text-xs\">\n            <span className=\"text-muted-foreground\">\n              Showing matching results for <strong className=\"text-foreground\">&quot;{searchQuery}&quot;</strong>\n            </span>\n            <button\n              type=\"button\"\n              className=\"text-primary font-medium hover:underline\"\n              onClick={() => setSearchQuery('')}\n            >\n              Reset Filter\n            </button>\n          </div>\n        )}\n\n        {/* Categories Container */}\n        <div className=\"mt-10 space-y-14\">\n          {/* ================================================================= */}\n          {/* CATEGORY 1: WELLNESS & RECREATION */}\n          {/* ================================================================= */}\n          {showWellness && (\n            <div className=\"space-y-6\">\n              {/* Category Header */}\n              <div className=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <HeartPulse className=\"size-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-foreground text-xl font-bold tracking-tight\">Wellness & Recreation</h3>\n                    <p className=\"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\" className=\"border-border text-muted-foreground text-xs font-medium\">\n                  4 Featured Amenities\n                </Badge>\n              </div>\n\n              {/* Wellness Cards Grid */}\n              <div className=\"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                {matchesQuery('Heated Rooftop Infinity Pool pool skyline swim cabana') && (\n                  <Card className=\"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                    <div className=\"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                        className=\"size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n                      />\n                      <div className=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent\" />\n                      <div className=\"absolute top-4 left-4 flex flex-wrap gap-2\">\n                        <Badge className=\"bg-primary text-primary-foreground border-transparent text-xs font-medium shadow-xs\">\n                          Featured Highlight\n                        </Badge>\n                        <Badge\n                          variant=\"secondary\"\n                          className=\"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 className=\"absolute right-4 bottom-4 left-4 text-white\">\n                        <div className=\"flex items-center gap-1.5 text-xs text-zinc-300\">\n                          <MapPin className=\"size-3.5 text-zinc-300\" />\n                          <span>Level 42 Sky Deck</span>\n                          <span className=\"mx-1.5\">·</span>\n                          <Clock className=\"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 className=\"flex flex-1 flex-col justify-between p-6\">\n                      <div className=\"space-y-2\">\n                        <CardTitle className=\"text-foreground text-xl font-bold\">\n                          Heated Rooftop Infinity Pool\n                        </CardTitle>\n                        <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                          50-meter temperature-controlled infinity pool on the 42nd floor featuring private cabanas,\n                          teak daybeds, outdoor sun deck, and poolside refreshment bar with 360-degree panoramic skyline\n                          views.\n                        </CardDescription>\n                      </div>\n\n                      <div className=\"border-border mt-6 flex flex-wrap items-center gap-2 border-t pt-4\">\n                        <Badge variant=\"outline\" className=\"bg-muted/30 text-xs font-normal\">\n                          <Check className=\"text-success mr-1 size-3\" />\n                          Panoramic Views\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/30 text-xs font-normal\">\n                          <Check className=\"text-success mr-1 size-3\" />\n                          Private Cabanas\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/30 text-xs font-normal\">\n                          <Check className=\"text-success mr-1 size-3\" />\n                          Towel Valet\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/30 text-xs font-normal\">\n                          <Check className=\"text-success mr-1 size-3\" />\n                          Poolside Bar\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 2: Equinox-style Fitness Center & Yoga Studio */}\n                {matchesQuery('Equinox-style Fitness Center & Yoga Studio gym pilates workout') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Dumbbell className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          24/7 Access\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Levels 3 & 4\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Equinox-style Fitness Center & Yoga Studio\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Multi-level 4,500 sq ft strength and conditioning training facility outfitted with Woodway\n                        treadmills, Peloton bikes, Olympic lifting racks, and a dedicated sunlit yoga and reformer\n                        Pilates studio.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Woodway & Peloton\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Reformer Pilates\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Personal Trainers\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 3: Nordic Sauna & Cold Plunge Spa */}\n                {matchesQuery('Nordic Sauna & Cold Plunge Spa steam therapy recovery') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Flame className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Hydrotherapy\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Level 3 Spa Suite\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Nordic Sauna & Cold Plunge Spa\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Therapeutic cedarwood dry sauna, aromatic eucalyptus steam room, and dual 48°F contrast therapy\n                        cold plunge pools engineered for post-workout muscle recovery and immune resilience.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          48°F Cold Plunge\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Cedar Dry Sauna\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Eucalyptus Steam\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 4: Private Tennis & Pickleball Court */}\n                {matchesQuery('Private Tennis & Pickleball Court sports rooftop court') && (\n                  <Card className=\"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                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <CircleDot className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Rooftop Court\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Level 43 Sports Deck\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Private Tennis & Pickleball Court\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"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 className=\"flex flex-wrap gap-2 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Tournament LEDs\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Ball Machine Loan\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          App Reservation\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Skyline Backdrop\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n              </div>\n            </div>\n          )}\n\n          {/* ================================================================= */}\n          {/* CATEGORY 2: WORK & PRODUCTIVITY */}\n          {/* ================================================================= */}\n          {showWork && (\n            <div className=\"space-y-6\">\n              {/* Category Header */}\n              <div className=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Laptop className=\"size-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-foreground text-xl font-bold tracking-tight\">Work & Productivity</h3>\n                    <p className=\"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\" className=\"border-border text-muted-foreground text-xs font-medium\">\n                  3 Featured Amenities\n                </Badge>\n              </div>\n\n              {/* Work Cards Grid */}\n              <div className=\"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                {matchesQuery('Resident Co-Working Lounge with Private Pods workspace zoom office') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Laptop className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Quiet Focus\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Level 2 Mezzanine\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Resident Co-Working Lounge with Private Pods\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"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 className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Soundproof Pods\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Herman Miller Chairs\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Espresso Bar\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 2: Executive Conference Room with AV */}\n                {matchesQuery('Executive Conference Room with AV boardroom meeting video presentation') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Video className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          App Booking\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Level 2 North Wing\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Executive Conference Room with AV\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        16-person board room equipped with 85-inch 4K HDR video conferencing displays, spatial\n                        beamforming microphone arrays, digital whiteboard, and integrated presentation hub.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          16-Seat Capacity\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          4K Video Suite\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Digital Whiteboard\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 3: High-Speed 10 Gbps Fiber WiFi throughout */}\n                {matchesQuery('High-Speed 10 Gbps Fiber WiFi throughout wifi internet mesh') && (\n                  <Card className=\"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                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Wifi className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Ultra-Fast\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Building-wide Coverage\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          High-Speed 10 Gbps Fiber WiFi throughout\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Enterprise-grade symmetrical 10 Gbps redundant fiber backbone with Wi-Fi 7 access points\n                        delivering uninterrupted zero-drop roaming across all indoor lounges and outdoor terraces.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Wi-Fi 7 Mesh\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          10 Gbps Symmetrical\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Zero Roam Handoff\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n              </div>\n            </div>\n          )}\n\n          {/* ================================================================= */}\n          {/* CATEGORY 3: CONVENIENCE & SERVICES */}\n          {/* ================================================================= */}\n          {showServices && (\n            <div className=\"space-y-6\">\n              {/* Category Header */}\n              <div className=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <ConciergeBell className=\"size-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-foreground text-xl font-bold tracking-tight\">Convenience & Services</h3>\n                    <p className=\"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\" className=\"border-border text-muted-foreground text-xs font-medium\">\n                  3 Featured Amenities\n                </Badge>\n              </div>\n\n              {/* Convenience Cards Grid */}\n              <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n                {/* Card 1: 24/7 Doorman & Concierge Desk */}\n                {matchesQuery('24/7 Doorman & Concierge Desk doorman front desk hospitality security') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <ConciergeBell className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          24/7 Attended\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Main Lobby Entrance\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          24/7 Doorman & Concierge Desk\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Round-the-clock uniform concierge team providing white-glove resident hospitality, verified\n                        visitor check-in, key holding, luggage assistance, taxi dispatch, and dining reservations.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          White-Glove Staff\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Key Holding\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Guest Escort\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 2: Automated Package Lockers & Cold Storage Delivery */}\n                {matchesQuery('Automated Package Lockers & Cold Storage Delivery parcel grocery refrigerated') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Package className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Smart Storage\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Lobby Concourse\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Automated Package Lockers & Cold Storage Delivery\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Contactless Luxer One smart package room with digital PIN and barcode pickup alerts, secure\n                        oversized parcel rooms, and commercial-grade refrigerated storage for fresh grocery deliveries.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Cold Grocery Lockers\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          24/7 App QR Pickup\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Oversized Item Vault\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 3: Dry Cleaning Valet & Laundry Services */}\n                {matchesQuery('Dry Cleaning Valet & Laundry Services garment tailoring wash') && (\n                  <Card className=\"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                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Shirt className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Valet Care\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Service Concourse B1\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Dry Cleaning Valet & Laundry Services\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        On-demand eco-friendly dry cleaning drop-off lockers with 24-hour turnaround, garment pressing,\n                        shoe shining, tailored alterations, and in-locker contactless delivery return.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          24h Turnaround\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Eco-Friendly Cleaning\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Tailored Alterations\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n              </div>\n            </div>\n          )}\n\n          {/* ================================================================= */}\n          {/* CATEGORY 4: PARKING & PET CARE */}\n          {/* ================================================================= */}\n          {showParking && (\n            <div className=\"space-y-6\">\n              {/* Category Header */}\n              <div className=\"flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                    <Car className=\"size-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-foreground text-xl font-bold tracking-tight\">Parking & Pet Care</h3>\n                    <p className=\"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\" className=\"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 className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n                {/* Card 1: Secure Underground Parking with EV Chargers */}\n                {matchesQuery('Secure Underground Parking with EV Chargers electric vehicle garage stall') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <Car className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          EV Ready\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Levels P1 – P3 Subterranean\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Secure Underground Parking with EV Chargers\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"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 className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          48 EV Charging Ports\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          LPR Auto-Gate\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Covered Bike Vault\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n\n                {/* Card 2: Private Rooftop Dog Park & Pet Spa Station */}\n                {matchesQuery('Private Rooftop Dog Park & Pet Spa Station canine grooming wash animal') && (\n                  <Card className=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between shadow-xs transition-colors duration-300 hover:shadow-md\">\n                    <CardHeader className=\"space-y-3 p-6 pb-2\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl\">\n                          <PawPrint className=\"size-5\" />\n                        </div>\n                        <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                          Pet Friendly\n                        </Badge>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <MapPin className=\"text-primary size-3\" />\n                          Level 44 Sky Deck\n                        </div>\n                        <CardTitle className=\"text-foreground text-lg font-bold\">\n                          Private Rooftop Dog Park & Pet Spa Station\n                        </CardTitle>\n                      </div>\n                    </CardHeader>\n\n                    <CardContent className=\"space-y-4 p-6 pt-2\">\n                      <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                        Enclosed rooftop canine park with anti-microbial synthetic turf and agility obstacles, paired\n                        with an indoor heated pet wash spa featuring stainless steel wash tubs and pro blow dry station.\n                      </CardDescription>\n\n                      <div className=\"flex flex-wrap gap-1.5 pt-2\">\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Anti-Microbial Turf\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Heated Wash Tubs\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"bg-muted/20 text-xs\">\n                          Pro Blow Dryers\n                        </Badge>\n                      </div>\n                    </CardContent>\n                  </Card>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Bottom Callout Card: Resident Keycard App & Tour Booking */}\n        <Card className=\"bg-muted/30 border-border mt-16 overflow-hidden border shadow-xs\">\n          <CardContent className=\"flex flex-col items-start justify-between gap-6 p-6 sm:p-8 md:flex-row md:items-center\">\n            <div className=\"flex items-start gap-4\">\n              <div className=\"bg-primary/10 text-primary flex size-12 shrink-0 items-center justify-center rounded-xl\">\n                <ShieldCheck className=\"size-6\" />\n              </div>\n              <div className=\"space-y-1\">\n                <h4 className=\"text-foreground text-base font-semibold sm:text-lg\">\n                  Keyless Resident Access & Mobile App Integration\n                </h4>\n                <p className=\"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 className=\"flex flex-wrap items-center gap-3\">\n              <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\">\n                <FileText className=\"size-3.5\" />\n                Amenity Guide PDF\n              </Button>\n              <Button size=\"sm\" className=\"gap-1.5 text-xs\">\n                <Calendar className=\"size-3.5\" />\n                Schedule a Tour\n                <ArrowRight className=\"size-3.5\" />\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PropertyAmenitiesGrid.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
  ]
}