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

interface Compare5Props {
  className?: string;
}

const Compare5 = ({ className }: Compare5Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <div className="text-center">
          <h2 className="text-3xl font-medium sm:text-xl md:text-2xll lg:text-2xll">
            مقایسه روش سنتی و مدرن
                                </h2>
          <p className="mx-auto mt-4 max-w-3xl text-lg text-muted-foreground sm:mt-6 sm:text-xl">
            مزایا، محدودیت‌ها و ارزش هر رویکرد را برای انتخاب بهتر بررسی کنید.
                                </p>
        </div>
        <div className="relative mt-8 grid gap-6 sm:mt-10 md:mt-12 lg:grid-cols-2 lg:gap-10 xl:gap-14">
          <div className="relative h-full">
            <div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl bg-accent sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
              <img
                src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
                alt="تیم متخصص پروژه را برای شما می‌سازد"
                className="h-full w-full object-cover"
              />
              <div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
              <div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
                <h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
                  اجرای پروژه توسط تیم متخصص
                                                  </h3>
                <p className="mt-2 text-sm text-white/80 sm:text-base">
                  بگذارید تیم متخصص ما همه‌چیز را برایتان انجام دهد. کل فرآیند
                  توسعه را از ابتدا تا انتها مدیریت می‌کنیم و راه‌حلی دقیقاً
                  مطابق نیازهای شما تحویل می‌دهیم.
                </p>
                <Button variant="outline">شروع همکاری</Button>
              </div>
            </div>
          </div>

          <div className="relative h-full">
            <div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
              <img
                src="/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg"
                alt="خودتان پروژه را پیش ببرید"
                className="h-full w-full object-cover"
              />
              <div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
              <div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
                <h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
                  توسعه مستقل با پلتفرم
                                                  </h3>
                <p className="mt-2 text-sm text-white/80 sm:text-base">
                  کنترل پروژه را با پلتفرم جامع خودخدمات ما در دست بگیرید. به
                  ابزارها و منابع قدرتمند دسترسی دارید و با راهنمایی متخصص در
                  صورت نیاز، راه‌حل خود را با سرعت خودتان می‌سازید.
                </p>
                <Button variant="outline">شروع همکاری</Button>
              </div>
            </div>
          </div>

          <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background px-4 py-2 text-sm font-bold shadow-lg sm:px-6 sm:py-4 sm:text-base lg:px-8 lg:py-6">
            یا
          </span>
        </div>
      </div>
    </section>
  );
};

export { Compare5 };