import { Play } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Feature86Props {
  className?: string;
}

const Feature86 = ({ className }: Feature86Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
      <div className="pointer-events-none absolute inset-0 z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat" />
      <div className="container p-6 md:p-16">
        <div className="grid gap-12 lg:grid-cols-3">
          <div className="flex flex-col justify-between gap-8">
            <div>
              <Badge variant="outline">اتوماسیون AI</Badge>
              <h2 className="my-9 text-3xl font-medium md:text-2xll">
                با هوش مصنوعی سریع‌تر تصمیم بگیرید
                <br />
                <span className="text-muted-foreground">کارهای تکراری را به AI بسپارید</span>
              </h2>
              <p className="text-muted-foreground">
                مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
              </p>
            </div>
            <div className="flex flex-col gap-3">
              <Separator />
              <p className="text-muted-foreground">
                از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
              </p>
              <a href="#" className="flex items-center gap-1 hover:underline">
                <Play className="h-auto w-4" />
                مشاهده دمو
              </a>
            </div>
          </div>
          <div className="flex aspect-square w-full items-center justify-center bg-muted px-6 md:px-8 lg:col-span-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
              alt="دستیار هوش مصنوعی"
              className="aspect-video max-h-[464px] w-full rounded-lg object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature86 };