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

interface JoinSectionProps {
  locale: string;
}

export async function JoinSection({ locale }: JoinSectionProps) {
  const t = await getServerT(locale, "about.join");

  const jobs = [
    { title: t("j1_title"), meta: t("j1_meta") },
    { title: t("j2_title"), meta: t("j2_meta") },
    { title: t("j3_title"), meta: t("j3_meta") },
    { title: t("j4_title"), meta: t("j4_meta") },
    { title: t("j5_title"), meta: t("j5_meta") },
  ];

  return (
    <section className="join-band">
      <div className="wrap join-grid">
        <div>
          <div className="join-kicker">{t("kicker")}</div>
          <h2>
            {t("heading_before")} <em>{t("heading_em")}</em>
            <br />
            {t("heading_after")}
          </h2>
          <p className="lede">{t("lede")}</p>
          <div className="join-actions">
            <a href="#" className="btn primary">
              {t("btn_primary")}
              <svg viewBox="0 0 24 24">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
            <a href={`/company/contact`} className="btn secondary">
              {t("btn_secondary")}
              <svg viewBox="0 0 24 24">
                <path d="M3 8l9 6 9-6M3 8h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              </svg>
            </a>
          </div>
        </div>
        <div className="join-openings">
          <div className="ttl">
            <span>{t("openings_title")}</span>
            <span className="ct">{t("openings_count")}</span>
          </div>
          {jobs.map((job, i) => (
            <a key={i} href="#" className="opening-row">
              <div className="info">
                <span className="nm">{job.title}</span>
                <span className="meta">{job.meta}</span>
              </div>
              <span className="arr">›</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}