"use client";

import {
  Award,
  Building2,
  Clock,
  DollarSign,
  Globe,
  GraduationCap,
  Map,
  Users,
} from "lucide-react";

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

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

interface Careers6Props {
  className?: string;
}

const Careers6 = ({ className }: Careers6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-24", className)}>
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-4xl">
          <div className="mb-16 text-center">
            <h1 className="mb-4 text-xl font-bold tracking-tight">
              فرصت‌های شغلی
            </h1>
            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
              ما آینده فناوری را می‌سازیم. موقعیت مناسب خود را پیدا کنید و
              همراه ما رشد کنید.
            </p>
            <div className="mt-8 flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4 shrink-0" />
                <span>بیش از ۱۵۰ عضو تیم</span>
              </div>
              <div className="flex items-center gap-2">
                <Globe className="h-4 w-4 shrink-0" />
                <span>اولویت با دورکاری</span>
              </div>
              <div className="flex items-center gap-2">
                <Award className="h-4 w-4 shrink-0" />
                <span>بهترین محل کار ۱۴۰۳</span>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            {jobs.map((job) => (
              <div
                key={job.id}
                className="group relative overflow-hidden rounded-lg border bg-card p-6"
              >
                <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                  <div className="flex-1">
                    <div className="mb-4">
                      <div className="mb-2 flex items-center gap-3">
                        <h3 className="text-xl font-semibold transition-colors group-hover:text-primary">
                          <a href={job.link} className="hover:underline">
                            {job.title}
                          </a>
                        </h3>
                      </div>
                      <p className="mb-4 text-muted-foreground">
                        {job.description}
                      </p>
                      <Button asChild size="sm" variant="outline">
                        <a href={job.link}>همین حالا درخواست دهید</a>
                      </Button>
                    </div>
                  </div>

                  <div className="flex flex-col gap-4 lg:w-72">
                    <div className="space-y-3">
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Building2 className="h-4 w-4 shrink-0" />
                        <span>{job.department}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Map className="h-4 w-4 shrink-0" />
                        <span>{job.location}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Clock className="h-4 w-4 shrink-0" />
                        <span>{job.type}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <GraduationCap className="h-4 w-4 shrink-0" />
                        <span>{job.experience}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                        <DollarSign className="h-4 w-4 shrink-0" />
                        <span>{job.salary}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Careers6 };