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

interface ContactHeroProps {
  locale: string;
}

export async function ContactHero({ locale }: ContactHeroProps) {
  const t = await getServerT(locale, "contact");

  return (
    <header className="contact-hero">
      <div className="wrap contact-hero-row">
        <div>
          <div className="contact-crumb">
            <Link href={`/`}>{t("breadcrumb_home")}</Link>
            <span className="sep">›</span>
            <span>{t("breadcrumb")}</span>
          </div>
          <h1>{t("title")}</h1>
          <p>{t("subtitle")}</p>
          <div className="pillrow">
            <span className="pill">📰 {t("pill_newsroom")}</span>
            <span className="pill">🛡️ {t("pill_secure")}</span>
            <span className="pill">💬 {t("pill_reader")}</span>
            <span className="pill">📣 {t("pill_press")}</span>
          </div>
        </div>

        <div className="contact-stat-block">
          <div className="item">
            <span className="lbl">{t("stat_response_label")}</span>
            <span className="v red">{t("stat_response_value")}</span>
          </div>
          <div className="item">
            <span className="lbl">{t("stat_tips_label")}</span>
            <span className="v">{t("stat_tips_value")}</span>
          </div>
          <div className="item">
            <span className="lbl">{t("stat_stories_label")}</span>
            <span className="v">{t("stat_stories_value")}</span>
          </div>
          <div className="item">
            <span className="lbl">{t("stat_jobs_label")}</span>
            <span className="v red">{t("stat_jobs_value")}</span>
          </div>
        </div>
      </div>
    </header>
  );
}