import { Cog, Gem, Landmark, LocateFixed } from "lucide-react";
import React from "react";

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Step {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
}

const STEPS: Step[] = [
  {
    id: "initialization",
    title: "تقویم تیمی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    icon: (
      <LocateFixed className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
    ),
  },
  {
    id: "optimization",
    title: "اشتراک فایل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    icon: (
      <Cog className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
    ),
  },
  {
    id: "efficiency",
    title: "منشن و بحث",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    icon: (
      <Gem className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
    ),
  },
  {
    id: "finalization",
    title: "ردیابی زمان",
    description:
      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
    icon: (
      <Landmark className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
    ),
  },
];

interface Feature243Props {
  className?: string;
}

const Feature243 = ({ className }: Feature243Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
      <div className="container py-32">
        <header className="relative z-10 flex flex-col items-center justify-center gap-6 bg-background text-center">
          <h1 className="text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
            همکاری از راه دور را ساده کنید
          </h1>

          <p className="mt-2 mb-4 max-w-xl text-lg text-pretty text-muted-foreground md:text-xl">
            اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
          </p>
        </header>

        <div className="mt-24 flex flex-wrap items-center justify-center gap-18 sm:mt-68 sm:gap-6">
          <div className="absolute top-40 left-1/2 h-55 w-0.5 rounded-full bg-muted lg:h-58" />
          {STEPS.map((step, index) => (
            <div
              key={step.id}
              className="relative flex w-fit flex-col items-center"
            >
              <div
                className={cn(
                  "absolute -top-[174px] left-1/2 h-0.5 w-[109%] rounded-full bg-muted",
                  index === 3 ? "hidden" : "",
                  index === 2 ? "hidden 2xl:block" : "",
                  index === 1 ? "hidden lg:block" : "",
                  index === 0 ? "hidden sm:block" : "",
                )}
              />
              <div className="absolute -top-[174px] left-1/2 h-full w-0.5 rounded-full bg-muted" />
              <div className="relative z-10 flex h-8 w-5 items-center justify-center rounded-full bg-background p-1 pb-5">
                <div className="relative z-10 size-3 rounded-full bg-foreground" />
              </div>

              <Card className="group relative z-10 h-full w-full overflow-hidden rounded-4xl border-none bg-muted shadow-none sm:w-64 md:w-72">
                <CardContent className="flex h-full flex-col items-center gap-5 p-0 pt-10 pb-5">
                  <div className="flex size-20 items-center justify-center rounded-3xl bg-foreground">
                    {step.icon}
                  </div>

                  <div className="flex w-full flex-col items-center gap-4 px-4 pt-5 pb-3">
                    <h3 className="w-full text-center text-3xl font-semibold tracking-tighter text-balance text-foreground">
                      {step.title}
                    </h3>

                    <p className="w-full max-w-sm text-center text-pretty font-medium text-muted-foreground/70">
                      {step.description}
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature243 };