import { Check } from "lucide-react";

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

interface Cta7Props {
  className?: string;
}

const Cta7 = ({ className }: Cta7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative rounded-xl border border-border bg-accent px-6 py-8 2xl:grid 2xl:grid-cols-2 2xl:px-14 2xl:py-10">
          <div aria-hidden="true" className="absolute inset-0 overflow-hidden">
            <svg
              fill="none"
              width={404}
              height={384}
              viewBox="0 0 404 384"
              aria-hidden="true"
              className="absolute top-full end-full -translate-x-2/3 -translate-y-1/2 rotate-[60deg] rtl:translate-x-2/3 rtl:-rotate-[60deg]"
            >
              <defs>
                <pattern
                  x={0}
                  y={0}
                  id="dots"
                  width={16}
                  height={16}
                  patternUnits="userSpaceOnUse"
                >
                  <circle
                    cx={2}
                    cy={2}
                    r={2}
                    fill="currentColor"
                    className="text-border"
                  />
                </pattern>
              </defs>
              <rect fill="url(#dots)" width={400} height={400} />
            </svg>
          </div>
          <div className="relative mb-12 text-start 2xl:mb-0">
            <h3 className="mb-6 text-xl font-semibold md:mb-8 md:text-xl lg:mb-12">
              همین امروز شروع کنید
                                      </h3>
            <p className="mb-6 text-xs tracking-widest text-muted-foreground uppercase">
              تفاوت را در عمل تجربه کنید.
                                      </p>
            <ul className="grid gap-x-8 gap-y-4 text-muted-foreground md:grid-cols-2">
              <li className="flex items-center gap-2">
                <Check className="size-5 shrink-0 text-foreground" />
                یکپارچه‌سازی سریع با سرویس‌ها
                                            </li>
              <li className="flex items-center gap-2">
                <Check className="size-5 shrink-0 text-foreground" />
                پشتیبانی تخصصی
                                            </li>
              <li className="flex items-center gap-2">
                <Check className="size-5 shrink-0 text-foreground" />
                شخصی‌سازی کامل رابط کاربری
                                            </li>
              <li className="flex items-center gap-2">
                <Check className="size-5 shrink-0 text-foreground" />
                به‌روزرسانی و توسعه مستمر
                                            </li>
            </ul>
          </div>
          <div className="relative flex items-end 2xl:justify-end">
            <Button size="lg">شروع رایگان</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta7 };