import { ArrowRight } from "lucide-react";

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

const features = [
  {
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "تقویم تیم",
    reversed: false,
  },
  {
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "فضای همکاری تیمی",
    reversed: true,
  },
];

interface Feature74Props {
  className?: string;
}

const Feature74 = ({ className }: Feature74Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col gap-16 lg:px-16">
        <div className="lg:max-w-sm">
          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
            همکاری از راه دور را ساده کنید
          </h2>
          <p className="mb-8 text-muted-foreground lg:text-lg">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
          <a
            href="#"
            className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
          >
            کار گروهی
            <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
          </a>
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
          {features.map((feature) => {
            const image = (
              <div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]">
                <img
                  src={feature.image}
                  alt={feature.imageAlt}
                  className="aspect-16/9 h-full w-full object-cover object-center"
                />
              </div>
            );
            const content = (
              <div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
                  {feature.title}
                </h3>
                <p className="text-muted-foreground lg:text-lg">
                  {feature.description}
                </p>
              </div>
            );

            return (
              <div
                key={feature.title}
                className={cn(
                  "flex overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8",
                  feature.reversed ? "flex-col-reverse" : "flex-col",
                )}
              >
                {feature.reversed ? (
                  <>
                    {content}
                    {image}
                  </>
                ) : (
                  <>
                    {image}
                    {content}
                  </>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature74 };