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

interface CareersSpotlightProps {
  locale: string;
}

const spotlightImages = [
  "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=800&q=80",
  "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=800&q=80",
  "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80",
];

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

  const cards = [
    {
      img: spotlightImages[0],
      tag: t("spotlight.s1_tag"),
      pay: t("spotlight.s1_pay"),
      dept: t("spotlight.s1_dept"),
      title: t("spotlight.s1_title"),
      desc: t("spotlight.s1_desc"),
      loc: t("spotlight.s1_loc"),
      type: t("spotlight.s1_type"),
      exp: t("spotlight.s1_exp"),
    },
    {
      img: spotlightImages[1],
      tag: t("spotlight.s2_tag"),
      pay: t("spotlight.s2_pay"),
      dept: t("spotlight.s2_dept"),
      title: t("spotlight.s2_title"),
      desc: t("spotlight.s2_desc"),
      loc: t("spotlight.s2_loc"),
      type: t("spotlight.s2_type"),
      exp: t("spotlight.s2_exp"),
    },
    {
      img: spotlightImages[2],
      tag: t("spotlight.s3_tag"),
      pay: t("spotlight.s3_pay"),
      dept: t("spotlight.s3_dept"),
      title: t("spotlight.s3_title"),
      desc: t("spotlight.s3_desc"),
      loc: t("spotlight.s3_loc"),
      type: t("spotlight.s3_type"),
      exp: t("spotlight.s3_exp"),
    },
  ];

  return (
    <section className="careers-sec">
      <div className="wrap">
        <div className="careers-head">
          <div className="left">
            <h2>{t("spotlight.heading")}</h2>
            <span className="count">{t("spotlight.subheading")}</span>
          </div>
          <a href="#openings" className="link">
            {t("spotlight.all_link")} ›
          </a>
        </div>
        <div className="spotlight-grid">
          {cards.map((card, i) => (
            <a key={i} href="#openings" className="spotlight">
              <div className="img">
                <Image src={card.img} alt={card.title} fill unoptimized />
                <span className="tag">{card.tag}</span>
                <span className="pay">{card.pay}</span>
              </div>
              <div className="body">
                <div className="dept">{card.dept}</div>
                <h3>{card.title}</h3>
                <p>{card.desc}</p>
                <div className="meta">
                  <span className="item">
                    <svg viewBox="0 0 24 24">
                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                      <circle cx="12" cy="10" r="3" />
                    </svg>
                    <b>{card.loc}</b>
                  </span>
                  <span className="item">
                    <svg viewBox="0 0 24 24">
                      <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
                      <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                    </svg>
                    <b>{card.type}</b>
                  </span>
                  <span className="item">
                    <svg viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" />
                      <polyline points="12 6 12 12 16 14" />
                    </svg>
                    <b>{card.exp}</b>
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}