import React from "react";

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

type DataItem = {
  id: number;
  title: string;
  description: string;
};

const DATA: DataItem[] = [
  {
    id: 1,
    title: "همکاری فروش و بازاریابی",
    description:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
  {
    id: 2,
    title: "اولویت‌بندی سرنخ",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
  },
  {
    id: 3,
    title: "قالب پیشنهاد فروش",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
];

type StepItemProps = {
  step: DataItem;
  isLast: boolean;
  className?: string;
};

const StepItem: React.FC<StepItemProps> = ({ step, isLast, className }) => {
  return (
    <div className={cn("max-lg:flex max-lg:gap-4", className)}>
      <div className="relative lg:py-6">
        <div
          className={cn(
            "absolute h-full w-1 -translate-x-1/2 translate-y-11 bg-muted/50 bg-linear-to-b max-lg:start-1/2 lg:top-1/2 lg:h-1 lg:w-full lg:translate-x-6 lg:-translate-y-1/2 lg:bg-linear-to-r",
            "rtl:lg:-translate-x-6 rtl:lg:bg-linear-to-l",
            isLast && "from-muted/50 to-background",
          )}
        />
        <div className="relative z-0 grid size-11 place-content-center rounded-full border-4 bg-background">
          <p className="text-lg font-bold">
            {step.id.toLocaleString("fa-IR")}
          </p>
        </div>
      </div>
      <div className="max-lg:mt-2 text-start">
        <p className="text-lg font-semibold">{step.title}</p>
        <p className="mt-2 text-pretty text-muted-foreground">
          {step.description}
        </p>
      </div>
    </div>
  );
};

interface Feature187Props {
  className?: string;
}

const Feature187 = ({ className }: Feature187Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div>
          <h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="mt-8 text-pretty text-muted-foreground md:text-lg">
            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
          </p>
        </div>
        <div className="mt-12 grid gap-10 lg:grid-cols-3 lg:gap-6">
          {DATA.map((step, index) => (
            <StepItem
              key={step.id}
              step={step}
              isLast={index === DATA.length - 1}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature187 };