import { Apple, Monitor, Smartphone } from "lucide-react"
import type { ReactNode } from "react"
import Wrap from "@/components/wrap"

export default function SoftDownloadPage() {
  const DownloadBtn = ({
    href,
    icon,
    label,
  }: {
    href: string
    icon: ReactNode
    label: string
  }) => (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-white border border-blue-400 text-blue-500 rounded-full text-sm font-medium hover:bg-blue-50 transition-colors"
    >
      {icon} {label}
    </a>
  )

  return (
    <Wrap className="flex flex-col gap-6 mt-20 bg-white">
      <div className="grid grid-cols-3 mt-3">
        <div></div>
        <h3 className="text-3xl font-bold text-gray-800 text-center">
          软件下载
        </h3>
        <div className="flex gap-4 text-sm justify-end items-end text-blue-500">
          <a
            href="/ipline"
            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
          >
            IP线路表
          </a>
          <a
            href="/help"
            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
          >
            教程&amp;帮助
          </a>
        </div>
      </div>

      <ul className="flex justify-between gap-4 text-xs text-gray-600 px-2">
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          下载的软件需和购买的产品名一致才可使用
        </li>
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          下载和使用时需关闭电脑管家，360等杀毒软件
        </li>
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          无对应客户端时，可通过线路表直连支持所有设备
        </li>
      </ul>

      <div className="grid grid-cols-3 gap-8">
        <div className="flex flex-col gap-3">
          <h4 className="text-center font-bold text-gray-700 text-base mb-1">
            极狐IP
          </h4>
          <div className="flex flex-col gap-3">
            <DownloadBtn
              href="https://mp4.juip.com/jh-dl.zip"
              icon={<Monitor className="w-4 h-4" />}
              label="Windows客户端"
            />
            <DownloadBtn
              href="https://mp4.juip.com/dl.apk"
              icon={<Smartphone className="w-4 h-4" />}
              label="安卓APP"
            />
            <DownloadBtn
              href="https://www.juip.com/article/index?Catalog=4"
              icon={<Apple className="w-4 h-4" />}
              label="苹果直连教程"
            />
          </div>
        </div>

        <div className="flex flex-col gap-3">
          <h4 className="text-center font-bold text-gray-700 text-base mb-1">
            极光IP
          </h4>
          <div className="flex flex-col gap-3">
            <DownloadBtn
              href="https://mp4.juip.com/jg-dl.zip"
              icon={<Monitor className="w-4 h-4" />}
              label="Windows客户端"
            />
            <DownloadBtn
              href="https://mp4.juip.com/jgdl.apk"
              icon={<Smartphone className="w-4 h-4" />}
              label="安卓APP"
            />
            <DownloadBtn
              href="https://www.juip.com/article/index?Catalog=4"
              icon={<Apple className="w-4 h-4" />}
              label="苹果直连教程"
            />
          </div>
        </div>

        <div className="flex flex-col  gap-3">
          <h4 className="text-center font-bold text-gray-700 text-base mb-1">
            蘑菇IP
          </h4>
          <div className="flex flex-col gap-3">
            <DownloadBtn
              href="https://mp4.juip.com/%E8%98%91%E8%8F%87IP-2-17.zip"
              icon={<Monitor className="w-4 h-4" />}
              label="Windows客户端"
            />
            <DownloadBtn
              href="https://mp4.juip.com/mogudl.apk"
              icon={<Smartphone className="w-4 h-4" />}
              label="安卓APP"
            />
            <DownloadBtn
              href="https://www.juip.com/article/index?Catalog=4"
              icon={<Apple className="w-4 h-4" />}
              label="苹果直连教程"
            />
          </div>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-8">
        <div className="flex flex-col gap-3">
          <h4 className="text-center font-bold text-gray-700 text-base mb-1">
            麒麟IP
          </h4>
          <div className="flex flex-col gap-3">
            <DownloadBtn
              href="https://mp4.juip.com/%E9%BA%92%E9%BA%9F%E7%94%B5%E8%84%91HZ%E7%89%88.exe"
              icon={<Monitor className="w-4 h-4" />}
              label="Windows客户端"
            />
            <DownloadBtn
              href="https://mp4.juip.com/%E9%BA%92%E9%BA%9F%E5%AE%89%E5%8D%93HZ%E7%89%88.apk"
              icon={<Smartphone className="w-4 h-4" />}
              label="安卓APP"
            />
            <DownloadBtn
              href="https://www.juip.com/article/index?Catalog=4"
              icon={<Apple className="w-4 h-4" />}
              label="苹果直连教程"
            />
          </div>
        </div>

        <div className="flex flex-col gap-3">
          <h4 className="text-center font-bold text-gray-700 text-base mb-1">
            猎豹IP
          </h4>
          <div className="flex flex-col gap-3">
            <DownloadBtn
              href="https://mp4.juip.com/lb-dl.zip"
              icon={<Monitor className="w-4 h-4" />}
              label="Windows客户端"
            />
            <DownloadBtn
              href="https://mp4.juip.com/%E7%8C%8E%E8%B1%B9%E5%AE%89%E5%8D%93ikev2%E7%89%88.apk"
              icon={<Smartphone className="w-4 h-4" />}
              label="安卓APP"
            />
            <DownloadBtn
              href="https://mp4.juip.com/lbdlsstp.apk"
              icon={<Apple className="w-4 h-4" />}
              label="苹果直连教程"
            />
          </div>
        </div>
      </div>

      <div className="flex flex-col gap-6 mb-20">
        <h4 className="text-center font-bold text-gray-700 text-base">
          代理商专用客户端
        </h4>
        <div className="grid grid-cols-3 gap-4">
          <DownloadBtn
            href="https://mp4.juip.com/jh-dl.zip"
            icon={<Monitor className="w-4 h-4" />}
            label="极狐IP电脑端"
          />
          <DownloadBtn
            href="https://mp4.juip.com/dl.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="极狐IP安卓版"
          />
          <DownloadBtn
            href="https://mp4.juip.com/%E8%98%91%E8%8F%87IP-2-17.zip"
            icon={<Monitor className="w-4 h-4" />}
            label="蘑菇IP电脑端"
          />

          <DownloadBtn
            href="https://mp4.juip.com/mogudl.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="蘑菇IP安卓版"
          />
          <DownloadBtn
            href="https://mp4.juip.com/jg-dl.zip"
            icon={<Monitor className="w-4 h-4" />}
            label="极光IP电脑端"
          />
          <DownloadBtn
            href="https://mp4.juip.com/jgdl.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="极光IP安卓版"
          />

          <DownloadBtn
            href="https://mp4.juip.com/%E9%BA%92%E9%BA%9F%E7%94%B5%E8%84%91HZ%E7%89%88.exe"
            icon={<Monitor className="w-4 h-4" />}
            label="麒麟IP电脑端"
          />
          <DownloadBtn
            href="https://mp4.juip.com/%E9%BA%92%E9%BA%9F%E5%AE%89%E5%8D%93HZ%E7%89%88.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="麒麟IP安卓版"
          />
          <DownloadBtn
            href="https://mp4.juip.com/lb-dl.zip"
            icon={<Monitor className="w-4 h-4" />}
            label="猎豹IP电脑端"
          />
          <DownloadBtn
            href="https://mp4.juip.com/lbdlsstp.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="猎豹IP安卓ikev2"
          />
          <DownloadBtn
            href="https://mp4.juip.com/lbdlsstp.apk"
            icon={<Smartphone className="w-4 h-4" />}
            label="猎豹IP安卓sstp"
          />
        </div>
      </div>
    </Wrap>
  )
}
