"use client";

import { Code, MessageCircle, Text } from "lucide-react";

import { cn } from "@/lib/utils";

interface Feature130Props {
  className?: string;
}

const Feature130 = ({ className }: Feature130Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
      <h2 className="text-start text-xl font-semibold md:text-xl">
        تصمیم استراتژیک را داده‌محور کنید
      </h2>
      <div className="mt-12 mb-6 flex flex-col gap-6 xl:flex-row">
        <div className="flex w-full flex-col justify-between overflow-hidden rounded-2xl border bg-card px-12 pt-12 text-card-foreground shadow-sm">
          <div className="mb-12 flex flex-col gap-3 text-start">
            <Code className="size-6" />
            <h4 className="text-xl font-semibold">گزارش‌ساز</h4>
            <p className="text-base font-normal text-muted-foreground">
              Pivot تعاملی
            </p>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="گزارش‌ساز"
            className="max-h-52 w-full rounded-ts-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
          />
        </div>
        <div className="w-full overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm">
          <div className="px-12 xl:ps-0 xl:pe-12">
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="تحلیل داده سازمان"
              className="max-h-48 w-full rounded-be-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
            />
          </div>
          <div className="flex flex-col gap-3 p-12 text-start">
            <Text className="size-6" />
            <h4 className="text-xl font-semibold">
              {(100).toLocaleString("fa-IR")}٪ قابل سفارشی‌سازی
            </h4>
            <p className="text-base font-normal text-muted-foreground">
              داشبورد مدیریتی
            </p>
          </div>
        </div>
      </div>
      <div className="flex w-full flex-col items-center justify-center gap-6 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm md:flex-row">
        <div className="flex w-full flex-col p-12 text-start md:gap-3">
          <MessageCircle className="size-6" />
          <h4 className="text-xl font-semibold">اتصال منبع</h4>
          <p className="text-base font-normal text-muted-foreground">
            سطح دسترسی
          </p>
        </div>
        <div className="w-full ps-12 md:pt-12">
          <img
            src="/block-media/shadcnblocks/block/placeholder-3.svg"
            alt="داشبورد هوش تجاری"
            className="max-h-96 w-full rounded-ts-md object-cover shadow-[0_0_10px_rgb(0,0,0,0.2)]"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature130 };