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

export default async function RecruitSection() {
  const t = await getTranslations("recruit");

  const positions = [t("pos1"), t("pos2"), t("pos3"), t("pos4")];

  return (
    <section className="about-section about-section--light">
      <div className="about-sub-block">
        <div className="about-divider-label">
          <div className="about-divider-label-row">
            <span className="about-divider-label-text">{t("label")}</span>
            <span className="about-mono-tag about-mono-tag--muted">{t("tag")}</span>
          </div>
        </div>
        <h2 className="recruit-title">{t("title")}</h2>
      </div>

      <div className="recruit-content">
        <div className="recruit-left">
          <span className="recruit-col-label">{t("positionsLabel")}</span>
          <div className="recruit-positions">
            {positions.map((pos, i) => (
              <div
                key={pos}
                className={`recruit-pos${i < positions.length - 1 ? " recruit-pos--border" : ""}`}
              >
                <span className="recruit-pos-title">{pos}</span>
                <span className="recruit-pos-arrow">&rarr;</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}