import Link from 'next/link';
import { Mail, Phone, MapPin } from 'lucide-react';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';

export function Footer() {
  return (
    <footer className="bg-[#F5F7FA] border-t border-[#E2E8F0] py-12">
      <div className="container-wide">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          <div className="lg:col-span-1">
            <div className="flex items-center mb-6">
              <img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
            </div>
            <p className="text-[#718096] text-sm leading-relaxed mb-6">
              {COMPANY_INFO.description}
            </p>
          </div>

          <div>
            <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">快速链接</h3>
            <ul className="space-y-3">
              {NAVIGATION.map((item) => (
                <li key={item.id}>
                  <a
                    href={item.href}
                    className="text-[#4A5568] hover:text-[#005EB8] transition-colors"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">服务项目</h3>
            <ul className="space-y-3">
              <li>
                <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
                  软件开发
                </a>
              </li>
              <li>
                <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
                  云服务
                </a>
              </li>
              <li>
                <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
                  数据分析
                </a>
              </li>
              <li>
                <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
                  信息安全
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">联系方式</h3>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <MapPin className="w-5 h-5 text-[#005EB8] mt-0.5" />
                <span className="text-[#4A5568]">{COMPANY_INFO.address}</span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-[#005EB8]" />
                <span className="text-[#4A5568]">{COMPANY_INFO.phone}</span>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-[#005EB8]" />
                <span className="text-[#4A5568]">{COMPANY_INFO.email}</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-[#E2E8F0] mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-[#718096] text-sm">
              © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
            </p>
            <div className="flex gap-6">
              <Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
                隐私政策
              </Link>
              <Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
                服务条款
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}