Vercep Metrics-1

"use client";

import { Square } from "lucide-react";
import { Badge } from "@/demos/ui/badge";

const metrics = [
  {
    description: "Years in business consulting",
    details: ["8+ industries served", "5+ countries reached"],
    label: "Experience",
    suffix: "+",
    value: "15",
  },
  {
    description: "Companies launched",
    details: ["90% client satisfaction rate", "30-45 days average launch time"],
    label: "Client Success",
    suffix: "+",
    value: "200",
  },
  {
    description: "Earned by clients",
    details: ["80% client return rate", "300+ founders launched"],
    label: "Impact",
    suffix: "M+",
    value: "$25",
  },
];

export default function Metrics() {
  return (
    <section className="relative w-full dark:text-black">
      <div className="bg-yellow-50 pt-12 pb-32 sm:pt-20 sm:pb-40">
        <div className="mx-auto max-w-full px-4 sm:px-8 lg:px-16">
          <div className="border-neutral-300 border-b">
            <Badge
              className="flex w-fit items-center rounded-none border-none bg-secondary px-4 py-0.5 font-medium text-neutral-800"
              size="lg"
              variant="outline"
            >
              <Square className="size-3 bg-neutral-800 text-neutral-800" /> BY THE
              NUMBERS
            </Badge>
          </div>

          <h2 className="mt-8 max-w-2xl text-3xl leading-[1.15] tracking-tight sm:text-4xl lg:text-5xl">
            Numbers don&apos;t lie — and ours say{" "}
            <span className="bg-black px-2 text-[#e3fd79]">
              you&apos;re in good hands.
            </span>
          </h2>
        </div>
      </div>

      <div className="bg-neutral-950 pb-12 sm:pb-20">
        <div className="mx-auto max-w-full px-4 sm:px-8 lg:px-16">
          <div className="-mt-4 mb-6 flex">
            <div className="size-4 bg-neutral-950" />
          </div>

          <div className="-mt-24 grid grid-cols-1 gap-px bg-neutral-700 sm:-mt-32 md:grid-cols-3">
            {metrics.map((metric) => (
              <div
                className="flex flex-col bg-neutral-900 px-6 pt-6 pb-8 sm:px-8"
                key={metric.label}
              >
                <Badge
                  className="flex w-fit items-center rounded-none bg-[#e3fd79]/10 px-3 py-0.5 font-medium text-[#e3fd79] uppercase tracking-[0.15em]"
                  size="lg"
                >
                  <Square className="size-2.5 bg-[#e3fd79]" />{" "}
                  {metric.label.toUpperCase()}
                </Badge>

                <p className="mt-6 bg-neutral-900 font-medium text-6xl text-[#e3fd79] tracking-tight sm:text-7xl md:text-8xl">
                  {metric.value}
                  <span className="text-4xl sm:text-5xl md:text-6xl">
                    {metric.suffix}
                  </span>
                </p>

                <p className="mt-2 font-medium text-lg text-white">
                  {metric.description}
                </p>

                <div className="mt-4 flex flex-col gap-2">
                  {metric.details.map((detail) => (
                    <div className="flex items-center gap-2.5" key={detail}>
                      <div className="size-2 shrink-0 rounded-full bg-[#e3fd79]" />
                      <span className="text-neutral-300">{detail}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}