"use client";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const integrations = [
  {
    title: "Outreach",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    image: "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    title: "Typeform",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    image: "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    title: "Slack",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    image: "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    title: "Mailchimp",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    image: "/block-media/shadcnblocks/block/block-4.svg",
  },
  {
    title: "Mixmax",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    image: "/block-media/shadcnblocks/block/block-5.svg",
  },
  {
    title: "Webhooks",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    image: "/block-media/shadcnblocks/block/block-6.svg",
  },
];

interface Feature147Props {
  className?: string;
}

const Feature147 = ({ className }: Feature147Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-24 flex flex-col items-center justify-between gap-6 lg:flex-row lg:gap-x-12">
          <div className="w-full text-center text-3xl font-medium lg:w-1/2 lg:text-start lg:text-2xll">
            <span className="text-muted-foreground">گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</span> داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
          </div>
          <div className="w-full text-center text-lg font-medium lg:w-1/2 lg:text-start lg:text-xl">
            تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.
          </div>
        </div>
        <ul className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
          {integrations.map((integration) => (
            <li key={integration.title}>
              <Card className="p-6">
                <img
                  src={integration.image}
                  alt={`لوگوی ${integration.title}`}
                  className="w-14"
                />
                <h3 className="mt-4 mb-1 text-lg font-medium">
                  {integration.title}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {integration.description}
                </p>
              </Card>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Feature147 };