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

interface HireProcessProps {
  locale: string;
}

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

  const steps = [
    { num: t("process.p1_num"), title: t("process.p1_title"), desc: t("process.p1_desc"), when: t("process.p1_when") },
    { num: t("process.p2_num"), title: t("process.p2_title"), desc: t("process.p2_desc"), when: t("process.p2_when") },
    { num: t("process.p3_num"), title: t("process.p3_title"), desc: t("process.p3_desc"), when: t("process.p3_when") },
    { num: t("process.p4_num"), title: t("process.p4_title"), desc: t("process.p4_desc"), when: t("process.p4_when") },
    { num: t("process.p5_num"), title: t("process.p5_title"), desc: t("process.p5_desc"), when: t("process.p5_when") },
  ];

  return (
    <section className="careers-sec">
      <div className="wrap">
        <div className="careers-head">
          <div className="left">
            <h2>{t("process.heading")}</h2>
            <span className="count">{t("process.count")}</span>
          </div>
        </div>
        <div className="process-grid">
          {steps.map((step, i) => (
            <div key={i} className="process-step">
              <div className="num">{step.num}</div>
              <h4>{step.title}</h4>
              <p>{step.desc}</p>
              <div className="when">
                <b>{step.when}</b>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}