import Image from "next/image"
import Wrap from "@/components/wrap"
import s01 from "@/assets/header/solution/01.svg"
import s02 from "@/assets/header/solution/02.svg"
import s03 from "@/assets/header/solution/03.svg"
import s04 from "@/assets/header/solution/04.svg"
import s05 from "@/assets/header/solution/05.svg"
import s06 from "@/assets/header/solution/06.svg"
import s07 from "@/assets/header/solution/07.svg"
import s08 from "@/assets/header/solution/08.svg"

export default function SolutionMenu() {

  return (
    <Wrap className="grid grid-cols-4 auto-rows-fr gap-4">
      <SolutionItem
        icon={s01}
        title="数据抓取"
        desc="高效采集和分析大量数据，助力企业获取大量情报"
      />
      <SolutionItem
        icon={s02}
        title="广告验证"
        desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
      />
      <SolutionItem
        icon={s03}
        title="市场调查"
        desc="收集全网行业数据，了解竞争对手动态"
      />
      <SolutionItem
        icon={s04}
        title="SEO优化"
        desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
      />
      <SolutionItem
        icon={s05}
        title="品牌保护"
        desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
      />
      <SolutionItem
        icon={s06}
        title="价格监控"
        desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
      />
      <SolutionItem
        icon={s07}
        title="金融数据"
        desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
      />
      <SolutionItem
        icon={s08}
        title="网站测试"
        desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
      />
    </Wrap>
  )
}

function SolutionItem(props: {
  icon: any
  title: string
  desc: string
}) {
  return (
    <div
      className={[
        `h-full p-4 flex gap-4 items-start rounded-md cursor-pointer`,
        `transition-colors duration-200 hover:bg-blue-100`,
      ].join(' ')}
    >
      <Image src={props.icon} alt={props.title} className="w-10 h-10" />
      <div className="flex flex-col gap-1">
        <h3 className="font-bold">{props.title}</h3>
        <p className="text-gray-400 text-sm">{props.desc}</p>
      </div>
    </div>
  )
}