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

interface Projects4Props {
  className?: string;
}

const Projects4 = ({ className }: Projects4Props) => {
  const projects = [
    {
      id: 1,
      title: "بهینه‌سازی گردش کار طراحی",
      category: "رابط و تجربه کاربری",
      date: "۲۰ خرداد ۱۴۰۴",
      image:
        "/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-settings-and-design-panels.svg",
    },
    {
      id: 2,
      title: "دسترسی یکپارچه جهانی",
      category: "فناوری ابری",
      date: "۱۸ خرداد ۱۴۰۴",
      image:
        "/block-media/shadcnblocks/block/illustrations/tokyo-exchange-between-the-user-and-the-global-network.svg",
    },
    {
      id: 3,
      title: "رابط بارگذاری صفحه بعد",
      category: "توسعه فرانت‌اند",
      date: "۱۵ خرداد ۱۴۰۴",
      image:
        "/block-media/shadcnblocks/block/illustrations/tokyo-loading-the-next-page.svg",
    },
    {
      id: 4,
      title: "تحلیل ترافیک وب",
      category: "مصورسازی داده",
      date: "۱۰ خرداد ۱۴۰۴",
      image:
        "/block-media/shadcnblocks/block/illustrations/tokyo-volumetric-analytics-of-different-types-in-web-browsers.svg",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container space-y-16">
        <div className="flex flex-col justify-start gap-5 text-start md:gap-12 lg:flex-row lg:items-center lg:justify-between">
          <h1 className="text-4xl font-medium md:text-5xl lg:text-7xl">
            کاوش در پروژه‌های ما
          </h1>

          <div className="flex flex-col items-start gap-6 md:flex-row">
            <p className="max-w-xs text-lg font-medium text-muted-foreground">مجموعه‌ای گزیده از نماها که رویکرد ما به طراحی تمیز، تجربه کاربری آگاهانه و وب مدرن را نشان می‌دهد.</p>

            <div className="max-w-xs">
              <span className="font-medium text-foreground">تجربه onboarding</span>
              <p className="text-base text-muted-foreground">
                هر پروژه مطالعه موردی منحصربه‌فردی است که با دقت، عملکرد و
                هدف ساخته شده.
              </p>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
          {projects.map((project) => (
            <div key={project.id} className="group text-start">
              <img
                src={project.image}
                alt={project.title}
                className="h-96 w-full rounded-lg bg-accent object-contain transition-transform duration-300 group-hover:scale-105"
              />
              <div className="mt-4 flex items-start justify-between">
                <div>
                  <h2 className="text-xl font-semibold">{project.title}</h2>
                  <p className="mt-2 text-sm text-muted-foreground">
                    {project.category}
                  </p>
                </div>
                <div>
                  <p className="text-xl font-medium text-muted-foreground">
                    {project.date}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects4 };