{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/pricing-4.tsx",
      "content": "import { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { FaCheckCircle } from \"react-icons/fa\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport interface PricingTier {\n  id: string;\n  title: string;\n  currency?: string;\n  amount: string;\n  period: string;\n  description: string;\n  isPopular?: boolean;\n  popularText?: string;\n}\n\nexport interface PricingTab {\n  id: string;\n  label: string;\n  tiers: PricingTier[];\n}\n\nexport interface PricingFeature {\n  id: string;\n  title: string;\n  description: string;\n}\n\nexport interface Pricing4Props {\n  badge?: string;\n  title?: string;\n  tabs?: PricingTab[];\n  features?: PricingFeature[];\n}\n\nconst defaultTabs: PricingTab[] = [\n  {\n    id: \"startup\",\n    label: \"Startup\",\n    tiers: [\n      {\n        id: \"startup-monthly\",\n        title: \"Monthly\",\n        currency: \"$\",\n        amount: \"49\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n      },\n      {\n        id: \"startup-quarterly\",\n        title: \"Quarterly\",\n        currency: \"$\",\n        amount: \"39\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n        isPopular: true,\n        popularText: \"Most Popular\",\n      },\n      {\n        id: \"startup-annually\",\n        title: \"Annually\",\n        currency: \"$\",\n        amount: \"29\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n      },\n    ],\n  },\n  {\n    id: \"enterprise\",\n    label: \"Enterprise\",\n    tiers: [\n      {\n        id: \"enterprise-monthly\",\n        title: \"Monthly\",\n        currency: \"$\",\n        amount: \"99\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n      },\n      {\n        id: \"enterprise-quarterly\",\n        title: \"Quarterly\",\n        currency: \"$\",\n        amount: \"89\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n        isPopular: true,\n        popularText: \"Most Popular\",\n      },\n      {\n        id: \"enterprise-annually\",\n        title: \"Annually\",\n        currency: \"$\",\n        amount: \"79\",\n        period: \"per user\",\n        description: \"When Paid Annually\",\n      },\n    ],\n  },\n];\n\nconst defaultFeatures: PricingFeature[] = [\n  {\n    id: \"f1\",\n    title: \"Unlimited Projects\",\n    description:\n      \"Create as many projects as you need without any restrictions.\",\n  },\n  {\n    id: \"f2\",\n    title: \"Advanced Analytics\",\n    description: \"Get deep insights into your team's performance metrics.\",\n  },\n  {\n    id: \"f3\",\n    title: \"Custom Integrations\",\n    description: \"Connect with your favorite tools using our flexible API.\",\n  },\n  {\n    id: \"f4\",\n    title: \"Priority Support\",\n    description: \"24/7 dedicated support via email and Slack channels.\",\n  },\n  {\n    id: \"f5\",\n    title: \"Role-based Access\",\n    description: \"Set granular permissions for all your team members easily.\",\n  },\n  {\n    id: \"f6\",\n    title: \"Data Export\",\n    description: \"Export your data anytime in standard formats securely.\",\n  },\n  {\n    id: \"f7\",\n    title: \"Audit Logs\",\n    description: \"Track all changes and activities across your workspace.\",\n  },\n  {\n    id: \"f8\",\n    title: \"SSO Authentication\",\n    description: \"Secure enterprise login with SAML and Google Workspace.\",\n  },\n  {\n    id: \"f9\",\n    title: \"Custom Onboarding\",\n    description: \"Dedicated success manager to get your team started fast.\",\n  },\n];\n\nexport default function Pricing4({\n  badge = \"Flexible Plans\",\n  title = \"Simple, predictable pricing\",\n  tabs = defaultTabs,\n  features = defaultFeatures,\n}: Pricing4Props) {\n  const [activeTabId, setActiveTabId] = useState<string>(tabs[0]?.id || \"\");\n  const activeTab = tabs.find((t) => t.id === activeTabId) || tabs[0];\n\n  return (\n    <section className=\"bg-background w-full py-8 md:py-16\">\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"mb-10 flex flex-col items-center justify-center space-y-4 text-center\">\n          {badge && (\n            <span className=\"text-muted-foreground text-sm font-semibold tracking-wider uppercase\">\n              {badge}\n            </span>\n          )}\n          {title && (\n            <h2 className=\"text-foreground text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl\">\n              {title}\n            </h2>\n          )}\n        </div>\n        {tabs.length > 1 && (\n          <div className=\"mb-16 flex justify-center\">\n            <div className=\"bg-muted/40 border-border/50 inline-flex items-center rounded-full border p-1.5\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  onClick={() => setActiveTabId(tab.id)}\n                  className={cn(\n                    \"rounded-full px-8 py-2.5 text-sm font-semibold transition-all duration-300 ease-in-out\",\n                    activeTabId === tab.id\n                      ? \"bg-primary/25 backdrop-blur-sm text-foreground border border-primary/50  shadow-sm \"\n                      : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\",\n                  )}\n                  aria-pressed={activeTabId === tab.id}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          </div>\n        )}\n\n        <div className=\"mx-auto mb-20 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8\">\n          {activeTab.tiers.map((tier) => (\n            <div\n              key={tier.id}\n              className={cn(\n                \"group relative rounded-4xl p-2 transition-all duration-300 md:p-3\",\n                tier.isPopular\n                  ? \"bg-primary/20 dark:bg-primary/50 border-primary/10 border\"\n                  : \"bg-muted/30 shadow-[0px_1px_2px_-1px_rgba(0,0,0,0.1),0px_0px_4px_0px_rgba(0,0,0,0.1)] dark:shadow-[0px_1px_2px_-1px_rgba(255,255,255,0.1),0px_0px_4px_0px_rgba(255,255,255,0.1)]\",\n              )}\n            >\n              <div className=\"bg-muted dark:bg-card flex h-full flex-col rounded-[1.25rem] p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04),0px_1px_2px_-1px_rgba(0,0,0,0.1),0px_2px_4px_0px_rgba(0,0,0,0.06),inset_0_2px_0_0_rgba(255,255,255,0.45)] transition-shadow duration-300 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04),0px_1px_2px_-1px_rgba(0,0,0,0.5),0px_-2px_0px_0px_rgba(255,255,255,0.08)]\">\n                <div className=\"mb-6 flex min-h-[32px] items-start justify-between\">\n                  <h3 className=\"text-foreground text-lg font-medium\">\n                    {tier.title}\n                  </h3>\n                  {tier.isPopular && tier.popularText && (\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-primary/10 text-primary hover:bg-primary/20 rounded-full border-none px-3 py-1 text-xs font-semibold\"\n                    >\n                      {tier.popularText}\n                    </Badge>\n                  )}\n                </div>\n\n                <div className=\"mb-2 flex items-start gap-1\">\n                  {tier.currency && (\n                    <span className=\"text-foreground mt-1.5 text-xl font-bold\">\n                      {tier.currency}\n                    </span>\n                  )}\n                  <span className=\"text-foreground text-6xl font-bold tracking-tighter\">\n                    {tier.amount}\n                  </span>\n                </div>\n\n                {tier.period && (\n                  <div className=\"text-foreground/80 mt-1 mb-6 text-sm font-medium\">\n                    {tier.period}\n                  </div>\n                )}\n\n                <div className=\"mt-auto\">\n                  {tier.description && (\n                    <p className=\"text-muted-foreground text-sm font-medium\">\n                      {tier.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n        {features && features.length > 0 && (\n          <div className=\"mx-auto grid max-w-6xl grid-cols-1 gap-x-12 gap-y-10 pt-8 md:grid-cols-2 lg:grid-cols-3\">\n            {features.map((feature) => (\n              <div key={feature.id} className=\"flex gap-4\">\n                <FaCheckCircle className=\"text-primary/80 mt-0.5 h-5 w-5 shrink-0\" />\n                <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                  <span className=\"text-foreground mr-1.5 font-bold\">\n                    {feature.title}:\n                  </span>\n                  {feature.description}\n                </p>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-4.tsx"
    }
  ],
  "type": "registry:ui"
}