import { ArrowRight } from "lucide-react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const STATS = [
  {
    id: "retention",
    number: "مدیریت فروش",
    text: "ثبت خودکار فعالیت‌های فروش",
  },
  {
    id: "development-time",
    number: "سامانه مدیریت ارتباط با مشتری",
    text: "امتیازدهی هوشمند سرنخ",
  },
  {
    id: "adoption",
    number: "ارتباط با مشتری",
    text: "گزارش عملکرد هر نماینده",
  },
];

interface Feature220bProps {
  className?: string;
}

const Feature220b = ({ className }: Feature220bProps) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "flex min-h-full w-full min-w-0 flex-col justify-center overflow-x-hidden bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-12 sm:py-16 lg:py-20",
        className,
      )}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <div className="mb-20 flex flex-wrap justify-center gap-12">
          {STATS.map((item) => (
            <div key={item.id} className="min-w-48 text-center">
              <div className="mb-2 text-xl font-semibold md:text-2xll">
                {item.number}
              </div>
              <div className="text-sm font-medium text-pretty text-muted-foreground">
                {item.text}
              </div>
            </div>
          ))}
        </div>

        <div className="grid items-center gap-16 lg:grid-cols-2">
          <div className="order-2 lg:order-1 rtl:lg:order-2">
            <AspectRatio
              ratio={0.873239437}
              className="overflow-hidden rounded-2xl"
            >
              <video
                src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/video-8.mp4"
                className="block size-full object-cover object-center"
                loop
                autoPlay
                muted
                playsInline
                preload="metadata"
                controls={false}
                aria-label="هر سرنخ را تا قرارداد دنبال کنید"
              />
            </AspectRatio>
          </div>

          <div className="order-1 space-y-6 text-start lg:order-2 rtl:lg:order-1">
            <h2 className="text-xl leading-none font-semibold tracking-tight text-balance md:text-2xll">
              فروش تیم‌تان را یکجا مدیریت کنید
            </h2>
            <p className="text-lg leading-[1.4] font-medium text-pretty text-muted-foreground md:text-xl">
              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع
              می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند
              و معاملات بیشتری می‌بندد.
            </p>
            <div className="pt-4">
              <Button size="lg" className="gap-2 px-8 py-6 text-lg">
                پایپ‌لاین فروش
                <ArrowRight className="size-4 rtl:rotate-180" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature220b };