import { getTranslation } from "@turbostarter/i18n/server";

const stats = [
  { key: "reports" },
  { key: "rating" },
  { key: "dimensions" },
] as const;

export const SocialProof = async () => {
  const { t } = await getTranslation({ ns: "marketing" });

  return (
    <div className="border-y bg-muted/30 py-6 sm:py-8">
      <div className="mx-auto flex max-w-5xl flex-col items-center justify-center gap-6 px-6 sm:flex-row sm:gap-12 md:gap-16">
        {stats.map((stat) => {
          const text = t(`socialProof.${stat.key}` as const);
          const match = text.match(/^([\d.+]+)\s+(.+)$/);
          const number = match?.[1] ?? text;
          const label = match?.[2] ?? "";

          return (
            <div key={stat.key} className="flex flex-col items-center text-center">
              <span className="text-2xl font-bold tracking-tight sm:text-3xl">
                {number}
              </span>
              <span className="text-sm text-muted-foreground">{label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};