import { Counter } from "@/components/shared/Counter";

export function MetricsSection() {
  return (
    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
      <div className="mx-auto max-w-[1260px]">
        <div className="grid grid-cols-1 gap-[50px] md:grid-cols-2 md:gap-[80px]">
          
          {/* Left Metric */}
          <div className="flex flex-col gap-[20px]">
            <Counter
              target={125}
              suffix="k"
              numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
              title=""
            />
            <h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
              Happy & satisfied customers
            </h3>
            <p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
              Achieved a 95% customer satisfaction rate across all AI solutions.
            </p>
          </div>

          {/* Right Metric */}
          <div className="flex flex-col gap-[20px]">
            <Counter
              prefix="$"
              target={150}
              suffix="b"
              numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
              title=""
            />
            <h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
              Earns with our Aiero product
            </h3>
            <p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
              Delivered over $150 billion in cost savings for clients through optimized AI solutions.
            </p>
          </div>

        </div>
      </div>
    </section>
  );
}