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

export default async function ParentCompanySection() {
  const t = await getTranslations("parentCompany");

  const metrics = [
    { value: t("metric1Value"), label: t("metric1Label") },
    { value: t("metric2Value"), label: t("metric2Label") },
    { value: t("metric3Value"), label: t("metric3Label") },
    { value: t("metric4Value"), label: t("metric4Label") },
    { value: t("metric5Value"), label: t("metric5Label") },
  ];

  const bizTypes = [
    { title: t("biz1Title"), stats: t("biz1Stats") },
    { title: t("biz2Title"), stats: t("biz2Stats") },
    { title: t("biz3Title"), stats: t("biz3Stats") },
    { title: t("biz4Title"), stats: t("biz4Stats") },
  ];

  return (
    <section className="about-section about-section--dark">
      <div className="about-sub-block">
        <div className="about-divider-label about-divider-label--dark">
          <div className="about-divider-label-row">
            <span className="about-divider-label-text about-divider-label-text--muted">
              {t("bgLabel")}
            </span>
            <span className="about-mono-tag">{t("stockCode")}</span>
          </div>
        </div>
        <h2 className="about-section-title about-section-title--light">
          {t("title")}
        </h2>
        <p className="about-body-lg">{t("subtitle")}</p>
      </div>

      <div className="parent-metric-grid">
        {metrics.map((m) => (
          <div key={m.label} className="parent-metric-card">
            <span className="parent-metric-value">{m.value}</span>
            <span className="parent-metric-label">{m.label}</span>
          </div>
        ))}
      </div>

      <div className="about-sub-block">
        <div className="about-divider-label about-divider-label--dark">
          <span className="about-divider-label-text about-divider-label-text--dim">
            {t("bizLabel")}
          </span>
        </div>
        <div className="parent-biz-grid">
          {bizTypes.map((b) => (
            <div key={b.title} className="parent-biz-card">
              <span className="parent-biz-title">{b.title}</span>
              <span className="parent-biz-stats">{b.stats}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}