import { Check } from "lucide-react";
import {
  FaAndroid,
  FaApple,
  FaAppStoreIos,
  FaChrome,
  FaEdge,
  FaFirefoxBrowser,
  FaLinux,
  FaWindows,
} from "react-icons/fa";

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

const platforms = [
  {
    name: "Windows",
    icon: FaWindows,
    link: "#",
  },
  {
    name: "macOS",
    icon: FaApple,
    link: "#",
  },
  {
    name: "Linux",
    icon: FaLinux,
    link: "#",
  },
  {
    name: "Android",
    icon: FaAndroid,
    link: "#",
  },
  {
    name: "iOS",
    icon: FaAppStoreIos,
    link: "#",
  },
  {
    name: "Chrome",
    icon: FaChrome,
    link: "#",
  },
  {
    name: "Firefox",
    icon: FaFirefoxBrowser,
    link: "#",
  },
  {
    name: "Edge",
    icon: FaEdge,
    link: "#",
  },
];

interface Download9Props {
  className?: string;
}

const Download9 = ({ className }: Download9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-center gap-10 lg:grid-cols-2">
          <div className="flex flex-col gap-6">
            <h1 className="text-xl font-semibold">دانلود اپلیکیشن فروش</h1>
            <p className="max-w-md text-muted-foreground">
              قیف فروش را مدیریت کنید، با تیم هم‌زمان کار کنید و گزارش را روی
              هر دستگاهی ببینید. اپلیکیشن ما را در چند دقیقه راه‌اندازی کنید.
            </p>
            <ul className="space-y-2">
              <li className="flex items-center gap-2">
                <Check className="size-4 shrink-0" />
                برد فروش و اتوماسیون؛ پیگیری‌ها شفاف و منظم
              </li>
              <li className="flex items-center gap-2">
                <Check className="size-4 shrink-0" />
                همکاری لحظه‌ای با تیم فروش و موفقیت مشتری
              </li>
              <li className="flex items-center gap-2">
                <Check className="size-4 shrink-0" />
                خروجی PDF گزارش و اشتراک داشبورد با یک کلیک
              </li>
              <li className="flex items-center gap-2">
                <Check className="size-4 shrink-0" />
                فضای ابری برای مخاطبین، فایل‌ها و تاریخچه معاملات
              </li>
            </ul>
            <div className="flex w-full flex-col items-center gap-2 sm:flex-row">
              <Button size="lg" className="w-full sm:w-auto">
                مشاهده پلن‌ها
              </Button>
              <Button variant="outline" size="lg" className="w-full sm:w-auto">
                دانلود
              </Button>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="پیش‌نمایش اپلیکیشن فروش"
            className="w-full max-w-lg rounded-lg border border-border"
          />
        </div>
        <div className="mt-16 flex items-center gap-10 md:mt-20 md:gap-20">
          <hr className="h-px w-full bg-muted" />
          <span className="text-sm whitespace-nowrap">موجود برای</span>
          <hr className="h-px w-full bg-muted" />
        </div>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-5 md:mt-10">
          {platforms.map((platform, idx) => (
            <a
              href={platform.link}
              key={idx}
              className="flex w-20 flex-col items-center gap-2 rounded-lg p-2 text-sm hover:bg-muted"
            >
              <platform.icon className="size-5" />
              <span dir="rtl">{platform.name}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Download9 };