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="w-full min-w-0 overflow-x-hidden bg-background py-12 sm:py-20 lg:py-32"
    >
      <div className="relative container flex min-w-0 flex-col items-center px-4 sm:px-6 lg:px-8 lg:pt-8">
        <DottedDiv className="w-full min-w-0">
          <div className="grid min-w-0 lg:grid-cols-2">
            <div className="flex w-full min-w-0 flex-col gap-6 px-2 py-10 text-start sm:gap-8 sm:px-6 sm:py-14 md:px-10 md:py-20 lg:px-14">
              <Badge
                variant="outline"
                className="flex h-auto w-full max-w-full cursor-pointer items-start gap-3 rounded-full px-4 py-3 whitespace-normal transition-all ease-in-out hover:gap-4 sm:w-fit sm:items-center sm:px-6 sm:py-2"
              >
                <span className="min-w-0 text-sm font-medium tracking-tight text-pretty text-muted-foreground">
                  قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام
                  شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر
                  می‌رود.
                </span>
                <ChevronRight className="size-4 shrink-0 rtl:rotate-180" />
              </Badge>
              <h1 className="text-2xl font-semibold tracking-tighter text-balance text-foreground sm:text-3xl md:text-2xll">
                فرایندها را استاندارد و سریع کنید
                <br />
                اتوماسیون را در کل سازمان یکپارچه کنید
                <br />
                خطای انسانی را در کارهای روزمره کم کنید
              </h1>
              <p className="tracking-tight text-pretty text-muted-foreground sm:text-lg md:text-xl">
                فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل
                ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
              </p>
              <div className="flex w-full flex-wrap gap-2">
                <Button className="text-md h-12 w-fit rounded-full bg-primary px-8 text-primary-foreground sm:px-10">
                  شروع کنید
                </Button>
                <Button
                  variant="outline"
                  className="text-md h-12 w-12 shrink-0 rounded-full transition-all ease-in-out hover:rotate-45"
                >
                  <ArrowUpRight className="rtl:rotate-180" />
                </Button>
              </div>
            </div>

            <DottedDiv className="group min-w-0 place-self-end p-2 sm:p-4 lg:w-4/6">
              <div className="relative min-h-80 w-full bg-muted/50 p-3 transition-all ease-in-out group-hover:bg-muted sm:min-h-96 sm:p-4">
                <div className="relative size-full min-h-72 overflow-hidden rounded-2xl sm:min-h-80 sm: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 inset-0 flex flex-col items-center justify-between p-4 sm:p-6 lg:p-10">
                  <p className="flex w-full min-w-0 flex-col gap-2 text-sm tracking-tighter text-pretty text-background sm:flex-row sm:items-center sm:text-base lg:text-xl">
                    <span className="min-w-0">
                      با اتصال ابزارهای موجود، داده بین سیستم‌ها خودکار جریان
                      پیدا می‌کند و نیاز به کپی دستی از بین می‌رود.
                    </span>
                    <span className="hidden h-2.5 w-px shrink-0 bg-background sm:block" />
                    <span className="min-w-0">
                      قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست
                      انجام شود.
                    </span>
                  </p>
                  <div className="flex flex-col items-center justify-center px-2">
                    <h2 className="text-center text-xl font-semibold tracking-tight text-balance text-background sm:text-2xl lg:text-2xll">
                      کارهای تکراری را خودکار کنید
                      <br />
                      گردش‌کار تیم را بدون کد بسازید
                    </h2>
                    <div className="mt-2 h-1 w-6 rounded-full bg-background" />
                    <p className="mt-6 max-w-sm text-center text-sm leading-5 font-light tracking-tighter text-pretty text-background/80 sm:mt-10 sm:text-lg">
                      فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله
                      قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص
                      می‌شوند.
                    </p>
                  </div>
                  <a
                    href="#"
                    className="group mb-2 flex cursor-pointer flex-col items-center justify-center text-background sm:mb-6"
                  >
                    <ChevronUp
                      size={30}
                      className="transition-all ease-in-out group-hover:-translate-y-2"
                    />
                    <p className="text-base tracking-tight text-background sm:text-xl">
                      مشاهده همه
                    </p>
                  </a>
                </div>
              </div>
            </DottedDiv>
          </div>
        </DottedDiv>
      </div>
    </section>
  );
};

export { Feature239 };

const DottedDiv = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => (
  <div className={cn("relative min-w-0 overflow-hidden", className)}>
    <div className="absolute top-4 start-4 end-4 h-px bg-muted lg:end-auto lg:w-[115%] lg:-start-25" />
    <div className="absolute bottom-4 start-4 end-4 h-px bg-muted lg:end-auto lg:w-[115%] lg:-start-25" />
    <div className="absolute start-4 top-4 bottom-4 w-px bg-muted lg:top-auto lg:bottom-auto lg:h-[130%] lg:-top-25" />
    <div className="absolute end-4 top-4 bottom-4 w-px bg-muted lg:top-auto lg:bottom-auto lg:h-[130%] lg:-top-25" />
    <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>
);