import { ArrowRight } from "lucide-react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Badge } from "@/components/ui/badge";
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 Feature220aProps {
  className?: string;
}

const Feature220a = ({ className }: Feature220aProps) => {
  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-24",
        className,
      )}
    >
      <div className="container min-w-0 max-w-5xl px-4 sm:px-6">
        <div className="mb-10 min-w-0 text-center sm:mb-16">
          <Badge variant="secondary" className="mb-6 px-4 py-2">
            هر تیم داشبورد خودش را داشته باشد
          </Badge>
          <h2 className="leading-tighter mb-6 text-balance text-xl font-semibold tracking-tight sm:text-2xll lg:text-2xll">
            روندها را زودتر از رقبا ببینید
            <span className="block text-primary">
              گزارش‌هایی که مدیران واقعاً استفاده می‌کنند
            </span>
          </h2>
          <p className="mx-auto mb-8 max-w-3xl text-base leading-relaxed font-medium text-pretty text-muted-foreground sm:text-xl">
            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه
            هر بار به تیم داده وابسته باشند.
          </p>
          <Button
            size="lg"
            className="h-auto max-w-full gap-2 px-6 py-4 text-base whitespace-normal sm:px-8 sm:py-6 sm:text-lg"
          >
            گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
            <ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
          </Button>
        </div>

        <div className="mb-10 min-w-0 sm:mb-16">
          <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-2xl sm:rounded-3xl">
            <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="min-w-0 rounded-2xl bg-card p-4 sm:p-8">
          <div className="grid min-w-0 grid-cols-1 gap-6 sm:grid-cols-3 sm:gap-8">
            {STATS.map((item) => (
              <div className="text-center" key={item.id}>
                <div className="mb-2 text-xl font-bold text-primary">
                  {item.number}
                </div>
                <div className="text-sm font-medium text-pretty text-muted-foreground">
                  {item.text}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature220a };