import { PocketKnife } from "lucide-react";

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

const DATA = [
  {
    title: "مدیریت دارایی",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    icon: "CircleHelp",
    image: "/block-media/shadcnblocks/block/block-1.svg",
    imageAlt: "گزارش مالی یکپارچه",
  },
  {
    title: "بودجه‌بندی",
    description:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    icon: "Volume2",
    image: "/block-media/shadcnblocks/block/block-2.svg",
    imageAlt: "داشبورد ERP",
  },
  {
    title: "مدیریت مالی",
    description:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    icon: "Lightbulb",
    image: "/block-media/shadcnblocks/block/block-3.svg",
    imageAlt: "مدیریت عملیات",
  },
];

interface Feature168Props {
  className?: string;
}

const Feature168 = ({ className }: Feature168Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <PocketKnife className="size-4" />
            <span>گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
            عملیات سازمان را یکپارچه کنید
          </h2>
          <p className="max-w-[600px] text-pretty tracking-[-0.32px] text-muted-foreground">
            مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
          </p>
        </div>
      </div>
      <div className="container border-x lg:px-0!">
        <div className="items-center">
          <div className="grid flex-1 bg-border max-lg:divide-y max-lg:border-x lg:grid-cols-3 lg:gap-px">
            {DATA.map((item) => (
              <div
                key={item.title}
                className="relative isolate flex flex-col bg-background pt-5 text-start lg:pt-20"
              >
                <div className="flex-1 border-b border-border">
                  <h3 className="mt-2 px-4 text-lg font-semibold tracking-tight lg:px-8">
                    {item.title}
                  </h3>
                  <p className="px-4 pt-2 pb-6 text-pretty text-muted-foreground lg:px-8">
                    {item.description}
                  </p>
                </div>
                <div className="bg-muted">
                  <img
                    src={item.image}
                    alt={item.imageAlt}
                    className="p-12 dark:invert"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container h-full w-full border-x" />
      </div>
    </section>
  );
};

export { Feature168 };