import {ReactNode} from 'react'
import Wrap from '@/components/wrap'
import Image, {StaticImageData} from 'next/image'
import check_main from '@/assets/check-main.svg'
import banner from './_assets/banner.webp'
import map from './_assets/map.webp'
import next from './_assets/next.svg'
import s1_1 from './_assets/s1-1.webp'
import s1_2 from './_assets/s1-2.webp'
import s1_3 from './_assets/s1-3.webp'
import s1_4 from './_assets/s1-4.webp'
import s1_check from './_assets/s1-check.svg'
import s3_main from './_assets/s3-main.webp'
import s4_1_main from './_assets/s4-1-main.webp'
import s4_2_main from './_assets/s4-2-main.webp'
import s4_1_1 from './_assets/s4-1-1.webp'
import s4_1_2 from './_assets/s4-1-2.webp'
import s4_1_3 from './_assets/s4-1-3.webp'
import s4_2_1 from './_assets/s4-2-1.webp'
import s4_2_2 from './_assets/s4-2-2.webp'
import s4_2_3 from './_assets/s4-2-3.webp'
import FreeTrial from '@/components/free-trial'

export default function Home() {
  return (
    <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">

      {/* banner */}
      <section className="w-full relative">
        <Image src={banner} alt="banner" className="absolute inset-0 h-full object-cover"/>
        <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
          <h1 className="text-4xl">安全，稳定，快速，合规的代理服务器</h1>
          <p className="mt-10 text-gray-500">遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>

          <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
            <p className="flex gap-4 items-center">
              <Image src={check_main} alt="checkbox" width={24} height={24}/>
              <span className={`lg:text-lg `}>全国200+城市节点</span>
            </p>
            <p className="flex gap-4 items-center">
              <Image src={check_main} alt="checkbox" width={24} height={24}/>
              <span className={`lg:text-lg `}>300+城市级精准定位</span>
            </p>
            <p className="flex gap-4 items-center">
              <Image src={check_main} alt="checkbox" width={24} height={24}/>
              <span className={`lg:text-lg `}>低延迟&高并发提取</span>
            </p>
          </div>

          <FreeTrial className={[
            `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
            `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
          ].join(' ')}/>
        </Wrap>
      </section>

      {/* 数据展示 */}
      <Section title="覆盖全国的IP资源及超大的带宽线路">
        <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 lg:border-r max-lg:mb-4 border-gray-200">
            <p className="text-xl">全国城市线路数量</p>
            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">350+</p>
            <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
          </li>
          <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
            <p className="text-xl">每日更新IP数量</p>
            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">1,350,129</p>
            <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
          </li>
          <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
            <p className="text-xl">用户量</p>
            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">26,578</p>
            <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
          </li>
          <li className="flex-1 flex flex-col items-center justify-center">
            <p className="text-xl">IP可用率</p>
            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
          </li>
        </ul>
        <Image src={map} alt="map" className="w-[1200px]"/>

      </Section>

      {/* 优势 1 */}
      <Section title="HTTP安全合规的代理IP资源池">
        <ul
          className={[
            `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
          ].join(' ')}>
          <Sec3Item
            icon={s1_1}
            title="短期动态IP池"
            terms={[
              {icon: s1_check, text: `IP时效3-30分钟(可定制)`},
              {icon: s1_check, text: `支持高并发提取`},
            ]}/>
          <Sec3Item
            icon={s1_2}
            title="长期静态IP池"
            terms={[
              {icon: s1_check, text: `IP覆盖全国各地`},
              {icon: s1_check, text: `平均响应时长：0.03s`},
            ]}/>
          <Sec3Item
            icon={s1_3}
            title="固定IP池"
            terms={[
              {icon: s1_check, text: `稳定长输不掉线`},
              {icon: s1_check, text: `全国热门静态IP线路`},
            ]}/>
          <Sec3Item
            icon={s1_4}
            title="企业级定制池"
            terms={[
              {icon: s1_check, text: `可视化监控设计`},
              {icon: s1_check, text: `技术团队现场支持`},
            ]}/>
        </ul>
      </Section>

      {/* 优势 2 */}
      <Section title="HTTP 产品优势">
        <div className="flex gap-36">
          <ul className="flex-1 flex flex-col gap-6">
            <Sec4Item icon={s4_1_1} title="安全合规" description="国内三大运营商支持"/>
            <Sec4Item icon={s4_1_2} title="稳定链接" description="IP纯净度高达99.9%"/>
            <Sec4Item icon={s4_1_3} title="超匿名性" description="稳定传输，保护隐私安全"/>
          </ul>
          <Image src={s4_1_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
        </div>

        <div className="flex gap-36">
          <Image src={s4_2_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
          <ul className="flex-1 flex flex-col gap-6">
            <Sec4Item icon={s4_2_1} title="API接口文档" description="与第三方软件轻松集成"/>
            <Sec4Item icon={s4_2_2} title="多种编程语言代码" description="C语言、GO语言、Python..."/>
            <Sec4Item icon={s4_2_3} title="双重认证方式" description="API提取+账密认证"/>
          </ul>
        </div>
      </Section>

      {/* 推荐文章 */}
      <Section title="推荐文章">
        <div className="flex gap-8 max-md:gap-4">
          <button className="px-4 max-md:-mx-4">
            <Image src={next} alt="prev" className="rotate-180"/>
          </button>

          <div
            className={[
              `shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`,
              `flex p-14 md:gap-14 max-md:flex-col max-md:p-4`,
            ].join(' ')}>
            <Image src={s3_main} alt="tumb" className="w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center"/>
            <div className="flex-2 flex flex-col justify-between gap-4">
              <h3 className="flex justify-between">
                <span className="text-xl">我是标题</span>
                <sub className="text-sm text-gray-500">2025-03-04</sub>
              </h3>
              <p className="text-gray-400 md:leading-12">
                我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
              </p>
              <div className="flex justify-end">
                <a href="#" className="text-sm text-gray-500 flex items-center gap-4">
                  更多详情
                  <Image src={next} alt="more" className="h-4 fill-gray-400"/>
                </a>
              </div>
            </div>
          </div>

          <button className="px-4 max-md:-mx-4">
            <Image src={next} alt="prev"/>
          </button>
        </div>
      </Section>
    </main>
  )
}

function Section(props: {
  title: string
  children: ReactNode
}) {
  return (
    <section>
      <div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
        <h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>
        {props.children}
      </div>
    </section>
  )
}

function Sec3Item(props: {
  icon: StaticImageData
  title: string
  terms: {
    icon: StaticImageData
    text: string
  }[]
}) {
  return (
    <li
      className={[
        `p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`,
        `max-md:items-center`,
      ].join(' ')}>
      <Image src={props.icon} alt="s1-1" aria-hidden className="self-center w-44 h-44 object-cover"/>
      <h3 className="text-xl">{props.title}</h3>
      <div className="flex flex-col gap-3">
        {props.terms.map((item, index) => {
          return (
            <p key={index} className="text-sm text-gray-500 flex gap-3 items-center">
              <Image src={item.icon} alt="check" aria-hidden className="w-5 h-5"/>
              <span>{item.text}</span>
            </p>
          )
        })}
      </div>
    </li>
  )
}

function Sec4Item(props: {
  icon: StaticImageData
  title: string
  description: string
}) {
  return (
    <li className="flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg">
      <Image src={props.icon} alt="s2-1-1" aria-hidden className="w-24 h-24 object-contain"/>
      <div className="flex flex-col gap-3">
        <h3 className="text-xl">{props.title}</h3>
        <p>{props.description}</p>
      </div>
    </li>
  )
}
