import { ArrowRight } from "lucide-react";

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

const featuredCard = {
  href: "#",
  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  tag: "مدیریت فروش",
  title: "پروفایل ۳۶۰ درجه مشتری",
  description:
    "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
};

const listItems = [
  {
    href: "#",
    title: "اتوماسیون مراحل فروش",
  },
  {
    href: "#",
    title: "پیش‌بینی درآمد",
  },
  {
    href: "#",
    title: "یادآور پیگیری هوشمند",
  },
];

interface Feature79Props {
  className?: string;
}

const Feature79 = ({ className }: Feature79Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-16 sm:gap-20 md:gap-24 lg:px-16">
        <div className="text-center">
          <p className="mb-6 text-xs font-medium tracking-wider">
            سامانه مدیریت ارتباط با مشتری
          </p>
          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
            ارتباط با مشتری
          </h3>
          <p className="text-muted-foreground lg:max-w-2xl lg:text-lg">
            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
          </p>
        </div>
        <div className="flex flex-col gap-y-12 md:col-span-2 md:grid md:grid-cols-2 md:gap-x-6 lg:gap-8">
          <a
            href={featuredCard.href}
            className="group overflow-clip rounded-t-xl border border-border transition-shadow hover:shadow-lg md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
          >
            <div>
              <img
                src={featuredCard.image}
                alt={featuredCard.imageAlt}
                className="aspect-16/9 h-full w-full object-cover object-center"
              />
            </div>
            <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
              <p className="mb-6 text-xs font-medium tracking-wider text-muted-foreground">
                {featuredCard.tag}
              </p>
              <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
                {featuredCard.title}
              </h3>
              <p className="mb-8 text-muted-foreground lg:text-lg">
                {featuredCard.description}
              </p>
              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
            </div>
          </a>
          <div className="flex flex-col justify-between gap-y-12 md:px-8 lg:px-10">
            {listItems.map((item) => (
              <a
                key={item.title}
                href={item.href}
                className="group flex flex-col justify-between gap-4 border border-border px-8 py-8 md:flex-row md:items-center md:border-0 md:border-b md:px-0 md:py-10 lg:py-12"
              >
                <h3 className="mb-3 text-lg font-semibold md:mb-0 md:text-xl">
                  {item.title}
                </h3>
                <div className="flex w-fit items-center rounded-full border-0 border-border transition-transform group-hover:translate-x-1 md:border md:px-6 md:py-3 md:group-hover:bg-primary md:group-hover:text-primary-foreground rtl:group-hover:-translate-x-1">
                  <ArrowRight className="size-4 rtl:rotate-180" />
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature79 };