xiaso-flnxi-website/components/Footer.tsx

'use client'

import Image from 'next/image'
import { Github, Twitter, Linkedin, Mail } from 'lucide-react'

const navigation = {
  product: [
    { name: '系统功能', href: '#system-features' },
    { name: '版本定价', href: '#pricing' },
    { name: '体验演示', href: 'http://sc.flnxi.com' },
  ],
  support: [
    { name: '联系购买', href: '#contact' },
  ],
  company: [
    { name: '关于我们', href: '#contact' },
  ],
  social: [
    { name: 'GitHub', icon: Github, href: '#' },
    { name: 'Twitter', icon: Twitter, href: '#' },
    { name: 'LinkedIn', icon: Linkedin, href: '#' },
    { name: 'Email', icon: Mail, href: 'mailto:guoxizi2025@163.com' },
  ],
}

export default function Footer() {
  return (
    <footer className="bg-apple-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
          {/* Brand */}
          <div className="lg:col-span-2">
            <div className="flex items-center space-x-3 mb-4">
              <div className="relative w-12 h-12">
                <Image
                  src="/images/logo.png"
                  alt="FLNXI Logo"
                  fill
                  className="object-contain"
                />
              </div>
              <span className="text-2xl font-bold">FLNXI</span>
            </div>
            <p className="text-apple-gray-400 mb-6 max-w-sm leading-relaxed">
              专注于企业级素材管理解决方案，让素材管理更简单、更高效。
            </p>
            <div className="flex items-center space-x-4">
              {navigation.social.map((item) => {
                const Icon = item.icon
                return (
                  <a
                    key={item.name}
                    href={item.href}
                    className="p-2 bg-apple-gray-800 rounded-lg hover:bg-apple-gray-700 transition-colors duration-200"
                    aria-label={item.name}
                  >
                    <Icon className="w-5 h-5" />
                  </a>
                )
              })}
            </div>
          </div>

          {/* Product Links */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
              产品
            </h3>
            <ul className="space-y-3">
              {navigation.product.map((item) => (
                <li key={item.name}>
                  <a
                    href={item.href}
                    className="text-apple-gray-400 hover:text-white transition-colors duration-200"
                  >
                    {item.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Support Links */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
              支持
            </h3>
            <ul className="space-y-3">
              {navigation.support.map((item) => (
                <li key={item.name}>
                  <a
                    href={item.href}
                    className="text-apple-gray-400 hover:text-white transition-colors duration-200"
                  >
                    {item.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Company Links */}
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
              公司
            </h3>
            <ul className="space-y-3">
              {navigation.company.map((item) => (
                <li key={item.name}>
                  <a
                    href={item.href}
                    className="text-apple-gray-400 hover:text-white transition-colors duration-200"
                  >
                    {item.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="border-t border-apple-gray-800 my-8" />

        {/* Bottom Footer */}
        <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <div className="text-apple-gray-400 text-sm">
            © {new Date().getFullYear()} FLNXI. 保留所有权利。
          </div>
          <div className="flex items-center space-x-6 text-sm text-apple-gray-400">
            <span>ICP备案号：XXXXXXXX</span>
            <a href="#" className="hover:text-white transition-colors">
              网站地图
            </a>
          </div>
        </div>

      </div>
    </footer>
  )
}