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

interface Feature29Props {
  className?: string;
}

const Feature29 = ({ className }: Feature29Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-5xl gap-10 md:grid-cols-2">
          <div className="order-1 flex flex-col gap-2 rounded-lg border p-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="گزارش عملکرد"
              className="aspect-video w-full rounded-lg border object-cover"
            />
            <Separator />
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="داشبورد تحلیل داده"
              className="aspect-video w-full rounded-lg border object-cover"
            />
          </div>
          <div className="order-3 rounded-lg border p-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="نمودار شاخص کلیدی"
              className="h-full w-full rounded-lg border object-cover"
            />
          </div>
          <div className="order-2 -mt-6 max-w-[412px] md:order-3">
            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
            </p>
            <h3 className="mb-3 text-xl font-medium md:mb-6">گزارش زمان‌بندی‌شده</h3>
            <p className="mb-6 text-muted-foreground">
              تحلیل کوHORT
            </p>
            <a href="#" className="font-medium hover:underline">
              داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
            </a>
          </div>
          <div className="order-4 -mt-6 max-w-[412px] md:order-3">
            <p className="mb-6 text-sm text-muted-foreground md:mb-12">
              شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.
            </p>
            <h3 className="mb-3 text-xl font-medium md:mb-6">
              مقایسه دوره‌ای
            </h3>
            <p className="mb-6 text-muted-foreground">
              خروجی گزارش
            </p>
            <a href="#" className="font-medium hover:underline">
              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature29 };