import { Code, GitBranch } from "lucide-react";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Feature4Props {
  className?: string;
}

const Feature4 = ({ className }: Feature4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto xl:px-36">
          <h1 className="mx-auto mb-16 max-w-xl text-center text-xl font-semibold text-pretty lg:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h1>

          <div className="mt-10 flex flex-col gap-6">
            <Card>
              <CardHeader className="pb-1">
                <Code className="size-5" strokeWidth={1.5} />
              </CardHeader>
              <CardContent className="text-start">
                <h2 className="mb-1 text-lg font-semibold">
                  اتوماسیون را در کل سازمان یکپارچه کنید
                </h2>
                <p className="leading-snug text-muted-foreground">
                  خطای انسانی را در کارهای روزمره کم کنید
                </p>
              </CardContent>
              <CardFooter className="justify-end pb-0">
                <img
                  className="h-[500px] w-full rounded-t-md object-cover object-center"
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="سازنده گردش‌کار"
                />
              </CardFooter>
            </Card>
            <div className="flex flex-col gap-6 md:flex-row">
              <Card className="w-full">
                <CardHeader className="pb-1">
                  <GitBranch className="size-5" strokeWidth={1.5} />
                </CardHeader>
                <CardContent className="text-start">
                  <h2 className="mb-1 text-lg font-semibold">
                    کارهای تکراری را خودکار کنید
                  </h2>
                  <p className="leading-snug text-muted-foreground">
                    گردش‌کار تیم را بدون کد بسازید
                  </p>
                </CardContent>
                <CardFooter className="justify-end pe-0 pb-0">
                  <img
                    className="h-full max-h-96 w-full rounded-ts-md object-cover object-center"
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="نمای اتوماسیون فرایند"
                  />
                </CardFooter>
              </Card>
              <Card className="flex w-full flex-col justify-between gap-10 md:gap-20">
                <CardHeader className="items-start pb-1">
                  <img
                    className="h-6 dark:invert"
                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                    alt="لاگ اجرای خودکار"
                  />
                </CardHeader>
                <CardContent className="text-start">
                  <q className="text-xl md:text-3xl">
                    قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
                  </q>
                </CardContent>
                <CardFooter className="flex-col items-start text-xs">
                  <p className="font-semibold">فرایند هوشمند</p>
                  <p className="text-muted-foreground">اتوماسیون</p>
                </CardFooter>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature4 };