import { ArrowRight, Book, ChevronRight, File } from "lucide-react";

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

interface Cta3Props {
  className?: string;
}

const Cta3 = ({ className }: Cta3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 flex-col gap-10 rounded-lg border p-6 shadow-sm lg:grid-cols-2 lg:px-20 lg:py-16">
          <div className="text-start">
            <h4 className="mb-2 text-xl font-bold lg:text-xl">
              همین امروز شروع کنید
                                      </h4>
            <p className="text-muted-foreground">
              با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.
                                      </p>
            <div className="mt-8 flex flex-col items-center gap-2 sm:flex-row">
              <Button className="w-full sm:w-auto">
                شروع رایگان
                                              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
              </Button>
              <Button variant="outline" className="w-full sm:w-auto">
                درخواست مشاوره
                                            </Button>
            </div>
          </div>

          <div className="flex flex-col gap-4">
            <a href="#">
              <Card className="flex flex-row items-center justify-between gap-2 px-6 py-4 shadow-none hover:bg-accent">
                <div className="flex items-start gap-2 text-start">
                  <File className="size-4 shrink-0" />
                  <div>
                    <h5 className="mb-2 leading-4 font-medium">مستندات فنی</h5>
                    <p className="text-sm text-muted-foreground">
                      راهنماهای کاربردی، مستندات اتصال هوشمند و نمونه‌کدها برای پیاده‌سازی سریع‌تر در اختیار شماست.
                                                              </p>
                  </div>
                </div>
                <ChevronRight className="size-6 shrink-0 rtl:rotate-180" />
              </Card>
            </a>
            <a href="#">
              <Card className="flex flex-row items-center justify-between gap-2 px-6 py-4 shadow-none hover:bg-accent">
                <div className="flex items-start gap-2 text-start">
                  <Book className="size-4 shrink-0" />
                  <div>
                    <h5 className="mb-2 leading-4 font-medium">آموزش شروع سریع</h5>
                    <p className="text-sm text-muted-foreground">
                      در چند مرحله ساده اولین پروژه خود را ایجاد و راه‌اندازی کنید.
                                                              </p>
                  </div>
                </div>
                <ChevronRight className="size-6 shrink-0 rtl:rotate-180" />
              </Card>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta3 };