"use client";

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

interface Feature149Props {
  className?: string;
}

const Feature149 = ({ className }: Feature149Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container min-w-0 max-w-full">
        <div className="relative isolate flex w-full min-w-0 flex-col gap-3 md:flex-row md:gap-0">
          <img
            src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
            alt="دستیار هوش مصنوعی"
            className="absolute inset-0 z-[-1] hidden size-full rounded-2xl object-cover md:block"
          />

          <div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
            <img
              src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
              alt=""
              aria-hidden
              className="absolute inset-0 z-[-2] size-full object-cover md:hidden"
            />
            <div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-b from-black/40 to-black/50 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/40 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
            <Button
              variant="outline"
              className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
            >
              دسته‌بندی خودکار
            </Button>
            <h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
              با هوش مصنوعی سریع‌تر تصمیم بگیرید
            </h2>
            <p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
              درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید. کارهای
              تکراری را به AI بسپارید.
            </p>
          </div>

          <div className="relative hidden h-[600px] w-5 shrink-0 bg-background md:block">
            <div className="absolute top-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_-10px_0_0_var(--background)]" />
            <div className="absolute top-0 end-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[10px_-10px_0_0_var(--background)]" />
            <div className="absolute bottom-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_10px_0_0_var(--background)]" />
            <div className="absolute end-[-40px] bottom-0 h-[40px] w-[40px] rounded-[1rem] shadow-[10px_10px_0_0_var(--background)]" />
          </div>

          <div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
            <img
              src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
              alt=""
              aria-hidden
              className="absolute inset-0 z-[-2] size-full object-cover object-[center_70%] md:hidden"
            />
            <div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-t from-black/50 to-black/40 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/40 group-hover:to-black/30 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
            <Button
              variant="outline"
              className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
            >
              اتوماسیون AI
            </Button>
            <h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
              پیشنهادهایی که واقعاً مفیدند
            </h2>
            <p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
              داده را به بینش عملی تبدیل کنید
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature149 };