import type { ReactNode } from "react"
import { useNavigate } from "react-router-dom"
import Wrap from "@/components/wrap"
import banner from "./_assets/banner.webp"
import s1 from "./_assets/s1.webp"
import s2 from "./_assets/s2.webp"
import s3 from "./_assets/s3.webp"
import s4 from "./_assets/s4.webp"
import s5 from "./_assets/s5.webp"
import s6 from "./_assets/s6.webp"
import s7 from "./_assets/s7.webp"
import s8 from "./_assets/s8.webp"
import s9 from "./_assets/s9.webp"
import s10 from "./_assets/s10.webp"
import s11 from "./_assets/s11.webp"
import s12 from "./_assets/s12.webp"
import Common from "./_components/header/common"

export default function HomePage() {
  const navigate = useNavigate()

  const handleFreeTrial = () => {
    navigate("/login")
  }
  return (
    <>
      <Common />
      <section className="w-full relative">
        <div
          className="absolute inset-0 z-0"
          style={{
            backgroundImage: `url(${banner})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
          }}
        />

        <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
          <h1 className="text-4xl md:text-5xl font-bold text-center md:text-left">
            聚集优质IP产品，尽在聚IP
          </h1>
          <p className="mt-6 text-gray-600 text-center md:text-left">
            <span className="lg:text-lg">
              覆盖500+城市，超2000个服务器，亿量级IP
            </span>
          </p>

          <div className="mt-8 max-w-3xl">
            <p className="text-gray-600 text-center md:text-left">
              <span className="lg:text-base">
                旗下有极狐、极光、蘑菇、猎豹、麒麟、水滴、火狐、无极等优质动态独享，
                静态独享，单窗口IP 产品
              </span>
            </p>
          </div>
          <div className="mt-12 flex justify-center md:justify-start">
            <button
              type="button"
              onClick={handleFreeTrial}
              className="w-36 h-14 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
            >
              免费试用
            </button>
          </div>
        </Wrap>
      </section>
      <section className="w-full relative shadow-blue-50 bg-white">
        <Wrap className="relative pt-32 pb-48 max-md:pt-32 max-md:pb-24">
          <PageSection title="为什么我们是你的最佳选择">
            <p className="text-gray-600 text-center text-sm">
              国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
            </p>
            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 pt-16">
              <ProductTypeCard icon={s1} title="全网产品最多，IP库最大" />
              <ProductTypeCard icon={s2} title="支持全设备及协议" />
              <ProductTypeCard icon={s3} title="用户独享宽带" />
              <ProductTypeCard icon={s4} title="价低质优，免费测试" />
              <ProductTypeCard icon={s5} title="专属化产品定制" />
              <ProductTypeCard icon={s6} title="专业的服务团队" />
            </ul>
            <div className="flex max-md:flex-col justify-between items-center gap-6 md:gap-10 mt-10 lg:mt-16 p-6 md:p-12 lg:p-20 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white">
              <div className="flex flex-col">
                <h3 className="text-xl lg:text-2xl font-bold mb-4">
                  全网产品最多，IP库最大
                </h3>
                <p className="text-gray-600 max-w-full lg:w-150 text-sm">
                  旗下有极狐、极光、蘑菇、猎豹、麒麟、水滴、火狐、无极等优质动态独享、静态独享、单窗口IP产品
                </p>
              </div>
              <div className="flex">
                <img src={s7} alt="产品" className="w-20 h-20 rounded-lg" />
              </div>
            </div>
            <div className="flex flex-col pt-12 lg:pt-24 ">
              <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                海量地区，遍布全国的优质IP代理资源
              </h2>
              <p className="text-gray-600 text-center text-sm">
                遍布全国的代理服务器节点为用户提供智能帮助
              </p>
            </div>
            <div className="pt-10 lg:pt-20">
              <ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4 ">
                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
                    10万+
                  </p>
                  <p className="text-sm">全国节点覆盖</p>
                </li>
                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
                    100万+
                  </p>
                  <p className="text-sm">全国独享IP池</p>
                </li>
                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
                    10万+
                  </p>
                  <p className="text-sm">全国实时在线IP数</p>
                </li>
                <li className="flex-1 flex flex-col items-center justify-center">
                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
                    99%
                  </p>
                  <p className="text-sm">IP可用率</p>
                </li>
              </ul>
            </div>

            <div className="flex flex-col pt-12 lg:pt-24 ">
              <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                满足您的多种业务需求
              </h2>
              <p className="text-gray-600 text-center text-sm">
                更灵活自由的设计方式，适配多种业务需求
              </p>
            </div>

            <div className="flex flex-col mt-10 lg:mt-20">
              <div className="relative flex items-center justify-center">
                <img src={s9} alt="图片" className="max-w-full h-auto" />
                <div className="absolute left-0 top-0 w-[30%] h-full flex flex-col justify-between">
                  <div className="text-left pr-4 pt-0">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      爬虫抓取
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      3000W高匿名IP，可以轻松抓取企业信息、分类信息、房地产信息、电商信息
                    </p>
                  </div>
                  <div className="text-left pr-4">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      数据采集
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      用于大数据采集的多样化利用场景，快速采集SEO数据优化、金融理财、地域信息数据
                    </p>
                  </div>
                  <div className="text-left pr-4 pb-0">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      营销推广
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      论坛发帖、问答推广、网上购物、投票点赞等，根据渠道操作要求，定制IP完成营销推广
                    </p>
                  </div>
                </div>

                <div className="absolute right-0 top-0 w-[30%] h-full flex flex-col justify-between">
                  <div className="text-right pl-4 pt-0">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      电子商务
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      可帮助用户切换网络，模拟多个独立账号，有助于用户参与限时促销活动，避免购物效率低下的困扰
                    </p>
                  </div>
                  <div className="text-right pl-4">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      游戏工作室
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      保证IP稳定，不掉线，在有效时长内完成游戏试玩、升级、完成游戏工作室操作要求
                    </p>
                  </div>
                  <div className="text-right pl-4 pb-0">
                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
                      自媒体运营
                    </h4>
                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
                      可帮助自媒体运营者维护账号独立性，为每个账号赋予独立IP，避免IP地址关联带来的负面影响
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex flex-col pt-12 lg:pt-24 ">
              <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                为您提供质量保障
              </h2>
              <p className="text-gray-600 text-center text-sm">
                国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 pt-20">
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                <div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
                  <img src={s10} alt="售前咨询" className="p-6" />
                </div>
                <h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
                  售前咨询
                </h2>
                <p className="text-xs text-gray-600">
                  注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关
                  答疑
                </p>
              </div>
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                <div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
                  <img src={s11} alt="售中服务" className="p-6" />
                </div>
                <h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
                  售中服务
                </h2>
                <p className="text-xs text-gray-600">
                  全国100万+动态IP代理资源免费测试，先测后买让您安心使用
                </p>
              </div>
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                <div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
                  <img src={s12} alt="售后保障" className="p-6" />
                </div>
                <h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
                  售后保障
                </h2>
                <p className="text-xs text-gray-600">
                  1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
                </p>
              </div>
            </div>

            <div className="flex flex-col pt-12 lg:pt-24 ">
              <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                为您推荐聚IP的产品
              </h2>
              <p className="text-gray-600 text-center text-sm">
                更灵活自由的设计方式，适配多种业务需求
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 pt-12 lg:pt-30">
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                <div className="mb-3">
                  <h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
                    全国动态IP资源
                  </h4>
                  <p className="text-gray-500 text-xs leading-relaxed">
                    覆盖全国100万+纯净动态代理IP资源，真实家庭在线代理IP
                    ，高度匿名，保护隐私
                  </p>
                </div>
                <div className="mb-3">
                  <h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
                    精准城市定位
                  </h4>
                  <p className="text-gray-500 text-xs leading-relaxed">
                    精准定位，高效稳定连接，助力轻松访问
                  </p>
                </div>
                <div className="mb-2">
                  <h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
                    三大协议支持
                  </h4>
                  <p className="text-gray-500 text-xs leading-relaxed">
                    分布式集群架构，同时支持 协议
                  </p>
                </div>
                <button
                  type="button"
                  className="w-full h-12 mt-12 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
                >
                  查看IP线路表
                </button>
              </div>
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                <h4 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
                  极光IP
                </h4>
                <div className="flex justify-between">
                  <div>
                    <p className="text-gray-500 text-xs leading-relaxed">
                      首单低至{" "}
                      <span className="text-green-500 text-xl font-bold">
                        ￥0.1
                      </span>
                    </p>
                    <div className="bg-orange-100 text-orange-500 text-[10px] w-12 text-center mt-2">
                      计时收费
                    </div>
                  </div>
                  <img src={s8} alt="图片" className="w-20 h-20" />
                </div>
                <ul className="space-y-4 text-gray-600">
                  <li className="flex items-start gap-3">
                    <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
                    <span className="text-xs leading-relaxed">
                      全国240+城市，480+地区
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
                    <span className="text-xs leading-relaxed">
                      池子超大，高效稳定，三网混合真实IP
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
                    <span className="text-xs leading-relaxed">
                      多款套餐可选，满足多元业务需求
                    </span>
                  </li>
                </ul>
                <button
                  type="button"
                  className="w-full h-12 mt-14 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
                >
                  立即查看
                </button>
              </div>
              <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8 items-start justify-center ">
                <h4 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
                  极狐IP
                </h4>
                <p className="text-gray-500 text-xs leading-relaxed">
                  网速超快，高效稳定，三网混合真实IP
                </p>
                <p className="text-gray-500 text-xs leading-relaxed">
                  全国260+城市，500+地区
                </p>
                <p className="text-gray-500 text-xs leading-relaxed">
                  多款套餐可选，满足多元业务需求
                </p>
              </div>
            </div>
          </PageSection>
        </Wrap>
      </section>
    </>
  )
}

function PageSection(props: { title: string; children: ReactNode }) {
  return (
    <section>
      <div className="max-w-308 mx-auto px-4 flex flex-col items-stretch">
        <h2 className="text-center text-2xl lg:text-3xl mb-6 lg:mb-16">
          {props.title}
        </h2>
        {props.children}
      </div>
    </section>
  )
}

function ProductTypeCard(props: { icon: string; title: string }) {
  return (
    <li className="flex flex-col items-center gap-5 rounded-lg text-center gap-6">
      <img
        src={props.icon}
        alt={props.title}
        className="w-20 h-20 object-cover"
      />
      <p className="text-sm">{props.title}</p>
    </li>
  )
}
