import { Clock, Cloud, FileCheck, Scale, Users, XCircle } from "lucide-react";
import React from "react";

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

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

const DATA: DataItem[] = [
  {
    icon: <Cloud strokeWidth={1.5} className="size-12" />,
    title: "افزایش بهره‌وری",
    description:
      "با ابزارهای پیشرفته مدیریت وظایف، گردش‌کارهای خود را ساده کنید و ناکارآمدی‌ها را حذف کنید.",
  },
  {
    icon: <XCircle strokeWidth={1.5} className="size-12" />,
    title: "کاهش خطاها",
    description:
      "وظایف تکراری را خودکار کنید تا خطای انسانی کاهش یابد و نتایج یکسان تضمین شود.",
  },
  {
    icon: <Users strokeWidth={1.5} className="size-12" />,
    title: "تقویت همکاری",
    description:
      "ارتباط و همکاری تیم را با به‌روزرسانی‌های بلادرنگ و فضاهای کاری مشترک بهبود دهید.",
  },
  {
    icon: <Scale strokeWidth={1.5} className="size-12" />,
    title: "مقیاس‌پذیری بی‌درز",
    description:
      "تیم و پروژه‌های خود را بدون دردسر گسترش دهید؛ با راهکارهای انعطاف‌پذیر و مقیاس‌پذیر.",
  },
  {
    icon: <FileCheck strokeWidth={1.5} className="size-12" />,
    title: "پیگیری پیشرفت",
    description:
      "با پیگیری دقیق پیشرفت و بینش‌های عملی، همیشه بر اهداف خود مسلط باشید.",
  },
  {
    icon: <Clock strokeWidth={1.5} className="size-12" />,
    title: "صرفه‌جویی در زمان",
    description:
      "با خودکارسازی وظایف و فرآیندهای زمان‌بر، روی آنچه مهم‌تر است تمرکز کنید.",
  },
];

interface Timeline6Props {
  className?: string;
}

const Timeline6 = ({ className }: Timeline6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16">
          <div className="lg:sticky lg:top-24 lg:self-start">
            <div className="max-w-lg text-start">
              <h2 className="text-3xl font-bold tracking-tight text-primary sm:text-xl lg:text-2xll">
                ابزارهای ما
                <br />
                بهره‌وری را به
                <br />
                <span className="text-muted-foreground">ابرقدرت شما</span>{" "}
                تبدیل می‌کنند
              </h2>
            </div>
          </div>

          <div className="-mt-8 sm:-mt-12">
            {DATA.map((item, index) => (
              <div
                key={index}
                className="relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12"
              >
                <div className="flex gap-4 text-start sm:gap-6">
                  <div className="shrink-0">{item.icon}</div>
                  <div>
                    <h4 className="mb-2 text-xl font-semibold text-primary sm:text-3xl">
                      {item.title}
                    </h4>
                    <p className="mt-6 text-sm text-muted-foreground sm:text-base">
                      {item.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Timeline6 };