import Wrap from '@/components/wrap'
import Image from 'next/image'

export type FooterProps = {}

export default function Footer(props: FooterProps) {
  return (
    <footer className="bg-gray-900 text-white overflow-hidden">
      <Wrap className="flex flex-col px-4 py-8 lg:p-12">
        <div className="flex-auto overflow-hidden flex flex-wrap justify-between">
          <div className="flex flex-col lg:items-center gap-2 max-lg:w-1/2">
            <Image src="/img/qrcode.jpg" alt="logo" width={80} height={80} unoptimized className="flex-none size-20 sm:size-44 bg-gray-100"/>
            <span className="text-sm text-gray-400">关注我们查看更多资讯</span>
          </div>

          <div className="flex flex-col gap-2 lg:gap-4 max-lg:w-1/2">
            <h3>商务合作</h3>
            <p className="text-sm text-gray-400">大客户经理：张经理</p>
            <p className="text-sm text-gray-400">微信：17796668888</p>
            <p className="text-sm text-gray-400">QQ： 70177252</p>
            <h3 className="hidden sm:block">服务保障</h3>
            <p className="text-sm text-gray-400 hidden sm:block">售前服务</p>
            <p className="text-sm text-gray-400 hidden sm:block">技术支持</p>
          </div>

          <SiteNavList
            title="站点导航"
            items={[
              {name: `产品订购`, href: `/product`},
              {name: `获取代理`, href: `/collect`},
              {name: `帮助中心`, href: `/docs`},
              {name: `企业服务`, href: `#`},
              {name: `推广返利`, href: `#`},
            ]}
          />
          <SiteNavList
            title="国内代理"
            items={[
              {name: `短效代理`, href: `/product?type=short`},
              {name: `长效代理`, href: `/product?type=long`},
              {name: `固定IP代理`, href: `/product?type=fixed`},
            ]}
          />
          <SiteNavList
            title="使用案例"
            items={[
              {name: `数据抓取`, href: `/data-capture`},
              {name: `媒体矩阵`, href: `#`},
              {name: `广告验证`, href: `#`},
              {name: `价格监控`, href: `#`},
              {name: `市场调研`, href: `#`},
              {name: `金融数据`, href: `#`},
              {name: `SEO优化`, href: `#`},
              {name: `网站测试`, href: `#`},
            ]}
          />
          <SiteNavList
            title="帮助文档"
            items={[
              {name: `产品功能`, href: `/docs/product-features`},
              {name: `使用教程`, href: `/docs/browser-proxy`},
              {name: `行业资讯`, href: `/docs/news-latest`},
            ]}
          />
        </div>

        <div className="flex-none mt-6 pt-6 border-t border-gray-700 flex flex-col text-gray-300">
          <p className="text-xs">
            蓝狐代理仅提供IP服务，用户使用蓝狐代理IP从事的任何行为均不代表蓝狐代理IP的意志和观点，与蓝狐代理的立场无关。严禁用户使用蓝狐代理从事任何违法犯罪行为， 产生的相关责任用户自负，对此蓝狐代理不承担任何法律责任。
          </p>
          <p className={`text-xs mt-3 `}>版权所有 河南华连网络科技有限公司 | 豫ICP备17004061号-17 | 增值电信业务经营许可证：B1-20190663</p>
        </div>
      </Wrap>
    </footer>
  )
}

function SiteNavList(props: {
  title: string
  items: {
    name: string
    href: string
  }[]
}) {
  return (
    <div className="max-lg:mt-4 w-full lg:w-auto">
      <h3>{props.title}</h3>
      <ul
        className={[
          `mt-1 flex flex-wrap gap-2 `,
          `lg:mt-4 lg:h-[184px] lg:flex-col lg:gap-4 lg:gap-x-6`,
        ].join(' ')}>
        {props.items.map((item, index) => (
          <li key={index}>
            <a href={item.href} className="text-sm text-gray-400">{item.name}</a>
          </li>
        ))}
      </ul>
    </div>
  )
}
