import { getTranslations } from "next-intl/server";

export default async function AICapabilitiesSection() {
  const t = await getTranslations("aiCap");

  const aiCards = [
    {
      num: t("card1Num"),
      title: t("card1Title"),
      desc: t("card1Desc"),
      metrics: [
        { label: t("card1Metric1Label"), value: t("card1Metric1Value") },
        { label: t("card1Metric2Label"), value: t("card1Metric2Value") },
      ],
    },
    {
      num: t("card2Num"),
      title: t("card2Title"),
      desc: t("card2Desc"),
      metrics: [
        { label: t("card2Metric1Label"), value: t("card2Metric1Value") },
        { label: t("card2Metric2Label"), value: t("card2Metric2Value") },
      ],
    },
    {
      num: t("card3Num"),
      title: t("card3Title"),
      desc: t("card3Desc"),
      metrics: [
        { label: t("card3Metric1Label"), value: t("card3Metric1Value") },
        { label: t("card3Metric2Label"), value: t("card3Metric2Value") },
      ],
    },
    {
      num: t("card4Num"),
      title: t("card4Title"),
      desc: t("card4Desc"),
      metrics: [
        { label: t("card4Metric1Label"), value: t("card4Metric1Value") },
        { label: t("card4Metric2Label"), value: t("card4Metric2Value") },
      ],
    },
  ];

  return (
    <section className="section section--light">
      <div className="cap-header">
        <div className="cap-header-left">
          <div className="cap-divider">
            <span className="cap-divider-line" />
            <span className="cap-divider-label">{t("label")}</span>
          </div>
          <h2 className="cap-title">{t("title")}</h2>
          <p className="cap-subtitle">{t("subtitle")}</p>
        </div>
        <div className="cap-header-right">
          <span className="cap-big-number">{t("moduleCount")}</span>
          <span className="cap-metric-label">{t("moduleLabel")}</span>
        </div>
      </div>

      <div className="cap-grid">
        {aiCards.map((card) => (
          <div key={card.num} className="cap-card cap-card--light">
            <div className="cap-card-header">
              <span className="cap-card-num">{card.num}</span>
              <h3 className="cap-card-title">{card.title}</h3>
            </div>
            <p className="cap-card-desc">{card.desc}</p>
            <div className="cap-card-metrics">
              {card.metrics.map((m) => (
                <div key={m.label} className="cap-card-metric">
                  <span className="cap-card-metric-label">{m.label}</span>
                  <span className="cap-card-metric-value">{m.value}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}