'use client'
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import {ReactNode} from 'react'
import Image from 'next/image'
import {useRouter} from 'next/navigation'
import s1 from './_assets/1.webp'
import s2 from './_assets/2.webp'
import s3 from './_assets/3.webp'
import s4 from './_assets/4.webp'
import s5 from './_assets/5.webp'
import s6 from './_assets/6.webp'
import s7 from './_assets/7.webp'
import s8 from './_assets/8.webp'
import s9 from './_assets/9.webp'
import s10 from './_assets/10.webp'
import s11 from './_assets/11.webp'
import s12 from './_assets/12.webp'
import check_main from '@/assets/check-main.svg'
import check_accent from '@/assets/check-accent.svg'
import {Button} from '@/components/ui/button'
import {merge} from '@/lib/utils'
import HomePage from '@/components/home/page'
export type CollectPageProps = {}

export default function CollectPage(props: CollectPageProps) {
  const router = useRouter()
  return (
    <HomePage path={[
      {label: '业务场景'},
      {label: '数据抓取', href: '/data-capture'},
    ]}>
      <Wrap className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
        {/* banner */}
        <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
          <Wrap className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
            <Image src={s12} alt="背景图" className="absolute inset-0 w-full h-full object-cover"/>
            <div className="relative pl-20 w-1/2 flex-1">
              <h1 className="text-4xl">数据抓取</h1>
              <p className="mt-10 text-gray-500">从多元网络源精准捕获数据，为洞察市场、优化策略筑牢根基借前沿技术 高效抓取海量信息，解锁数据价值、赋能业务增长新征程</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-md `}>广泛的数据样本</span>
                </p>
                <p className="flex gap-4 items-center">
                  <Image src={check_main} alt="checkbox" width={24} height={24}/>
                  <span className={`lg:text-md `}>实现高频次抓取</span>
                </p>
                <p className="flex gap-4 items-center">
                  <Image src={check_main} alt="checkbox" width={24} height={24}/>
                  <span className={`lg:text-md `}>保护隐私安全</span>
                </p>
              </div>

              <button
                className={[
                  `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
                  `bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
                ].join(' ')}
                onClick={() => router.push('/product?type=short')}
              >
                选择套餐
              </button>
            </div>
          </Wrap>
        </section>

        {/* 数据展示 */}
        <Section title="全方面增进数据分析的专业">
          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <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">
              <Image
                src={s5}
                alt="全方位的数据样本"
                className="w-44 h-44 object-cover"
                priority
              />
              <h1 className="text-xl">全方位的数据样本</h1>
              <p className="text-sm text-gray-500 flex gap-3 items-center">
                通过在全国范围内进行多地域验证，品牌能 够覆盖更广泛的用户场景，从而实现产品与 目标受众的精准匹配，提升广告效果
              </p>
            </li>
            <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">
              <Image
                src={s3}
                alt="达成提高抓取频次的目的"
                className="w-44 h-44 object-cover"
                priority
              />
              <h1 className="text-xl">达成提高抓取频次的目的</h1>
              <p className="text-sm text-gray-500 flex gap-3 items-center">
                我们提供实时监控广告所处网页环境的质 量，确保广告投放的透明性和合法性，有 效提升转化率与用户互动，为品牌建立良 好的信誉
              </p>
            </li>
            <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">
              <Image
                src={s4}
                alt="维护隐私安全"
                className="w-44 h-44 object-cover"
                priority
              />
              <h1 className="text-xl">维护隐私安全</h1>
              <p className="text-sm text-gray-500 flex gap-3 items-center">
                通过详尽的报告和数据分析，品牌可以全 面评估广告投放效果，关注点击率、转化 率等关键指标，从而优化投放策略，实现 更高的广告回报
              </p>
            </li>
          </ul>
        </Section>

        {/* 优势 1 */}
        <Section title="">
          <div className="flex gap-8">
            <Image
              src={s1}
              alt="s1"
              className="w-0 flex-1 object-cover"
              priority
            />
            <ul className="flex-1 flex flex-col gap-6">
              <li className="p-8 flex flex-col gap-5 rounded-lg max-md:items-center">
                <h1 className="text-xl">蓝狐HTTP解决方案</h1>
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  广告效果验证是评估营销活动成功的关键。我们的代理IP技术提供准确的广告展示和点击 数据，帮助品牌优化广告策略，提升用户参与度。这项技术确保广告数据的真实性，推动 广告行业向更健康和创新的方向发展，实现广告资源的最大化利用。通过深入分析广告效 果，企业可以制定更具针对性的投放策略，显著提升广告效益。在竞争激烈的市场环境中 ，借助我们的技术支持，品牌能够更好地满足目标受众需求，提升整体营销回报
                </p>
              </li>
            </ul>
          </div>
        </Section>

        {/* 优势 2 */}
        <Section title="产品核心优势 ">
          <ul className={merge('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8')}>
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s6}
                alt="s6"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">稳健可靠</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>国内三大运营商（电信/ 联通/移动）正规授权， 每个IP都经过技术团队 的严格筛选和验证</span>
                </p>
              </div>
            </li>
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s7}
                alt="s7"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">资源积累</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>拥有超3000万+的代理资 源储备，每日更新去重， 确保资源池的丰富性和多样性</span>
                </p>
              </div>
            </li>
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s8}
                alt="s8"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">稳定连接</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>通过定期检测和筛选， 确保代理IP的纯净度高 达99.8%，减少了无 效或低质量IP的影响</span>
                </p>
              </div>
            </li>
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s9}
                alt="s9"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">超匿名性</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>直观掌握IP使用情况，借助实时 监控，迅速识别异常，及时调整 策略并优化资源配置</span>
                </p>
              </div>
            </li>
          </ul>
          <ul className="flex mt-8 gap-8">
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s10}
                alt="s10"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">可视化性</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>直观掌握IP使用情况，借助实时 监控，迅速识别异常，及时调整 策略并优化资源配置</span>
                </p>
              </div>
            </li>
            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
              <Image
                src={s11}
                alt="s11"
                className="w-44 h-44 object-cover"
                priority
              />
              <h3 className="text-xl">灵活定价</h3>
              <div className="flex flex-col gap-3">
                <p className="text-sm text-gray-500 flex gap-3 items-center">
                  <span>提供多种代理产品选择，支持灵 活的计费方式，能够适配不同规 模企业的全栈式业务场景</span>
                </p>
              </div>
            </li>
          </ul>
        </Section>

        {/* 全栈式代理解决方案 */}
        <Section title="">
          <div className="flex gap-8 max-md:flex-col max-md:gap-4">
            <div className={merge('shadow-[4px_4px_20px_4px] shadow-blue-50 flex-1 p-4 flex justify-center items-center bg-gray-50')}>
              <Image
                src={s2}
                alt="代理解决方案示意图"
                className="w-full h-auto object-contain max-h-64"
              />
            </div>

            <div className="flex-1 flex flex-col gap-6">

              <div>
                <h3 className="text-2xl font-medium">全栈式代理解决方案</h3>
                <p className="text-gray-500 mt-2">
                  专业代理团队，提供深度市场洞察，为您量身打造代理解决方案
                </p>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>IP时效3-30分钟(可定制)</span>
                </div>
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>IP覆盖全国各地</span>
                </div>
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>稳定长输不掉线</span>
                </div>
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>支持高并发提取</span>
                </div>
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>平均响应时长：0.03s</span>
                </div>
                <div className="flex gap-2 items-center">
                  <Image src={check_accent} alt="特性" width={20} height={20}/>
                  <span>全国热门静态IP线路</span>
                </div>
              </div>
              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap">
                定制咨询
              </Button>
            </div>
          </div>
        </Section>
      </Wrap>
    </HomePage>
  )
}

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>
  )
}
