"use client" // required for: useState (expandable state) /** * @name Features 08 * @description Interactive expandable feature cards that reveal more details * on click. Great for showcasing features with rich descriptions. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-grid, features-card, * features-card-header, features-card-icon, features-card-title, * features-card-summary, features-card-toggle, features-card-content, * features-card-detail * @variant expandable * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { ChevronDown, Zap, Database, Code, Palette, Settings, Cloud, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ExpandableFeatureConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: React.ReactNode /** Feature title */ title: string /** Short summary (always visible) */ summary: string /** Detailed description (revealed on expand) */ details: string[] } interface Features08Props { /** Badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Expandable features */ features?: ExpandableFeatureConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FEATURES: ExpandableFeatureConfig[] = [ { id: "feature-performance", icon: , title: "Instant Performance", summary: "Optimized for speed with edge computing and smart caching.", details: [ "Sub-50ms response times globally with our edge network", "Automatic code splitting and lazy loading", "Smart prefetching based on user behavior patterns", "Built-in image optimization and CDN delivery", ], }, { id: "feature-database", icon: , title: "Scalable Database", summary: "Managed database that grows with your application needs.", details: [ "Automatic horizontal scaling with zero downtime", "Point-in-time recovery up to 35 days", "Multi-region replication for global apps", "Automatic backups and disaster recovery", ], }, { id: "feature-dx", icon:

,
    title: "Developer Experience",
    summary: "Tools designed to make developers more productive.",
    details: [
      "Full TypeScript support with auto-generated types",
      "Local development environment that mirrors production",
      "Integrated debugging and logging tools",
      "Extensive SDK libraries for all major languages",
    ],
  },
  {
    id: "feature-customization",
    icon: ,
    title: "Customization",
    summary: "Flexible theming and white-label capabilities.",
    details: [
      "CSS-in-JS and Tailwind integration out of the box",
      "Custom domain support with SSL certificates",
      "White-label options for enterprise customers",
      "Modular component system for mix-and-match",
    ],
  },
  {
    id: "feature-automation",
    icon: ,
    title: "Automation",
    summary: "Streamline workflows with powerful automation tools.",
    details: [
      "Visual workflow builder with 100+ integrations",
      "Scheduled jobs and cron-based triggers",
      "Event-driven webhooks and real-time updates",
      "API-first design for custom integrations",
    ],
  },
  {
    id: "feature-cloud",
    icon: ,
    title: "Cloud Infrastructure",
    summary: "Enterprise-grade infrastructure without the complexity.",
    details: [
      "Multi-cloud deployment with vendor flexibility",
      "Auto-scaling based on traffic patterns",
      "Zero-config Kubernetes orchestration",
      "Built-in monitoring and alerting",
    ],
  },
]

// ============================================================================
// COMPONENT
// ============================================================================

function Features08({
  badge = "Deep Dive",
  heading = "Features built for scale",
  description = "Click on any feature to explore the details. Each capability is designed to help your team move faster.",
  features = DEFAULT_FEATURES,
  className,
  idBase,
}: Features08Props) {
  const [expandedItems, setExpandedItems] = React.useState>(new Set())
  const headingId = `${idBase ?? "features-08"}-heading`

  const toggleItem = (id: string) => {
    setExpandedItems((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(id)) {
        newSet.delete(id)
      } else {
        newSet.add(id)
      }
      return newSet
    })
  }

  return (
    
      
        {/* Header */}
        
          {badge && (
            
              {badge}
            
          )}
          
            {heading}
          
          {description && (
            
              {description}
            
          )}
        

        {/* Features Grid */}
        
          {features.map((feature) => {
            const isExpanded = expandedItems.has(feature.id)

            return (
              
                {/* Card Header (Clickable) */}
                

                {/* Expanded Content */}
                
                  
                    
                      
                        {feature.details.map((detail, detailIndex) => (
                          
                            
                            {detail}
                          
                        ))}
                      
                    
                  
                
              
            )
          })}
        
      
    
  )
}

export default Features08
export { Features08, type Features08Props, type ExpandableFeatureConfig }