import { ArrowRight } from "lucide-react";

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 Feature220Props {
  className?: string;
}

const Feature220 = ({ className }: Feature220Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "flex min-h-full w-full min-w-0 flex-col justify-center 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 flex min-w-0 flex-col gap-8 px-4 sm:gap-10 sm:px-6 md:gap-12 lg:grid lg:grid-cols-[1fr_1.5fr] lg:gap-[7.5rem] lg:px-0">
        <div className="order-2 flex min-w-0 flex-col justify-between gap-10 sm:gap-14 md:gap-16 lg:order-1 lg:gap-20 lg:ps-12">
          <div className="flex flex-col gap-5 text-start md:mt-8 lg:mt-10">
            <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>
              <Button size="lg" className="gap-2 px-8 py-6 text-lg">
                ERP
                <ArrowRight className="size-4 rtl:rotate-180" />
              </Button>
            </div>
          </div>
          <div>
            <div className="group flex w-full max-w-full flex-col gap-10 rounded-[.5rem] bg-background p-5 text-start transition-shadow hover:shadow-[0_0_2px_theme('colors.gray.300')] sm:max-w-[30rem]">
              <div className="flex w-full flex-col gap-8 sm:flex-row">
                {STATS.map((item) => (
                  <div className="flex flex-col gap-1" key={item.id}>
                    <div className="text-xl font-semibold">{item.number}</div>
                    <div className="text-sm font-medium text-pretty text-muted-foreground">
                      {item.text}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="order-1 w-full min-w-0 max-w-full pt-6 sm:pt-8 md:pt-8 lg:order-2 lg:max-w-[46.5rem] lg:pe-12 lg:pt-10">
          <div className="aspect-video max-h-80 overflow-hidden rounded-2xl sm:max-h-96 md:aspect-[4/3] md:max-h-none lg:aspect-[712/815]">
            <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="عملیات سازمان را یکپارچه کنید"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature220 };