{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/cta-4.tsx",
      "content": "import React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  FaChartLine,\n  FaUsers,\n  FaBoxOpen,\n  FaCoins,\n  FaArrowUp,\n  FaArrowDown,\n  FaClock,\n} from \"react-icons/fa\";\n\nexport type MetricIconType = \"chart\" | \"users\" | \"product\" | \"finance\";\n\nexport interface MetricItem {\n  id: string;\n  label: string;\n  value: string;\n  changePercent: number;\n  icon: MetricIconType;\n}\n\nexport interface ActivityItem {\n  id: string;\n  title: string;\n  timestamp: string;\n  value: string;\n  isPositive: boolean;\n}\n\nexport interface PeriodData {\n  id: string;\n  label: string;\n  metrics: MetricItem[];\n  activities: ActivityItem[];\n}\n\nexport interface PerformanceOverviewProps {\n  title: string;\n\n  accentWord: string;\n\n  subtitle: string;\n\n  ctaLabel: string;\n\n  onCtaClick?: () => void;\n\n  periods: PeriodData[];\n\n  defaultPeriodId?: string;\n}\n\nconst metricIconMap: Record<MetricIconType, React.ElementType> = {\n  chart: FaChartLine,\n  users: FaUsers,\n  product: FaBoxOpen,\n  finance: FaCoins,\n};\n\nexport const PerformanceOverview: React.FC<PerformanceOverviewProps> = ({\n  title,\n  accentWord,\n  subtitle,\n  ctaLabel,\n  onCtaClick,\n  periods,\n  defaultPeriodId,\n}) => {\n  const fallbackPeriod = periods[0]?.id;\n  const activeDefault = defaultPeriodId ?? fallbackPeriod;\n  const activeData = periods.find((p) => p.id === activeDefault) || periods[0];\n\n  return (\n    <section className=\"bg-background w-full py-16\">\n      <div className=\"group border-border bg-primary/5 relative isolate mx-auto flex h-auto min-h-[400px] max-w-[370px] items-center justify-center overflow-hidden rounded-3xl border px-4 pt-12 sm:max-w-2xl sm:px-6 md:max-w-5xl lg:h-[450px] lg:px-8 lg:pt-0\">\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl\"\n        >\n          <div\n            style={{\n              clipPath:\n                \"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)\",\n            }}\n            className=\"from-primary to-primary/60 aspect-577/310 w-xl bg-linear-to-r opacity-30\"\n          />\n        </div>\n\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl\"\n        >\n          <div\n            style={{\n              clipPath:\n                \"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)\",\n            }}\n            className=\"from-primary to-primary/60 aspect-[577/310] w-[36rem] bg-gradient-to-r opacity-30\"\n          />\n        </div>\n\n        <div className=\"grid w-full items-center gap-12 lg:grid-cols-2 lg:gap-16\">\n          <div className=\"flex flex-col items-center gap-5 text-center lg:items-start lg:text-left\">\n            <h2 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl\">\n              {title} <span className=\"text-primary\">{accentWord}</span>\n            </h2>\n            <p className=\"text-muted-foreground max-w-md text-sm leading-relaxed sm:text-base\">\n              {subtitle}\n            </p>\n            <div className=\"mt-1\">\n              <Button\n                onClick={onCtaClick}\n                className=\"h-10 rounded-full px-6 text-sm font-semibold\"\n              >\n                {ctaLabel}\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"flex translate-y-[10%] justify-center transition-transform duration-500 ease-out group-hover:translate-y-[5%] lg:translate-y-[35%] lg:justify-end lg:group-hover:translate-y-[10%]\">\n            <div className=\"relative mx-auto w-full max-w-[320px]\">\n              <div className=\"border-border bg-background relative overflow-hidden rounded-[2.5rem] border-[8px] border-zinc-800 shadow-2xl\">\n                <div className=\"bg-border absolute top-2 left-1/2 z-20 h-6 w-24 -translate-x-1/2 rounded-full bg-zinc-800\" />\n\n                <div className=\"relative h-[480px] overflow-y-auto px-4 pt-12 pb-8 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n                  <div className=\"space-y-6\">\n                    <div className=\"grid grid-cols-2 gap-3\">\n                      {activeData?.metrics.map((metric) => {\n                        const Icon = metricIconMap[metric.icon];\n                        const isPositive = metric.changePercent >= 0;\n\n                        return (\n                          <div\n                            key={metric.id}\n                            className=\"bg-muted/50 border-border/50 hover:bg-muted rounded-2xl border p-3.5 transition-colors\"\n                          >\n                            <div className=\"mb-3 flex items-center gap-2\">\n                              <div className=\"bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-full\">\n                                <Icon className=\"h-3.5 w-3.5\" />\n                              </div>\n                              <span className=\"text-muted-foreground text-xs font-medium\">\n                                {metric.label}\n                              </span>\n                            </div>\n\n                            <div className=\"text-foreground mb-1 text-xl font-bold\">\n                              {metric.value}\n                            </div>\n\n                            <div\n                              className={`flex items-center gap-1 text-xs font-semibold ${\n                                isPositive\n                                  ? \"text-emerald-500\"\n                                  : \"text-rose-500\"\n                              }`}\n                            >\n                              {isPositive ? (\n                                <FaArrowUp className=\"h-2.5 w-2.5\" />\n                              ) : (\n                                <FaArrowDown className=\"h-2.5 w-2.5\" />\n                              )}\n                              <span>{Math.abs(metric.changePercent)}%</span>\n                            </div>\n                          </div>\n                        );\n                      })}\n                    </div>\n\n                    <div>\n                      <div className=\"mb-4 flex items-center justify-between\">\n                        <h3 className=\"text-foreground text-sm font-semibold\">\n                          Recent Activity\n                        </h3>\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          className=\"text-muted-foreground hover:text-foreground h-auto px-0 text-xs font-medium\"\n                        >\n                          View All\n                        </Button>\n                      </div>\n\n                      <div className=\"space-y-3\">\n                        {activeData?.activities.map((activity) => (\n                          <div\n                            key={activity.id}\n                            className=\"border-border/50 bg-background flex items-center justify-between rounded-xl border p-3 shadow-sm\"\n                          >\n                            <div className=\"flex items-center gap-3\">\n                              <div className=\"bg-secondary flex h-9 w-9 shrink-0 items-center justify-center rounded-full\">\n                                <FaClock className=\"text-secondary-foreground h-4 w-4\" />\n                              </div>\n                              <div className=\"min-w-0\">\n                                <p className=\"text-foreground truncate text-sm font-medium\">\n                                  {activity.title}\n                                </p>\n                                <p className=\"text-muted-foreground text-xs\">\n                                  {activity.timestamp}\n                                </p>\n                              </div>\n                            </div>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div className=\"bg-muted-foreground/20 absolute bottom-2 left-1/2 z-20 h-1 w-24 -translate-x-1/2 rounded-full\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/cta-4.tsx"
    }
  ],
  "type": "registry:ui"
}