import React from "react";

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

interface Projects13Props {
  className?: string;
}

const persianIndices = ["۱", "۲", "۰۳", "۰۴"];

const Projects13 = ({ className }: Projects13Props) => {
  const projects = [
    {
      id: 1,
      title: "پلتفرم فروشگاه آنلاین",
      description:
        "پلتفرمی کاملاً مقیاس‌پذیر برای فروش آنلاین از صفر طراحی و توسعه داده شد؛ با تمرکز بر سادگی و عملکرد، گردش کار بیش از ۱۰٬۰۰۰ کاربر در صنایع مختلف را متحول کرد.",
      launchDate: "۲۸ فروردین ۱۴۰۴",
      image: "/block-media/shadcnblocks/block/guri4/img1.png",
    },
    {
      id: 2,
      title: "اپلیکیشن بانکداری موبایل",
      description:
        "اپلیکیشن بانکداری موبایل امن و کاربرپسند با پردازش لحظه‌ای تراکنش، احراز هویت بیومتریک و تجربه‌ای روان برای مؤسسات مالی ساخته شد.",
      launchDate: "۲۵ اسفند ۱۴۰۳",
      image: "/block-media/shadcnblocks/block/guri4/img2.png",
    },
    {
      id: 3,
      title: "تولیدکننده محتوای هوش مصنوعی",
      description:
        "پلتفرمی مبتنی بر هوش مصنوعی برای تولید محتوای جذاب بازاریابی، با قابلیت‌های پیشرفته پردازش زبان طبیعی و قالب‌های قابل تنظیم توسعه یافت.",
      launchDate: "۹ اسفند ۱۴۰۳",
      image: "/block-media/shadcnblocks/block/guri4/img3.png",
    },
    {
      id: 4,
      title: "ابزار مدیریت پروژه",
      description:
        "راهکار پیاده‌سازی جامع مدیریت پروژه با همکاری بلادرنگ، پیگیری وظایف و داشبورد تحلیلی برای تیم‌های دورکار و سازمان‌ها ایجاد شد.",
      launchDate: "۳۰ دی ۱۴۰۳",
      image: "/block-media/shadcnblocks/block/guri4/img10.png",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <ul className="relative w-full">
          <li className="hidden justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 lg:flex lg:text-base">
            <p className="w-1/4 text-start">پروژه‌ها</p>
            <p className="w-2/4 text-start">توضیحات</p>
            <p className="w-1/4 text-start">گالری</p>
          </li>
          {projects.map((project, index) => (
            <li
              key={project.id}
              className="flex w-full flex-col justify-between gap-10 border-b py-10 text-start lg:flex-row lg:py-15"
            >
              <div className="flex gap-4 text-xl font-medium tracking-tighter lg:w-1/4">
                <p>{persianIndices[index]}</p>
                <div className="flex flex-col gap-1">
                  <p>{project.title}</p>
                  <p className="text-muted-foreground">({project.launchDate})</p>
                </div>
              </div>
              <div className="text-2xl leading-relaxed lg:w-2/4 lg:text-3xl">
                {project.description}
              </div>
              <div className="w-full text-sm text-foreground/50 lg:h-30 lg:w-1/4 lg:ps-20 lg:text-base">
                <img
                  src={project.image}
                  alt={project.title}
                  className="h-full w-full object-cover"
                />
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Projects13 };