import { ArrowDownRight, ArrowUpRight } from "lucide-react";

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

const projects = [
  {
    heading: "فضای کاری طراحی",
    subheading: "طراحی محصول",
    description:
      "این پروژه شامل بازطراحی کامل داشبورد یک محصول سامانه ابری است؛ تمرکز بر زیبایی‌شناسی مینیمال و باز با تأکیدهای رنگی گرم. هدف، بیشینه‌سازی خوانایی داده و بهینه‌سازی جریان کاربر است.",
    image:
      "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
    url: "#",
  },
  {
    heading: "رابط مدرن محصول",
    subheading: "داشبورد کاری",
    description:
      "در این پروژه داشبورد همکاری پویایی طراحی شد که بهره‌وری و کار تیمی را تقویت می‌کند؛ شامل نواحی کاری منعطف، کامپوننت‌های ماژولار و فضاهای تمرکز.",
    image:
      "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg",
    url: "#",
  },
  {
    heading: "رابط دنج اپ سفارش غذا",
    subheading: "رابط فروشگاهی",
    description:
      "در این پروژه یک رابط صمیمی برای یک اپ سفارش غذا ساخته شد؛ شامل چیدمان سفارشی کارت‌ها، انتخاب تم گرم و طراحی بخش‌های شاخص.",
    image:
      "/block-media/shadcnblocks/block/photos/michal-balog-HTNB1UDJ4Hg-unsplash.jpg",
    url: "#",
  },
  {
    heading: "رابط فروشگاه بوتیک",
    subheading: "طراحی اپ سفارش غذا",
    description:
      "هدف اینجا خلق یک رابط فراگیر برای فروشگاه آنلاین است که تجربه خرید کاربر را ارتقا می‌دهد؛ با تمرکز بر جانمایی استراتژیک محصول و سلسله‌مراتب بصری.",
    image:
      "/block-media/shadcnblocks/block/photos/ivan-lopatin-w2DMtHixE5o-unsplash.jpg",
    url: "#",
  },
];

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

interface Projects18Props {
  className?: string;
}

const Projects18 = ({ className }: Projects18Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-start">
          <p className="mb-1 text-muted-foreground md:text-lg">
            ایده‌ها را به واقعیت تبدیل کنید
          </p>
          <h1 className="text-3xl font-bold md:text-7xl">پروژه‌ها</h1>
          <p className="mt-7 max-w-2xl text-muted-foreground">جایی که مهندسی، طراحی و چشم‌انداز برای ساخت رابط‌های خیره‌کننده گرد هم می‌آیند. مجموعه کامل پروژه‌های ما را ببینید؛ هر کدام با دقت ساخته شده تا تجربه کاربری را دگرگون کند و کار سازمان مشتریانمان را در سراسر جهان بهتر سازد.</p>
          <Button variant="outline" size="lg" className="mt-7">
            مشاهده همه مطالعات موردی
            <ArrowDownRight className="size-4 rtl:rotate-180" />
          </Button>
        </div>
        <div className="mt-24 flex flex-col gap-5 md:mt-36">
          {projects.map((project, idx) => (
            <a
              key={idx}
              href={project.url}
              className="group relative isolate min-h-72 bg-cover bg-center px-5 py-14 text-start lg:px-12 lg:py-24"
              style={{
                backgroundImage: `url(${project.image})`,
              }}
            >
              <div className="relative z-10 flex flex-col gap-7 text-white/80 transition-colors duration-300 ease-out group-hover:text-white lg:flex-row">
                <div className="flex gap-1 text-2xl font-bold">
                  <span>/</span>
                  <span>{projectNumbers[idx]}</span>
                </div>
                <div className="flex flex-1 flex-col gap-2.5">
                  <h3 className="text-2xl font-bold lg:text-4xl">
                    {project.heading}
                  </h3>
                  <p className="text-sm font-medium">{project.subheading}</p>
                </div>
                <div className="flex-1">
                  <div className="flex flex-col">
                    <p>{project.description}</p>
                    <div className="mt-2.5 h-0 overflow-hidden transition-all duration-300 ease-out group-hover:h-10">
                      <div>
                        <Button
                          variant="outline"
                          size="lg"
                          className="dark w-fit opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
                        >
                          مشاهده گزارش موفقیت
                          <ArrowUpRight className="size-4 rtl:rotate-180" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 z-0 bg-black/80 backdrop-blur-xs transition-all duration-300 ease-out group-hover:bg-black/50 group-hover:backdrop-blur-none" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects18 };