import { Button } from "@/components/ui/button";

const jobCategories = [
  {
    name: "مهندسی",
    jobs: [
      { title: "سازنده محصول موبایل اپل", location: "دورکاری" },
      { title: "مهندس بک‌اند", location: "دورکاری" },
      { title: "مهندس فرانت‌اند", location: "دورکاری" },
    ],
  },
  {
    name: "طراحی",
    jobs: [
      { title: "طراح ارشد", location: "دورکاری" },
      { title: "طراح ستاف", location: "دورکاری" },
      { title: "طراح", location: "دورکاری" },
    ],
  },
];

export const Careers7 = () => {
  return (
    <section dir="rtl" lang="fa" className="container max-w-5xl py-32">
      <div className="border-t pt-5">
        <div className="max-w-2xl">
          <h2 className="text-xl font-semibold tracking-tight md:text-xl">
            به ما بپیوندید
          </h2>
          <p className="mt-4 max-w-2xl pb-10 text-xl text-muted-foreground md:pb-12 md:text-3xl lg:pb-15">
            از نقاط مختلف جهان، کنار هم کار می‌کنیم.
          </p>

          {jobCategories.map((category, categoryIndex) => (
            <div key={categoryIndex}>
              <h3 className="border-b border-foreground py-6 text-lg font-semibold">
                {category.name}
              </h3>
              <div>
                {category.jobs.map((job, jobIndex) => (
                  <div
                    key={`${categoryIndex}-${jobIndex}`}
                    className="flex items-center justify-between gap-10 border-b py-3 md:gap-16 lg:gap-28"
                  >
                    <h4 className="flex-1 font-medium">{job.title}</h4>
                    <p className="text-muted-foreground">{job.location}</p>
                    <Button variant="outline" asChild>
                      <a href="#">مشاهده جزئیات</a>
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};