import { Combine, Gauge, Zap } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "integration",
    title: "داشبورد سفارشی",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    icon: Combine,
  },
  {
    id: "performance",
    title: "فیلتر پیشرفته",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    icon: Gauge,
  },
];

interface Feature204Props {
  className?: string;
}

const Feature204 = ({ className }: Feature204Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full overflow-hidden py-32", className)}
    >
      <div className="container min-w-0">
        <div className="flex min-w-0 flex-col items-center gap-10 md:gap-24 lg:flex-row lg:items-stretch">
          <div className="grid w-full max-w-lg min-w-0 place-items-center overflow-hidden rounded-2xl bg-[url('/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg')] bg-cover bg-center bg-no-repeat px-8 py-10 sm:px-16 sm:py-20">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="گزارش عملکرد"
              className="max-w-full rounded-2xl"
            />
          </div>
          <div className="flex w-full min-w-0 max-w-2xl flex-col justify-between gap-10">
            <div className="min-w-0 text-center lg:text-start">
              <h2 className="text-2xll font-medium text-balance lg:text-2xll">
                داده پراکنده را به تصمیم تبدیل کنید
              </h2>
              <p className="mt-6 text-lg text-pretty text-muted-foreground">
                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
              </p>
              <Button
                size="lg"
                className="mt-8 h-auto max-w-full gap-2 whitespace-normal text-balance"
              >
                داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
                <Zap className="size-4 shrink-0" />
              </Button>
            </div>
            <div className="grid min-w-0 gap-7 sm:grid-cols-2">
              {FEATURES.map((feature) => {
                const Icon = feature.icon;

                return (
                  <div
                    key={feature.id}
                    className="min-w-0 text-center lg:text-start"
                  >
                    <Icon className="mx-auto size-8 lg:ms-0 lg:me-auto" />
                    <h3 className="mt-4 mb-2 text-lg font-semibold">
                      {feature.title}
                    </h3>
                    <p className="text-pretty text-muted-foreground">
                      {feature.description}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature204 };