PLOT. 숫자로 보는 서비스 4칸

const FACTS = [
  { label: "제작 상품", value: "4", unit: "종" },
  { label: "AI CI 후보", value: "3", unit: "개씩 제안" },
  { label: "최대 패키지 할인", value: "15", unit: "%" },
  { label: "홈페이지 호스팅 월 요금", value: "15,000", unit: "원~" },
];

/** PLOT. 숫자로 보는 서비스: 가운데 제목 아래 큰 숫자 4개(모바일 2열, 데스크톱 4열) */
export default function Stats() {
  return (
    <section className="w-full bg-white px-5 py-28 text-[#020A22]">
      <div className="mx-auto max-w-5xl text-center">
        <h2 className="text-[26px] font-bold tracking-[-0.04em] break-keep md:text-[38px]">
          브랜드의 시작, <span className="text-[#0055FF]">PLOT에선 간단해요</span>
        </h2>
        <dl className="mt-14 grid grid-cols-2 gap-y-10 md:grid-cols-4">
          {FACTS.map((f) => (
            <div key={f.label}>
              <dt className="text-[15px] font-medium text-[#020A22]/55">{f.label}</dt>
              <dd className="mt-2 text-[34px] font-black tracking-[-0.04em] whitespace-nowrap tabular-nums sm:text-[44px] lg:text-[56px]">
                {f.value}
                <span className="ml-0.5 text-base font-bold tracking-normal md:text-lg">{f.unit}</span>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}