import { Blocks, ChartPie, Filter, UsersRound } from "lucide-react";

import { cn } from "@/lib/utils";

const smallCards = [
  {
    title: "تحلیل احساس",
    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    icon: Filter,
  },
  {
    title: "دستیار گفتگو",
    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    icon: ChartPie,
  },
  {
    title: "خلاصه‌سازی هوشمند",
    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    icon: UsersRound,
  },
];

interface Feature101Props {
  className?: string;
}

const Feature101 = ({ className }: Feature101Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-xl flex-col justify-center gap-4 text-center">
          <h1 className="text-xl font-bold md:text-2xll">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h1>
          <p className="text-xl text-muted-foreground">
            کارهای تکراری را به AI بسپارید
          </p>
        </div>
        <div className="mx-auto mt-20 grid max-w-6xl gap-4 md:grid-cols-2 lg:grid-cols-3">
          <div className="flex flex-col justify-between gap-6 rounded-lg bg-muted/70 p-8 md:col-span-2 lg:row-span-2">
            <div>
              <Blocks className="mb-6 h-auto w-11" strokeWidth={1.5} />
              <h2 className="mb-1 text-xl font-medium">پیشنهادهایی که واقعاً مفیدند</h2>
              <p className="text-muted-foreground">
                داده را به بینش عملی تبدیل کنید
              </p>
            </div>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="دستیار هوش مصنوعی"
              className="ms-auto max-h-80 w-full rounded-lg object-cover transition-transform duration-300 hover:-translate-y-3 sm:w-11/12"
            />
          </div>
          {smallCards.map((card) => (
            <div
              key={card.title}
              className="flex h-80 flex-col justify-between gap-4 rounded-lg bg-muted/70 p-8"
            >
              <card.icon className="mb-6 h-auto w-11" strokeWidth={1.5} />
              <div>
                <h2 className="mb-1 text-xl font-medium">{card.title}</h2>
                <p className="text-muted-foreground">{card.description}</p>
              </div>
            </div>
          ))}
          <div className="flex h-80 flex-col-reverse justify-between gap-4 rounded-lg bg-muted/70 p-8 lg:col-span-2 lg:grid lg:grid-cols-2">
            <div className="lg:self-end">
              <h2 className="mb-1 text-xl font-medium">تیم را با دستیار هوشمند تقویت کنید</h2>
              <p className="text-muted-foreground">
                فرایندها را با AI بهینه کنید
              </p>
            </div>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="پیشنهادهای هوشمند"
              className="h-full min-h-0 rounded-lg object-cover transition-transform duration-300 hover:-translate-y-3"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature101 };