import React from 'react';
import { motion } from 'framer-motion';
import { Brain, Heart, Mail, Phone, MapPin, Github, Linkedin, Twitter } from 'lucide-react';

const Footer = () => {
  const currentYear = new Date().getFullYear();

  const socialLinks = [
    { icon: Github, href: '#', label: 'GitHub' },
    { icon: Linkedin, href: '#', label: 'LinkedIn' },
    { icon: Twitter, href: '#', label: 'Twitter' }
  ];

  const quickLinks = [
    { label: '关于我们', href: '#company' },
    { label: '产品矩阵', href: '#products' },
    { label: 'AI应用', href: '#scenarios' },
    { label: '系统架构', href: '#architecture' },
    { label: '未来愿景', href: '#vision' },
    { label: '总结展望', href: '#contact' }
  ];

  const contactInfo = [
    { icon: Mail, text: 'shuyaokeji2025@126.com', href: 'mailto:shuyaokeji2025@126.com' },
    { icon: Phone, text: '+86 189-1064-6380', href: 'tel:+86 189-1064-6380' },
    { icon: MapPin, text: '北京市海淀区中关村科技园', href: '#' }
  ];

  return (
    <footer className="bg-gray-900 text-white">
      <div className="container-custom py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* 公司信息 */}
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <div className="flex items-center space-x-3">
              <div className="relative">
                <div className="w-10 h-10 medical-gradient rounded-lg flex items-center justify-center">
                  <Brain className="w-6 h-6 text-white" />
                </div>
                <div className="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                  <Heart className="w-2 h-2 text-white" />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-bold">数耀科技</h3>
                <p className="text-gray-400 text-sm">AI医疗解决方案</p>
              </div>
            </div>
            <p className="text-gray-300 leading-relaxed">
              专注于新一代大模型原生临床研究智能解决方案，致力于成为国内头部的AI辅助医疗Agent提供商。
            </p>
            <div className="flex space-x-4">
              {socialLinks.map((social, index) => (
                <motion.a
                  key={index}
                  href={social.href}
                  className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors"
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  aria-label={social.label}
                >
                  <social.icon className="w-5 h-5" />
                </motion.a>
              ))}
            </div>
          </motion.div>

          {/* 快速链接 */}
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <h4 className="text-lg font-semibold mb-4">快速链接</h4>
            <ul className="space-y-2">
              {quickLinks.map((link, index) => (
                <li key={index}>
                  <motion.a
                    href={link.href}
                    className="text-gray-300 hover:text-white transition-colors"
                    whileHover={{ x: 5 }}
                    transition={{ duration: 0.2 }}
                  >
                    {link.label}
                  </motion.a>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* 联系信息 */}
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <h4 className="text-lg font-semibold mb-4">联系我们</h4>
            <ul className="space-y-3">
              {contactInfo.map((contact, index) => (
                <li key={index}>
                  <motion.a
                    href={contact.href}
                    className="flex items-center space-x-3 text-gray-300 hover:text-white transition-colors"
                    whileHover={{ x: 5 }}
                    transition={{ duration: 0.2 }}
                  >
                    <contact.icon className="w-5 h-5 text-blue-400" />
                    <span>{contact.text}</span>
                  </motion.a>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* 技术特色 */}
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <h4 className="text-lg font-semibold mb-4">技术特色</h4>
            <div className="space-y-3">
              <div className="bg-gray-800 p-3 rounded-lg">
                <h5 className="font-medium text-blue-400 mb-1">AI原生架构</h5>
                <p className="text-gray-400 text-sm">大模型深度集成</p>
              </div>
              <div className="bg-gray-800 p-3 rounded-lg">
                <h5 className="font-medium text-green-400 mb-1">全流程覆盖</h5>
                <p className="text-gray-400 text-sm">诊疗全环节智能化</p>
              </div>
              <div className="bg-gray-800 p-3 rounded-lg">
                <h5 className="font-medium text-purple-400 mb-1">专业场景</h5>
                <p className="text-gray-400 text-sm">血管介入等专科</p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* 底部版权信息 */}
      <motion.div
        className="border-t border-gray-800 py-6"
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
      >
        <div className="container-custom">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <p className="text-gray-400 text-sm">
              © {currentYear} 北京数耀科技有限公司. 保留所有权利.
            </p>
            <div className="flex space-x-6 text-sm text-gray-400">
              <motion.a
                href="#"
                className="hover:text-white transition-colors"
                whileHover={{ scale: 1.05 }}
              >
                隐私政策
              </motion.a>
              <motion.a
                href="#"
                className="hover:text-white transition-colors"
                whileHover={{ scale: 1.05 }}
              >
                服务条款
              </motion.a>
              <motion.a
                href="#"
                className="hover:text-white transition-colors"
                whileHover={{ scale: 1.05 }}
              >
                Cookie政策
              </motion.a>
            </div>
          </div>
        </div>
      </motion.div>
    </footer>
  );
};

export default Footer;

