import { ArrowUpRight, ChevronRight, ChevronUp } from "lucide-react";
import React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const Feature239 = () => {
  return (
    <section dir="rtl" lang="fa" className="bg-background py-32">
      <div className="relative container flex flex-col items-center px-0! lg:pt-8">
        <DottedDiv>
          <div className="grid lg:grid-cols-2">
            <div className="flex w-full flex-col gap-8 px-10 py-20 text-start md:px-14">
              <Badge
                variant="outline"
                className="flex w-fit cursor-pointer items-center gap-4 rounded-full px-6 py-2 transition-all ease-in-out hover:gap-6"
              >
                <span className="text-sm font-medium tracking-tight text-muted-foreground">
                  قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
                </span>
                <ChevronRight className="size-4! rtl:rotate-180" />
              </Badge>
              <h1 className="text-2xll font-semibold tracking-tighter text-balance md:text-2xll">
                فرایندها را استاندارد و سریع کنید
                <br />
                اتوماسیون را در کل سازمان یکپارچه کنید
                <br />
                خطای انسانی را در کارهای روزمره کم کنید
              </h1>
              <p className="tracking-tight text-pretty text-muted-foreground md:text-xl">
                فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
              </p>
              <div className="flex w-full gap-2">
                <Button className="text-md h-12 w-fit rounded-full bg-primary px-10 text-primary-foreground">
                  شروع کنید
                </Button>
                <Button
                  variant="outline"
                  className="text-md h-12 w-12 rounded-full transition-all ease-in-out hover:rotate-45"
                >
                  <ArrowUpRight className="rtl:rotate-180" />
                </Button>
              </div>
            </div>
            <DottedDiv className="group size-full place-self-end p-4 lg:w-4/6">
              <div className="relative size-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
                <div className="relative size-full overflow-hidden rounded-3xl">
                  <img
                    src="/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg"
                    alt="سازنده گردش‌کار"
                    className="size-full object-cover"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/70 to-transparent" />
                </div>

                <div className="absolute top-4 -ms-4 flex size-full flex-col items-center justify-between p-10">
                  <p className="flex w-full items-center text-xl tracking-tighter text-background">
                    با اتصال ابزارهای موجود، داده بین سیستم‌ها خودکار جریان پیدا می‌کند و نیاز به کپی دستی از بین می‌رود.
                    <span className="mx-2 h-2.5 w-px bg-background" />
                    قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
                  </p>
                  <div className="flex flex-col items-center justify-center">
                    <h2 className="text-center text-2xll font-semibold tracking-tight text-balance text-background">
                      کارهای تکراری را خودکار کنید
                      <br />
                      گردش‌کار تیم را بدون کد بسازید
                    </h2>
                    <div className="mt-2 h-1 w-6 rounded-full bg-background" />
                    <p className="mt-10 max-w-sm px-2 text-center text-lg leading-5 font-light tracking-tighter text-pretty text-background/80">
                      فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
                    </p>
                  </div>
                  <a
                    href="#"
                    className="group mb-6 flex cursor-pointer flex-col items-center justify-center text-background"
                  >
                    <ChevronUp
                      size={30}
                      className="transition-all ease-in-out group-hover:-translate-y-2"
                    />
                    <p className="text-xl tracking-tight text-background">
                      مشاهده همه
                    </p>
                  </a>
                </div>
              </div>
            </DottedDiv>
          </div>
        </DottedDiv>
      </div>
    </section>
  );
};

export { Feature239 };

const DottedDiv = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => (
  <div className={cn("relative", className)}>
    <div className="absolute top-4 -start-25 h-px w-[115%] bg-muted" />
    <div className="absolute bottom-4 -start-25 h-px w-[115%] bg-muted" />
    <div className="absolute -top-25 start-4 h-[130%] w-px bg-muted" />
    <div className="absolute -top-25 end-4 h-[130%] w-px bg-muted" />
    <div className="absolute start-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute end-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute start-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute end-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    {children}
  </div>
);