"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("py-32", className)}>
      <div className="container">
        <div className="relative isolate flex flex-col md:flex-row md:gap-0">
          <img
            src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
            alt="دستیار هوش مصنوعی"
            className="absolute top-0 start-0 z-[-1] h-full w-full rounded-2xl object-cover"
          />

          <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3">
            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-t-[20px] bg-linear-to-b from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
            <Button
              variant="outline"
              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
            >
              درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.
            </Button>
            <h1 className="text-3xl font-bold text-white md:text-2xll">
              با هوش مصنوعی سریع‌تر تصمیم بگیرید
            </h1>
            <p className="max-w-md text-start text-white/90">
              کارهای تکراری را به AI بسپارید
            </p>
          </div>

          <div className="relative hidden h-[600px] w-5 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 h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3"
            onClick={() => {
              console.log("click");
            }}
          >
            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-b-[20px] bg-linear-to-t from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
            <Button
              variant="outline"
              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
            >
              اتوماسیون AI
            </Button>
            <h1 className="text-3xl font-bold text-white md:text-2xll">
              پیشنهادهایی که واقعاً مفیدند
            </h1>
            <p className="max-w-md text-start text-white/90">
              داده را به بینش عملی تبدیل کنید
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature149 };