import {
  FaApple,
  FaChrome,
  FaFirefox,
  FaSafari,
  FaWindows,
} from "react-icons/fa";

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

interface Download10Props {
  className?: string;
}

const Download10 = ({ className }: Download10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-center gap-6 text-center">
          <h1 className="text-2xll font-semibold md:text-2xll">
            همین امروز اپلیکیشن فروش را نصب کنید
          </h1>
          <p className="max-w-2xl text-lg text-muted-foreground md:text-xl">
            ابزارهایی که بهره‌وری تیم فروش را بالا می‌برد، همکاری را ساده می‌کند و کمک می‌کند سریع‌تر به اهداف برسید.
          </p>
        </div>
        <div className="mx-auto mt-20 grid max-w-5xl grid-cols-1 place-items-center gap-6 lg:grid-cols-3">
          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
            <div className="flex flex-col gap-2">
              <h2 className="text-xl font-semibold">نسخه دسکتاپ</h2>
              <p className="text-muted-foreground">
                قیف فروش و داشبورد کامل روی ویندوز و مک
              </p>
            </div>
            <div className="flex flex-col gap-2">
              <Button
                variant="outline"
                size="lg"
                className="inline-flex items-center gap-2"
              >
                دانلود برای <span dir="rtl">Mac</span>
                <FaApple />
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="inline-flex items-center gap-2"
              >
                دانلود برای <span dir="rtl">Windows</span>
                <FaWindows />
              </Button>
            </div>
          </div>
          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
            <div className="flex w-full flex-col gap-2">
              <h2 className="text-xl font-semibold">اپلیکیشن موبایل</h2>
              <p className="text-muted-foreground">
                بهره‌وری فروش را همیشه همراه خود داشته باشید
              </p>
            </div>
            <div className="flex flex-col gap-2">
              <p className="text-sm text-muted-foreground">
                از فروشگاه رسمی دستگاه خود دانلود کنید:
              </p>
              <div className="grid grid-cols-2 gap-2">
                <a href="#">
                  <img
                    src="/block-media/shadcnblocks/block/badges/appstore.png"
                    alt="دانلود از اپ استور"
                    className="h-auto w-full"
                  />
                </a>
                <a href="#">
                  <img
                    src="/block-media/shadcnblocks/block/badges/googleplay.png"
                    alt="دانلود از گوگل پلی"
                    className="h-auto w-full"
                  />
                </a>
              </div>
            </div>
          </div>
          <div className="flex h-full w-full max-w-md flex-col justify-between gap-6 rounded-xl border border-border p-8">
            <div className="flex flex-col gap-2">
              <h2 className="text-xl font-semibold">افزونه وب</h2>
              <p className="text-muted-foreground">
                مستقیماً از مرورگر وب به ابزارهای ما دسترسی داشته باشید
              </p>
            </div>
            <div className="flex justify-center gap-2">
              <Button
                variant="outline"
                size="lg"
                className="h-19 w-20 flex-col p-3"
              >
                <FaChrome className="size-6" />
                <span dir="rtl">Chrome</span>
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="h-19 w-20 flex-col p-3"
              >
                <FaFirefox className="size-6" />
                <span dir="rtl">Firefox</span>
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="h-19 w-20 flex-col p-3"
              >
                <FaSafari className="size-6" />
                <span dir="rtl">Safari</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download10 };