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

interface Cta6Props {
  className?: string;
}

const Cta6 = ({ className }: Cta6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="max-w-full overflow-hidden border-y border-border bg-accent pt-10 md:pt-16 lg:pt-20">
        <div className="relative container flex flex-col md:flex-row md:gap-12">
          <div className="mb-[18rem] text-start md:mb-28 md:w-2/3 lg:shrink-0 xl:mb-20 xl:w-1/2">
            <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-2xll lg:mb-6">
              همین امروز شروع کنید
                                      </h3>
            <p className="mb-8 text-muted-foreground lg:text-lg">
              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
                                      </p>
            <Button>شروع رایگان</Button>
          </div>
          <div className="absolute bottom-0 left-1/2 h-min w-[110%] max-w-md -translate-x-1/2 md:-end-36 md:w-3/4 md:max-w-xl md:translate-x-0 lg:mt-auto xl:relative xl:end-0 xl:h-full xl:w-full xl:max-w-full">
            <div className="relative aspect-8/5 h-full min-h-[16rem] w-full">
              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[24%] translate-y-[24%] -rotate-[30deg] justify-center overflow-clip rounded-3xl bg-background shadow-lg shadow-foreground/20 md:max-xl:-translate-x-[8%] md:max-xl:translate-y-[16%] rtl:translate-x-[24%] rtl:rotate-[30deg] md:max-xl:rtl:translate-x-[8%]"></div>
              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[16%] translate-y-[8%] -rotate-[15deg] justify-center overflow-clip rounded-3xl bg-background shadow-xl shadow-foreground/20 md:max-xl:-translate-x-[6%] md:max-xl:translate-y-[6%] rtl:translate-x-[16%] rtl:rotate-[15deg] md:max-xl:rtl:translate-x-[6%]"></div>
              <div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 items-center justify-center overflow-clip rounded-3xl bg-background shadow-2xl shadow-foreground/20"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta6 };