import { ArrowRight, Check } from "lucide-react";
import React from "react";

import {
  CardBody,
  CardContainer,
  CardItem,
} from "@/components/aceternity/3d-card";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "instant",
    title: "همکاری فروش و بازاریابی",
    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
  {
    id: "one-time",
    title: "اولویت‌بندی سرنخ",
    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
  },
  {
    id: "developer",
    title: "قالب پیشنهاد فروش",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
  },
  {
    id: "responsive",
    title: "ردیابی کووت",
    description:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
  {
    id: "production",
    title: "تحلیل باخت معامله",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
  },
] as const;

interface Feature268Props {
  className?: string;
}

const Feature268 = ({ className }: Feature268Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative h-full w-full min-w-0 overflow-hidden py-32",
        className,
      )}
    >
      <div className="relative container flex h-full min-w-0 flex-col items-start justify-between gap-10 lg:flex-row">
        <div className="w-full min-w-0 space-y-5 text-start lg:w-3/5">
          <h1 className="mt-3 w-full max-w-2xl text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h1>
          <p className="max-w-xl text-pretty break-words text-muted-foreground">
            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
          </p>
          <div className="mt-10 mb-29 flex min-w-0 flex-wrap gap-2">
            <Button className="rounded-full">شروع کنید</Button>
            <Button variant="secondary" className="rounded-full">
              بیشتر بدانید
            </Button>
          </div>
          <ul className="min-w-0 space-y-4">
            <li className="mb-3 min-w-0">
              <p className="font-semibold tracking-tight text-pretty break-words opacity-50">
                چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
              </p>
            </li>
            {FEATURES.map((feature) => (
              <li key={feature.id} className="flex min-w-0 gap-4 lg:items-center">
                <Check className="size-4 shrink-0" />
                <p className="min-w-0 font-medium tracking-tight text-pretty break-words">
                  {feature.title}
                  <span className="ps-2 opacity-30">{feature.description}</span>
                </p>
              </li>
            ))}
          </ul>
        </div>
        <CardContainer
          className="w-full min-w-0 max-w-full"
          containerClassName="h-full w-full min-w-0 max-w-full p-0 m-0 lg:w-2/5"
        >
          <CardBody className="group/card flex h-full w-full! max-w-full min-w-0 flex-col items-center justify-center rounded-3xl bg-muted/70 px-5 py-15">
            <CardItem
              translateZ="60"
              className="mb-2 max-w-xs text-center text-3xl leading-none font-semibold tracking-tight text-balance"
            >
              هر فرصت فروش را از دست ندهید
            </CardItem>
            <CardItem
              as="p"
              translateZ="25"
              className="my-4 flex w-full max-w-sm min-w-0 items-center justify-center text-sm tracking-tight"
            >
              <span className="ms-2 opacity-50">تیم فروش</span>
              <span className="font-semibold">بستن معامله</span>
            </CardItem>
            <CardItem translateZ="60" className="mt-4 w-full min-w-0 max-w-full">
              <img
                src="/block-media/shadcnblocks/block/guri3/img27.jpeg"
                height="1000"
                width="1000"
                className="h-82 w-full max-w-full rounded-3xl object-cover group-hover/card:shadow-xl lg:h-60"
                alt="صف اولویت سرنخ‌ها"
              />
            </CardItem>

            <div className="flex w-full min-w-0 flex-col items-center justify-center">
              <CardItem translateZ="100">
                <Button
                  variant="ghost"
                  className="my-5 gap-2 tracking-tight opacity-50"
                >
                  رشد درآمد
                  <ArrowRight className="size-4 rtl:rotate-180" />
                </Button>
              </CardItem>
              <img
                className="w-30"
                src="/images/block/logos/ph-daily.svg"
                alt="داشبورد عملکرد فروش"
              />
            </div>
          </CardBody>
        </CardContainer>
      </div>
    </section>
  );
};

export { Feature268 };