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

interface Feature {
  id: string;
  heading: string;
  label: string;
  description: string;
  image: string;
  url: string;
}

interface Feature13Props {
  title?: string;
  features?: Feature[];
  className?: string;
}

const Feature13 = ({
  title = "هر سرنخ را تا قرارداد دنبال کنید",
  features = [
    {
      id: "feature-1",
      heading: "تقسیم خودکار سرنخ",
      label: "مدیریت فروش",
      description:
        "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-2",
      heading: "گزارش عملکرد فروش",
      label: "سامانه مدیریت ارتباط با مشتری",
      description:
        "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-3",
      heading: "مدیریت قرارداد",
      label: "ارتباط با مشتری",
      description:
        "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-4",
      heading: "تاریخچه تعاملات",
      label: "پایپ‌لاین فروش",
      description:
        "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
      url: "https://ShadcnBlocks",
    },
  ],
  className,
}: Feature13Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        {title && (
          <div className="mx-auto mb-16 max-w-3xl text-center">
            <h2 className="text-xl font-medium text-pretty lg:text-2xll">
              {title}
            </h2>
          </div>
        )}
        <div className="grid gap-8 lg:grid-cols-2">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="flex flex-col justify-between rounded-lg bg-muted"
            >
              <div className="flex justify-between gap-10 border-b">
                <div className="flex flex-col justify-between gap-8 py-6 ps-4 md:gap-14 md:py-10 md:ps-8 lg:justify-normal">
                  <span className="font-mono text-xs text-muted-foreground">
                    {feature.label}
                  </span>
                  <a href={feature.url}>
                    <h3 className="text-xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-xl">
                      {feature.heading}
                    </h3>
                  </a>
                </div>
                <div className="md:1/3 w-2/5 shrink-0 rounded-s-lg border-s">
                  <a href={feature.url}>
                    <img
                      src={feature.image}
                      alt={feature.heading}
                      className="h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80"
                    />
                  </a>
                </div>
              </div>
              <p className="p-4 text-muted-foreground md:p-8">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature13 };