'use client'

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

const navigation = {
  product: [
    { name: '功能特性', href: '#features' },
    { name: '技术规格', href: '#specs' },
    { name: '定价方案', href: '#pricing' },
    { name: '更新日志', href: '/changelog' },
    { name: '体验演示', href: 'http://sc.flnxi.com' },
  ],
  support: [
    { name: '使用文档', href: '#' },
    { name: '视频教程', href: '#' },
    { name: '常见问题', href: '#' },
    { name: '联系我们', href: '#contact' },
  ],
  company: [
    { name: '关于我们', href: '#' },
    { name: '隐私政策', href: '#' },
    { name: '服务条款', href: '#' },
    { name: '商务合作', href: '#' },
  ],
  social: [
    { name: 'GitHub', icon: Github, href: '#' },
    { name: 'Twitter', icon: Twitter, href: '#' },
    { name: 'LinkedIn', icon: Linkedin, href: '#' },
    { name: 'Email', icon: Mail, href: 'mailto:contact@flnxi.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>

        {/* Additional Info */}
        <div className="mt-8 pt-8 border-t border-apple-gray-800">
          <div className="bg-apple-gray-800 rounded-2xl p-6">
            <div className="flex flex-col md:flex-row items-center justify-between">
              <div className="mb-4 md:mb-0">
                <h4 className="font-semibold mb-1">🚀 立即开始使用FLNXI</h4>
                <p className="text-sm text-apple-gray-400">
                  体验专业的素材管理系统，提升团队效率
                </p>
              </div>
              <a
                href="http://sc.flnxi.com"
                target="_blank"
                rel="noopener noreferrer"
                className="px-6 py-3 bg-apple-blue text-white rounded-full font-semibold button-hover apple-shadow whitespace-nowrap"
              >
                免费体验
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}