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

interface Projects2type {
  title: string;
  description: string;
  imagePath: string;
  imageAlt: string;
}

const projects2prop: Projects2type[] = [
  {
    title: "موزاییک",
    description:
      "کاوشی در هماهنگی میان معماری فرانت‌اند و تجربه کاربر. این رویکرد کامپوننت‌های استاندارد و چیدمان منعطف را می‌آمیزد تا رابط‌هایی روان و قابل‌نگهداری بسازد.",
    imagePath: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    imageAlt: "نمایش تعاملی دیجیتال مدرن",
  },
  {
    title: "محصول بازطراحی‌شده",
    description:
      "بازطراحی داشبورد سامانه مدیریت ارتباط با مشتری با تمرکز بر نمایش خط لوله معاملات و KPIهای فروش در یک نمای یکپارچه.",
    imagePath: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    imageAlt: "موکاپ‌ها و عناصر دیزاین سیستم",
  },
  {
    title: "فضاهای تمرکز",
    description:
      "یک نمایش تعاملی که داده‌های زنده را به نمودارها و کارت‌های واکنش‌گرا تبدیل می‌کند و کاربر را به کاوش در داشبورد دعوت می‌کند.",
    imagePath: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    imageAlt: "مفهوم طراحی رابط و معماری فرانت‌اند",
  },
];

interface Projects2Props {
  className?: string;
}

const Projects2 = ({ className }: Projects2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-16 text-4xl font-normal tracking-wide text-foreground md:mb-24 md:text-6xl lg:text-7xl">نمایش پروژه‌ها</h1>

        <div className="space-y-16 md:space-y-24 lg:space-y-32">
          {projects2prop.map((project, index) => (
            <div
              key={index}
              className="grid grid-cols-1 items-center gap-8 text-start lg:grid-cols-12 lg:gap-12"
            >
              <div className="order-2 lg:order-1 lg:col-span-4">
                <h2 className="mb-4 text-base font-bold tracking-wide text-foreground md:text-base">
                  {project.title}
                </h2>
                <p className="max-w-sm text-sm leading-relaxed text-muted-foreground md:text-base">
                  {project.description}
                </p>
              </div>

              <div className="order-1 lg:order-2 lg:col-span-8">
                <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg border border-border">
                  <img
                    src={project.imagePath}
                    alt={project.imageAlt}
                    className="h-full w-full object-cover"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects2 };