"use client";

import { Cloud, Sparkles, 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:
      "با ابزارهای همکاری مبتنی بر هوش مصنوعی که ارتباط بلادرنگ و گردش‌کارهای مشترک را ممکن می‌کنند، کار تیمی را تقویت کنید.",
  },
];

interface Timeline5Props {
  className?: string;
}

const Timeline5 = ({ className }: Timeline5Props) => {
  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">
                <span className="relative inline-block">
                  <span className="text-muted-foreground">هوش مصنوعی</span>
                  <Sparkles className="absolute -top-2 -start-4 size-5 fill-yellow-500 stroke-none" />
                </span>
                <br />
                را به گردش‌کارهای فعلی‌تان اضافه کنید
              </h2>
              <p className="mt-12 text-base text-muted-foreground">
                هوش مصنوعی را بی‌درز در گردش‌کارهای خود یکپارچه کنید. وظایف را
                خودکار کنید، کارایی را افزایش دهید و جلوتر بمانید.
              </p>
            </div>
          </div>

          <div className="-mt-8 sm:-mt-12">
            {DATA.map((item, index) => (
              <div
                key={index}
                className="relative my-12 overflow-hidden rounded-lg bg-muted px-8 py-16 shadow-none sm:px-12 sm:py-24 lg:px-16 lg:py-32"
              >
                <div className="gap-4 sm:gap-6">
                  <div className="block shrink-0">{item.icon}</div>
                  <div className="absolute top-12 end-12 text-2xll">
                    {(index + 1).toLocaleString("fa-IR", {
                      minimumIntegerDigits: 2,
                      useGrouping: false,
                    })}
                  </div>
                  <div className="mt-6 text-start">
                    <h4 className="mb-2 text-xl font-semibold text-primary">
                      {item.title}
                    </h4>
                    <p className="mt-6 text-xs text-muted-foreground sm:text-base">
                      {item.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Timeline5 };