import { RevealOnView } from "@/components/shared/RevealOnView";
import { differentiators } from "@/data/site-content";

export function MetricsSection() {
  // Show the first four differentiators as a proof grid — real commitments
  // in place of the template's unverified statistics.
  const points = differentiators.slice(0, 4);

  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] sm:grid-cols-2 md:gap-[60px]">
          {points.map((point, index) => (
            <RevealOnView
              key={point.id}
              delay={index * 90}
              className="flex flex-col gap-[14px]"
            >
              <span className="gradient-text-purple text-[22px] font-bold font-[var(--font-sora)]">
                0{index + 1}
              </span>
              <h3 className="text-[24px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
                {point.title}
              </h3>
              <p className="text-[16px] leading-[1.8] text-tenext-text-muted">
                {point.description}
              </p>
            </RevealOnView>
          ))}
        </div>
      </div>
    </section>
  );
}