import { getServerT, getServerLocale } from "@/lib/i18n/server";

interface NumbersSectionProps {
  locale: string;
}

export async function NumbersSection({ locale }: NumbersSectionProps) {
  const t = await getServerT(locale, "about.numbers");

  const cards = [
    { n: t("n1_n"), l: t("n1_l"), desc: t("n1_desc"), variant: "" },
    { n: t("n2_n"), l: t("n2_l"), desc: t("n2_desc"), variant: "brand" },
    { n: t("n3_n"), l: t("n3_l"), desc: t("n3_desc"), variant: "dark" },
    { n: t("n4_n"), l: t("n4_l"), desc: t("n4_desc"), variant: "" },
    { n: t("n5_n"), l: t("n5_l"), desc: t("n5_desc"), variant: "" },
    { n: t("n6_n"), l: t("n6_l"), desc: t("n6_desc"), variant: "" },
    { n: t("n7_n"), l: t("n7_l"), desc: t("n7_desc"), variant: "" },
    { n: t("n8_n"), l: t("n8_l"), desc: t("n8_desc"), variant: "" },
  ];

  return (
    <section className="wrap about-sec">
      <div className="about-head">
        <div>
          <div className="kicker">{t("kicker")}</div>
          <h2>{t("heading")}</h2>
        </div>
        <div className="right">
          <p>{t("right")}</p>
        </div>
      </div>
      <div className="numbers-grid">
        {cards.map((card, i) => (
          <div key={i} className={`number-card${card.variant ? ` ${card.variant}` : ""}`}>
            <span className="n">{card.n}</span>
            <span className="l">{card.l}</span>
            <span className="desc">{card.desc}</span>
          </div>
        ))}
      </div>
    </section>
  );
}