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

interface Cta27Props {
  className?: string;
}

const Cta27 = ({ className }: Cta27Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-start text-2xll font-bold md:text-2xll">
          با خلاقیت بیشتر طراحی کنید
                          </h2>
        <div className="mt-14 grid gap-8 lg:grid-cols-2">
          <div className="rounded-xl bg-muted/50">
            <div className="mx-8 mt-6 mb-12 flex flex-col gap-5 text-start">
              <h3 className="text-xl font-semibold md:text-2xll">کیت طراحی رابط کاربری</h3>
              <div className="flex flex-wrap gap-3">
                <Button size="lg">شروع رایگان</Button>
                <Button size="lg" variant="outline">
                  مشاهده نمونه‌ها
                                                  </Button>
              </div>
            </div>
            <div className="relative max-h-96 overflow-hidden ps-32">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="تصویر معرفی محصول"
                className="max-h-96 w-full rounded-ss-xl border-t border-s border-border object-cover"
              />
              <div className="absolute -bottom-16 start-10 isolate">
                <div className="h-full max-h-96 w-full">
                  <img
                    src="/block-media/shadcnblocks/block/mockups/phone-1.png"
                    alt="نمایش نسخه موبایل"
                    className="max-h-[60vw] sm:max-h-96 lg:max-h-80 xl:max-h-96"
                  />
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
                    alt="تصویر معرفی محصول"
                    className="absolute top-0 start-0 -z-10 h-full w-full rounded-4xl"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="rounded-xl bg-muted/50">
            <div className="mx-8 mt-6 mb-12 flex flex-col gap-5 text-start">
              <h3 className="text-xl font-semibold md:text-2xll">
                استودیو طراحی برند
                                            </h3>
              <div className="flex flex-wrap gap-3">
                <Button size="lg">شروع رایگان</Button>
                <Button size="lg" variant="outline">
                  مشاهده نمونه‌ها
                                                  </Button>
              </div>
            </div>
            <div className="relative max-h-96 overflow-hidden ps-32">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="تصویر معرفی محصول"
                className="max-h-96 w-full rounded-ss-xl border-t border-s border-border object-cover"
              />
              <div className="absolute -bottom-16 start-10 isolate">
                <div className="h-full max-h-96 w-full">
                  <img
                    src="/block-media/shadcnblocks/block/mockups/phone-1.png"
                    alt="نمایش نسخه موبایل"
                    className="max-h-[60vw] sm:max-h-96 lg:max-h-80 xl:max-h-96"
                  />
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
                    alt="تصویر معرفی محصول"
                    className="absolute top-0 start-0 -z-10 h-full w-full rounded-4xl"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta27 };