import { Link } from 'react-router-dom';
import { products } from '../data/products';
import { Phone, MapPin } from 'lucide-react';

export default function Footer() {
  return (
    <footer className="bg-[#0a1628] text-white relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
          backgroundSize: '24px 24px',
        }}
      />
      <div className="absolute top-0 right-0 w-80 h-80 bg-[#043b8f]/8 rounded-full blur-[120px]" />

      <div className="relative max-w-5xl mx-auto px-6 py-10">
        {/* Row 1 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 divide-x divide-white/15 text-center">
          {/* Brand + Contact */}
          <div className="md:px-8">
            <div className="flex items-center justify-center gap-2.5 mb-3 whitespace-nowrap">
              <img src="/favicon.ico" alt="讯驰" className="w-8 h-8" />
              <span className="text-lg font-bold text-white tracking-tight">讯驰科技</span>
            </div>
            <p className="text-white/60 text-xs leading-loose mb-4">智慧校园解决方案提供商</p>
            <div className="flex items-start justify-center gap-2 mb-3">
              <MapPin className="w-3.5 h-3.5 text-white/50 mt-0.5 shrink-0" />
              <span className="text-white/70 text-xs leading-loose">南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房</span>
            </div>
            <div className="flex items-center justify-center gap-2">
              <Phone className="w-3.5 h-3.5 text-white/50 shrink-0" />
              <span className="text-white/70 text-xs">0771-3864294</span>
            </div>
          </div>

          {/* Products */}
          <div className="md:px-8">
            <h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">产品中心</h4>
            <ul className="space-y-2.5 flex flex-col items-center">
              {products.map((product) => (
                <li key={product.slug}>
                  <Link to={`/product/${product.slug}`}
                    className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
                    <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
                    {product.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Quick links */}
          <div className="md:px-8">
            <h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">快速链接</h4>
            <ul className="space-y-2.5 flex flex-col items-center">
              <li>
                <Link to="/" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
                  返回首页
                </Link>
              </li>
              <li>
                <Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
                  在线咨询
                </Link>
              </li>
              <li>
                <Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
                  成为代理商
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Row 2: Copyright */}
        <div className="pt-6 border-t border-white/15">
          <p className="text-white/50 text-xs text-center">&copy; 2026 讯驰科技 版权所有 &middot;备案号：桂ICP备10003405号-1</p>
        </div>
      </div>
    </footer>
  );
}