import { Map } from "lucide-react";

import { cn } from "@/lib/utils";

const jobs = [
  {
    title: "مهندس ارشد نرم‌افزار",
    category: "مهندسی",
    description:
      "مسئول توسعه و نگهداری سامانه‌های نرم‌افزاری پیشرفته.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۱۲۰ تا ۱۸۰ میلیون تومان",
    link: "#",
  },
  {
    title: "مدیر محصول",
    category: "مهندسی",
    description: "نسل بعدی محصولات را با تیم طراحی و مهندسی توسعه دهید.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۱۰۰ تا ۱۵۰ میلیون تومان",
    link: "#",
  },
  {
    title: "مهندس تضمین کیفیت",
    category: "مهندسی",
    description:
      "کیفیت محصولات نرم‌افزاری را از طریق تست و خودکارسازی تضمین کنید.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۸۰ تا ۱۲۰ میلیون تومان",
    link: "#",
  },
  {
    title: "کارشناس پشتیبانی فنی",
    category: "مهندسی",
    description:
      "پشتیبانی فنی به مشتریان و تیم‌های داخلی ارائه دهید.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۶۰ تا ۹۰ میلیون تومان",
    link: "#",
  },
  {
    title: "نویسنده محتوا",
    category: "بازاریابی",
    description:
      "محتوای تخصصی برای وبلاگ، وب‌سایت و شبکه‌های اجتماعی تولید کنید.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۵۰ تا ۸۰ میلیون تومان",
    link: "#",
  },
  {
    title: "مدیر شبکه‌های اجتماعی",
    category: "بازاریابی",
    description:
      "استراتژی شبکه‌های اجتماعی را اجرا کنید و با مخاطبان تعامل داشته باشید.",
    location: "دورکاری",
    type: "تمام‌وقت",
    salary: "۴۵ تا ۷۵ میلیون تومان",
    link: "#",
  },
];

interface Careers5Props {
  className?: string;
}

const Careers5 = ({ className }: Careers5Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-5xl">
          <div className="mb-12 text-center">
            <h1 className="mb-3 text-xl font-semibold">فرصت‌های شغلی</h1>
          </div>
          <div>
            {jobs.map((job) => (
              <div key={job.title} className="border-t py-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <a
                      href={job.link}
                      className="mb-1 text-lg font-semibold hover:underline"
                    >
                      {job.title}
                    </a>
                    <p className="text-muted-foreground">{job.description}</p>
                  </div>
                  <div className="flex gap-4 text-sm text-muted-foreground">
                    <div className="flex gap-2">
                      <Map className="h-auto w-4" />
                      {job.location}
                    </div>
                    <div className="flex gap-2">{job.salary}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Careers5 };