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

interface CareersHeroProps {
  locale: string;
}

export async function CareersHero({ locale }: CareersHeroProps) {
  const t = await getServerT(locale, "careers");

  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 },
    { lbl: t("hero.s6_lbl"), val: t("hero.s6_val"), red: false },
  ];

  return (
    <section className="careers-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="careers-hero-grid">
          <div>
            <h1>
              {t("hero.title_before")} <em>{t("hero.title_em")}</em>
            </h1>
            <p className="lede">{t("hero.lede")}</p>
            <div className="quick-cta">
              <a href="#openings" className="btn primary">
                {t("hero.btn_openings")}
                <svg viewBox="0 0 24 24">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </a>
              <a href="#culture" className="btn secondary">
                {t("hero.btn_culture")}
                <svg viewBox="0 0 24 24">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
                </svg>
              </a>
              <a
                href={`mailto:${t("hero.btn_email")}`}
                className="btn secondary"
              >
                {t("hero.btn_email")}
              </a>
            </div>
          </div>
          <div className="careers-hero-side">
            <div className="ttl">
              <span>{t("hero.snapshot_label")}</span>
              <span className="live">{t("hero.snapshot_live")}</span>
            </div>
            {stats.map((s, i) => (
              <div key={i} className="stat-row">
                <span className="lbl">{s.lbl}</span>
                <span className={`val${s.red ? " red" : ""}`}>{s.val}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}