'use client'

import Link from 'next/link'
import Image from 'next/image'
import { Separator } from '@/components/ui/separator'
import { MapPin } from 'lucide-react'

export function Footer() {
  const currentYear = new Date().getFullYear()
  const hostname = typeof window !== 'undefined' ? window.location.hostname : ''
  const icpNumber = hostname === 'www.baimajingxuan.com' ? '津ICP备2020008456号-1' : hostname === 'www.baimajiayuanjiankang.com' ? '津ICP备2023000762号' : '津ICP备99999999号'
  
  return (
    <footer className="bg-[#050A14] text-gray-400 pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-12">
          {/* Brand Info */}
          <div className="lg:col-span-1">
            {/* Logo Image */}
            <div className="relative h-14 w-auto aspect-[2/1] mb-6">
              <Image
                src="/baima-logo.png"
                alt="白马家园 Logo"
                fill
                className="object-contain"
              />
            </div>
            <p className="text-sm leading-relaxed mb-6 text-gray-500">
              军工技术赋能实体经济，人工智能驱动万商互联。<br/>
              打造AI时代小微创业与消费循环生态圈。
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold text-white text-lg mb-6">产品中心</h3>
            <ul className="space-y-3 text-sm">
              <li><Link href="/products" className="hover:text-[#FF6600] transition-colors">白马智付</Link></li>
              <li><Link href="/products" className="hover:text-[#FF6600] transition-colors">AI拓客宝</Link></li>
              <li><Link href="/products" className="hover:text-[#FF6600] transition-colors">商家联盟</Link></li>
              <li><Link href="/products" className="hover:text-[#FF6600] transition-colors">智能硬件</Link></li>
            </ul>
          </div>

          {/* Solutions */}
          <div>
            <h3 className="font-semibold text-white text-lg mb-6">解决方案</h3>
            <ul className="space-y-3 text-sm">
              <li><Link href="#" className="hover:text-[#FF6600] transition-colors">餐饮行业</Link></li>
              <li><Link href="#" className="hover:text-[#FF6600] transition-colors">零售商超</Link></li>
              <li><Link href="#" className="hover:text-[#FF6600] transition-colors">美业丽人</Link></li>
              <li><Link href="#" className="hover:text-[#FF6600] transition-colors">休闲娱乐</Link></li>
            </ul>
          </div>

          {/* Contact Info - 客服企业微信二维码 */}
          <div>
            <h3 className="font-semibold text-white text-lg mb-6">联系我们</h3>
            <div className="space-y-4">
              {/* 企业微信二维码 */}
              <div className="bg-white p-3 rounded-lg inline-block">
                <div className="relative w-28 h-28">
                  <Image
                    src="/baima-qrcode.png"
                    alt="扫码添加客服企业微信"
                    fill
                    className="object-contain rounded"
                  />
                </div>
              </div>
              <p className="text-xs text-gray-500">
                扫码添加客服企业微信<br/>
                获取一对一专业服务
              </p>
              
              {/* 地址保留 */}
              <div className="flex items-start gap-3 pt-4 border-t border-gray-800">
                <MapPin className="w-4 h-4 text-[#FF6600] mt-1 shrink-0" />
                <p className="text-sm">天津市武清区京津产业新城<br/>海达商务大厦</p>
              </div>
            </div>
          </div>
        </div>

        <Separator className="bg-white/10 mb-8" />

        {/* 底部公司名称 - 更新为两家公司 */}
        <div className="text-center pb-4">
          <p className="text-sm text-gray-500 font-medium">
            天津白马晶选科技有限公司<br className="md:hidden" />
            <span className="mx-2 hidden md:inline">|</span>
            天津白马家园健康科技有限公司
          </p>
        </div>

        <div className="text-center text-xs text-gray-600">
          <p>&copy; {currentYear} 白马家园 保留所有权利</p>
          <a 
            href="https://beian.miit.gov.cn/" 
            target="_blank" 
            rel="noopener noreferrer"
            className="hover:text-[#FF6600] transition-colors"
            style={{ marginTop: '10px', fontSize: '16px', display: 'block' }}
          >
            {icpNumber}
          </a>
        </div>
      </div>
    </footer>
  )
}