import Link from "next/link";
import React from "react";

export default function IosHowToInstall() {
  return (
    <section className="flex flex-col">
      <h1 className="text-white text-2xl font-medium">
        铁粉空间
        <Link className="ml-4 text-xl link-primary link" href="/">
          点击下载
        </Link>
      </h1>
      <p className="text-error mt-2">*安装新版本时，请先卸载老版本铁粉空间。</p>
      <p className="text-error">
        *下载完需要信任证书才可以使用哦~详细注意事项请见下方教程（每次更新可能需要重新信任）
      </p>
      <h1 className="text-white text-2xl font-medium mt-4">操作指引</h1>
      <p className="text-white text-base mt-2">1️⃣打开【设置】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_1.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-2">2️⃣点击【通用】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_2.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-2">3️⃣点击【VPN与设备管理】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_3.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-2">4️⃣点击【证书】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_4.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-2">5️⃣点击【信任证书】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_5.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-2">6️⃣在弹出页点击【信任】</p>
      <img
        className="w-80 self-center"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/iosinstall_6.png"
        }
        alt=""
      />
      <p className="text-white text-base mt-4">
        注：请于IOS7.1及以上版本运行此软件，具体【设置】内的样式展示可能会根据您的IOS版本有些区别，请注意区分。
      </p>
      å
    </section>
  );
}