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

interface CorrectionsHeroProps {
  locale: string;
}

export async function CorrectionsHero({ locale }: CorrectionsHeroProps) {
  const t = await getServerT(locale, "corrections");

  const stats = [
    { lbl: t("hero.s1_lbl"), val: t("hero.s1_val"), red: true },
    { lbl: t("hero.s2_lbl"), val: t("hero.s2_val"), red: false },
    { lbl: t("hero.s3_lbl"), val: t("hero.s3_val"), red: false },
    { lbl: t("hero.s4_lbl"), val: t("hero.s4_val"), red: false },
    { lbl: t("hero.s5_lbl"), val: t("hero.s5_val"), red: false },
  ];

  return (
    <header className="corr-hero">
      <div className="wrap">
        <div className="crumb">
          <Link href={`/`}>{t("breadcrumb_home")}</Link>
          <span className="sep">›</span>
          <Link href={`/about`}>{t("breadcrumb_about")}</Link>
          <span className="sep">›</span>
          <span>{t("breadcrumb")}</span>
        </div>
        <div className="corr-grid">
          <div>
            <h1>
              {t("hero.title_before")} <em>{t("hero.title_em")}</em>.
            </h1>
            <p className="lede">{t("hero.lede")}</p>
            <div className="pillrow">
              <span className="pill">{t("hero.pill1")}</span>
              <span className="pill">{t("hero.pill2")}</span>
              <span className="pill">{t("hero.pill3")}</span>
            </div>
          </div>
          <div className="corr-stats">
            <div className="ttl">{t("hero.stats_label")}</div>
            {stats.map((s, i) => (
              <div key={i} className="row">
                <span className="lbl">{s.lbl}</span>
                <span className={`val${s.red ? " red" : ""}`}>{s.val}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </header>
  );
}