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={250}
              suffix="+"
              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-tenext-dark font-[var(--font-sora)]">
              Projects delivered
            </h3>
            <p className="text-[16px] leading-[1.8] text-tenext-text-muted mt-[10px]">
              Across retail, financial services, healthcare, manufacturing, and
              education.
            </p>
          </div>

          {/* Right Metric */}
          <div className="flex flex-col gap-[20px]">
            <Counter
              target={15}
              suffix="+"
              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-tenext-dark font-[var(--font-sora)]">
              Years engineering digital products
            </h3>
            <p className="text-[16px] leading-[1.8] text-tenext-text-muted mt-[10px]">
              Helping enterprises modernize and scale with measurable business
              outcomes.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}