"use client";

import { Icons } from "@/components/icons";
import { Section } from "@/components/section";
import { BorderText } from "@/components/ui/border-number";
import { NumberTicker } from "@/components/ui/number-ticker";
import Link from "next/link";

const stats = [
  {
    value: 50,
    unit: "+",
    title: "Specialized Agents",
    subtitle: "Purpose-built AI agents for specific tasks and industries.",
    icon: <Icons.github className="h-5 w-5" />,
  },
  {
    value: 65,
    unit: "x",
    title: "Processing Speed",
    subtitle: "Faster than human operators in complex decision scenarios.",
    icon: <Icons.discord className="h-5 w-5" />,
  },
  {
    value: 100,
    unit: "+",
    title: "Daily Decisions",
    subtitle: "Autonomous conversations made by our systems every day.",
    icon: <Icons.npm className="h-5 w-5" />,
  },
];

export function Statistics() {
  return (
    <Section id="statistics" title="Statistics">
      <div
        className="border-x border-t"
        style={{
          backgroundImage:
            "radial-gradient(circle at bottom center, hsl(var(--secondary) / 0.4), hsl(var(--background)))",
        }}
      >
        <ul className="grid grid-cols-1 sm:grid-cols-3">
          {stats.map((stat, idx) => (
            <li
              key={idx}
              className="flex flex-col items-center justify-center py-8 px-4 border-b sm:border-b-0 last:border-b-0 sm:border-r sm:last:border-r-0 [&:nth-child(-n+2)]:border-t-0 sm:[&:nth-child(-n+3)]:border-t-0 relative group overflow-hidden"
            >
              <div className="text-center relative">
                {/* <BorderText text="eheh"/> */}
                <div className="flex items-center justify-center text-primary text-[6rem] font-bold leading-none">
                  <NumberTicker value={stat.value} />
                  <span>{stat.unit}</span>
                </div>
                <div className="flex flex-col items-center justify-center gap-2 mt-2">
                  <h3 className="text-xl font-medium text-card-foreground text-center text-balance">
                    {stat.title}
                  </h3>
                  <p className="text-sm text-muted-foreground text-balance text-center max-w-md mx-auto">
                    {stat.subtitle}
                  </p>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </Section>
  );
}
