"use client";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { STATS } from "./lib/content";

/** Trust band: four headline statistics. */
export function StatsSection() {
  const { t } = useTranslation();

  return (
    <section className="border-y border-border bg-white">
      <div className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-4 px-4 py-10 sm:px-6 lg:grid-cols-4 lg:px-8">
        {STATS.map((key) => (
          <div
            key={key}
            className="flex flex-col items-center gap-1 rounded-[20px] bg-background/60 px-4 py-6 text-center"
          >
            <Typography
              as="span"
              variant="number"
              className="text-[28px] leading-none font-bold text-primary-blue sm:text-[34px]"
            >
              {t(`home.stats.${key}.value`)}
            </Typography>
            <Typography
              variant="caption"
              color="secondary"
              className="text-[13px]"
            >
              {t(`home.stats.${key}.label`)}
            </Typography>
          </div>
        ))}
      </div>
    </section>
  );
}