import { ArrowRight, Sparkles } from "lucide-react";

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

interface Cta1Props {
  className?: string;
}

const Cta1 = ({ className }: Cta1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Card className="flex flex-col justify-between border-muted pb-0 md:flex-row md:py-6">
          <div className="p-6 text-start md:max-w-96">
            <div className="mb-2 flex items-center gap-2">
              <span className="flex size-7 items-center justify-center rounded-full bg-muted">
                <Sparkles className="size-4" strokeWidth={1.5} />
              </span>
              <h4 className="text-xl font-bold">همین امروز شروع کنید</h4>
            </div>
            <p className="text-muted-foreground">
              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
                                      </p>
            <Button className="mt-8">
              شروع رایگان
                                        <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
            </Button>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر معرفی محصول"
            className="aspect-video object-cover md:max-w-96"
          />
        </Card>
      </div>
    </section>
  );
};

export { Cta1 };