import Link from "next/link";
import { Card, CardContent } from "@/registry/default/ui/card/radix";
import {
  ArrowRight,
  ChartNoAxesCombined,
  TrendingUp,
  Users,
} from "lucide-react";
import { cn } from "@/lib/utils";

const cards = [
  {
    color: "bg-blue-600",
    icon: ChartNoAxesCombined,
    value: "27.3%",
    title: "NPS Improvement",
    desc: "Our new onboarding flow increased Net Promoter Score by 27.3% in Q2.",
    cta: "Read full story",
  },
  {
    color: "bg-emerald-600",
    icon: Users,
    value: "8,200",
    title: "Active Users",
    desc: "Highest monthly active users since launch. Engagement up 12% MoM.",
    cta: "See user insights",
  },
  {
    color: "bg-fuchsia-700",
    icon: TrendingUp,
    value: "$1.4M",
    title: "ARR Growth",
    desc: "Annual recurring revenue grew by $1.4M in the last quarter.",
    cta: "View ARR breakdown",
  },
];

export default function StatisticCard15() {
  return (
    <div className="min-h-screen flex items-center justify-center p-6 lg:p-8">
      <div className="@container grow w-full">
        <div className="grid grid-cols-1 @3xl:grid-cols-3 gap-8 w-full">
          {cards.map((card, i) => (
            <Card
              key={i}
              className={cn(
                "rounded-2xl overflow-hidden shadow-lg p-0 border-0",
                card.color,
              )}
            >
              <CardContent className="relative overflow-hidden flex flex-col justify-end py-6 px-0 pb-0">
                {/* Icon */}
                <div className="px-6 mb-3.5">
                  <card.icon className="size-8 text-white/60" />
                </div>

                {/* Main content */}
                <div className="flex-1 flex flex-col justify-center items-start px-6">
                  <div className="text-white text-4xl font-bold mb-6">
                    {card.value}
                  </div>
                  <div className="text-white text-lg font-semibold mb-1">
                    {card.title}
                  </div>
                  <div className="text-white/80 text-sm mb-2">{card.desc}</div>
                </div>

                {/* Bottom bar */}
                <Link
                  href="#"
                  className="group/card w-full bg-black/90 dark:bg-zinc-800 px-6 py-4 flex items-center justify-between mt-6"
                >
                  <span className="text-white text-sm font-medium">
                    {card.cta}
                  </span>
                  <ArrowRight className="group-hover/card:translate-x-1 transition-transform duration-300 w-5 h-5 text-white" />
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}