Pipeline funnel

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
} from "@cooud-ui/ui";
import { Activity, DollarSign, Users } from "lucide-react";

export function StatsPipelineBlock() {
  const stats = [
    {
      label: "Trials started",
      value: "2,184",
      delta: "+16.8%",
      trend: "up" as const,
      icon: Users,
    },
    {
      label: "Qualified demos",
      value: "642",
      delta: "+7.4%",
      trend: "up" as const,
      icon: Activity,
    },
    {
      label: "Paid upgrades",
      value: "238",
      delta: "+11.1%",
      trend: "up" as const,
      icon: DollarSign,
    },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-display text-lg">Activation funnel</CardTitle>
        <p className="text-sm text-fg-secondary">Weekly product-led conversion</p>
      </CardHeader>
      <CardContent className="grid gap-0 overflow-hidden rounded-xl border border-border sm:grid-cols-3">
        {stats.map(({ label, value, delta, trend, icon: Icon }, index) => (
          <div
            key={label}
            className="flex flex-col gap-4 border-border bg-surface-raised p-5 sm:border-l sm:first:border-l-0"
          >
            <div className="flex items-center justify-between gap-3">
              <span className="inline-flex size-9 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
                <Icon className="size-4" aria-hidden="true" />
              </span>
              <span className="text-xs font-medium text-fg-tertiary">Step {index + 1}</span>
            </div>
            <Metric className="gap-1.5">
              <MetricLabel>{label}</MetricLabel>
              <MetricValue className="text-3xl">{value}</MetricValue>
            </Metric>
            <MetricDelta trend={trend}>{delta}</MetricDelta>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}