import { AppWindowMac, Zap } from "lucide-react";

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

interface Feature5Props {
  className?: string;
}

const Feature5 = ({ className }: Feature5Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <Card className="p-6 lg:col-span-2">
            <div className="text-start">
              <AppWindowMac className="mb-1 w-7" />
              <h2 className="mt-4 mb-1 text-lg font-semibold">
                داده پراکنده را به تصمیم تبدیل کنید
              </h2>
              <p className="text-muted-foreground">
                شاخص‌های کلیدی را یکجا ببینید
              </p>
            </div>
            <div className="mt-7">
              <img
                className="aspect-square max-h-[500px] w-full rounded-t-md object-cover object-center"
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="گزارش عملکرد"
              />
            </div>
          </Card>
          <Card className="flex flex-col justify-between p-6">
            <div className="text-start">
              <Zap className="mb-1 w-7" />
              <h2 className="mt-4 mb-1 text-lg font-semibold">
                روند رشد را قبل از دیگران ببینید
              </h2>
              <p className="text-muted-foreground">
                گزارش‌هایی که واقعاً قابل اقدام هستند
              </p>
            </div>
            <img
              className="mt-7 aspect-square rounded-t-md object-cover lg:aspect-auto lg:h-full"
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="داشبورد تحلیل داده"
            />
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Feature5 };