import { BorderBeam } from "@/components/magicui/border-beam";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Download11Props {
  className?: string;
}

const Download11 = ({ className }: Download11Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-10 md:gap-14 lg:flex-row lg:items-stretch">
          <div className="flex max-w-md flex-col items-start justify-between gap-8 text-center lg:text-start">
            <div className="flex flex-col items-start gap-6">
              <div className="flex flex-col gap-4">
                <h1 className="text-2xll font-bold">دانلود اپلیکیشن دسکتاپ برای ویندوز</h1>
                <p className="text-muted-foreground lg:text-xl">
                  با نسخه دسکتاپ، بهره‌وری فقط یک کلیک فاصله دارد.
                </p>
              </div>
              <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
                <Button size="lg" className="w-full" dir="rtl">
                  دانلود .MSI
                </Button>
                <Button variant="outline" size="lg" className="w-full" dir="rtl">
                  دانلود .EXE
                </Button>
                <Button
                  variant="link"
                  size="lg"
                  className="w-full px-0 sm:col-span-2 lg:justify-start"
                >
                  دانلود از{" "}
                  <span dir="rtl" className="inline-block">
                    فروشگاه نرم‌افزار
                  </span>
                </Button>
              </div>
            </div>
            <div className="flex w-full flex-col gap-2 text-sm text-muted-foreground">
              <p>
                سازگار با{" "}
                <span dir="rtl" className="inline-block">
                  Windows 7, 8, 10 and 11
                </span>
              </p>
              <p>
                نسخه{" "}
                <span dir="rtl" className="inline-block">
                  4.2.0
                </span>
                {" — "}
                <a href="#" className="text-primary hover:underline">
                  مشاهده یادداشت انتشار
                </a>
              </p>
            </div>
          </div>
          <div className="relative overflow-hidden rounded-lg border border-border p-1">
            <img
              src="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
              alt="پیش‌نمایش داشبورد فروش"
              className="rounded-lg dark:hidden"
            />
            <img
              src="/block-media/shadcnblocks/block/dashboard/dashboard-dark-1.png"
              alt="پیش‌نمایش داشبورد فروش"
              className="hidden dark:block"
            />
            <BorderBeam duration={8} size={400} />
            <BorderBeam duration={8} delay={3} size={400} />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download11 };