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

const steps = [
  {
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    alt: "تقویم تیم",
    imageClassName:
      "z-10 aspect-video w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto",
  },
  {
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    alt: "فضای همکاری تیمی",
    imageClassName:
      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
  },
  {
    title: "گزارش پیشرفت",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    alt: "برد مدیریت پروژه",
    imageClassName:
      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
  },
];

function StepConnector({ index }: { index: number }) {
  if (index === 0) {
    return (
      <div className="flex flex-col items-center justify-between gap-1">
        <span className="h-20 shrink-0" />
        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
          {(index + 1).toLocaleString("fa-IR")}
        </span>
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-b from-transparent to-primary opacity-70" />
      </div>
    );
  }

  if (index === steps.length - 1) {
    return (
      <div className="flex flex-col items-center justify-between gap-1">
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-t from-transparent to-primary opacity-70" />
        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
          {(index + 1).toLocaleString("fa-IR")}
        </span>
        <span className="h-20 shrink-0" />
      </div>
    );
  }

  return (
    <div className="relative flex flex-col items-center justify-between gap-1">
      <span className="absolute -top-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="absolute -bottom-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
        {(index + 1).toLocaleString("fa-IR")}
      </span>
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
    </div>
  );
}

interface Feature102Props {
  className?: string;
}

const Feature102 = ({ className }: Feature102Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col justify-center gap-7 md:text-center">
          <h2 className="text-xl md:text-xl">همکاری از راه دور را ساده کنید</h2>
          <p className="text-sm text-muted-foreground md:text-base">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
        </div>
        <div className="mx-auto mt-14 flex max-w-5xl flex-col gap-4 lg:px-16">
          {steps.map((step, index) => (
            <div
              key={step.title}
              className="flex flex-col items-center justify-between min-[960px]:flex-row min-[960px]:gap-10"
            >
              <div className="flex gap-4 min-[960px]:max-w-md">
                <StepConnector index={index} />
                <div className="flex flex-col justify-center gap-5 px-0 min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
                  <h3 className="text-xl min-[960px]:text-xl">{step.title}</h3>
                  <p className="text-sm text-muted-foreground min-[960px]:text-base">
                    {step.description}
                  </p>
                </div>
              </div>
              <img
                src={step.image}
                alt={step.alt}
                className={step.imageClassName}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature102 };