"use client";

import React from "react";
import { useRouter } from "next/navigation";

export default function Info() {
  const router = useRouter();
  return (
    <section className="flex flex-1 justify-center">
      <div className="flex flex-1 flex-col p-4 items-center">
        <div
          onClick={() => router.back()}
          className="flex absolute left-6 top-6 border border-white rounded-full px-2 justify-center items-center"
        >
          <svg viewBox="0 0 1024 1024" width="16" height="16">
            <path
              d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z"
              fill="#ffffff"
            ></path>
          </svg>
          <p className="text-sm text-white">关闭</p>
        </div>
        <p className="text-white text-3xl font-medium mt-12">支付遇到问题？</p>
        <div className="flex flex-col w-full rounded-lg p-4 mt-4 bg-[#FFFFFF1A]">
          <p className="text-white text-base font-medium">
            一、请勿在代理或VPN环境下进行充值
          </p>
          <p className="text-secondary text-base font-medium">
            如果您打开了代理或者VPN网络，请先关闭代理或VPN后再刷新进入充值页面
          </p>
          <p className="text-white text-base font-medium mt-4">
            二、支付宝无法正常跳转或者操作？
          </p>
          <p className="text-secondary text-base font-medium">
            1、请优先尝试切换网络条件，在移动数据（4G/5G）和WIFI网络中进行切换，并再次尝试打开支付页面；
          </p>
          <p className="text-secondary text-base font-medium">
            2、如您未安装支付宝APP，请根据页面提示下载支付宝APP，以进行接下来的操作直至完成付款。
          </p>
          <p className="text-secondary text-base font-medium mt-4">
            如您未在使用中国大陆地区的网络，支付结果可能会延迟发送，请您耐心等候。如超过一分钟您仍未收到支付完成的消息提示，请尝试联系人工客服。
          </p>
          <p className="text-white text-base font-medium mt-4">
            如仍有其他支付问题，请返回充值页面，点击右下角人工充值。（工作日9:00-21:00）
          </p>
        </div>
      </div>
    </section>
  );
}