import React from 'react';
import { motion } from 'framer-motion';
import { Building, User, Eye, Star, GraduationCap, Code, Award, Brain } from 'lucide-react';

const CompanyIntro = () => {
  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.6, ease: "easeOut" }
    }
  };

  const advantages = [
    { icon: Brain, title: 'AI技术领先', color: 'text-blue-500' },
    { icon: Building, title: '医疗场景深度', color: 'text-green-500' },
    { icon: User, title: '专业团队', color: 'text-purple-500' },
    { icon: Star, title: '创新驱动', color: 'text-orange-500' }
  ];

  return (
    <section id="company" className="section-padding bg-gradient-to-br from-gray-50 to-blue-50">
      <div className="container-custom">
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            <Building className="inline-block w-12 h-12 mr-4 text-blue-600" />
            关于数耀科技
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* 左侧：公司介绍 */}
          <div className="space-y-8">
            <motion.div
              className="medical-card p-8"
              variants={cardVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              whileHover={{ y: -5, transition: { duration: 0.3 } }}
            >
              <h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <Building className="w-6 h-6 text-blue-500 mr-3" />
                公司简介
              </h3>
              <p className="text-gray-700 leading-relaxed text-lg">
                <span className="font-semibold text-blue-600">北京数耀科技有限公司</span>
                是一家专注于AI医疗领域的创新科技企业，致力于开发新一代大模型原生临床研究智能解决方案。
                公司汇聚了医疗、AI、大数据等领域的顶尖人才，以技术创新驱动医疗行业数字化转型。
              </p>
            </motion.div>

            <motion.div
              className="medical-card p-8"
              variants={cardVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
              whileHover={{ y: -5, transition: { duration: 0.3 } }}
            >
              <h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <User className="w-6 h-6 text-blue-500 mr-3" />
                核心团队
              </h3>
              <div className="space-y-6">
                {/* 创始人信息 */}
                <div className="border-l-4 border-blue-500 pl-6 py-4">
                  <div className="flex items-center mb-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4">
                      狄
                    </div>
                    <div>
                      <h4 className="text-xl font-bold text-gray-800">狄亮</h4>
                      <p className="text-blue-600 font-semibold">创始人 | 医学+管理</p>
                    </div>
                  </div>
                  <div className="flex items-center text-gray-700">
                    <GraduationCap className="w-5 h-5 text-gray-500 mr-3" />
                    <span>北京大学医学部 & 光华管理学院</span>
                  </div>
                </div>

                {/* 技术合伙人信息 */}
                <div className="border-l-4 border-green-500 pl-6 py-4">
                  <div className="flex items-center mb-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4">
                      高
                    </div>
                    <div>
                      <h4 className="text-xl font-bold text-gray-800">高浩然</h4>
                      <p className="text-green-600 font-semibold">技术合伙人 | 亿级用户产品架构师</p>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center text-gray-700">
                      <GraduationCap className="w-5 h-5 text-gray-500 mr-3" />
                      <span>同济大学软件工程</span>
                    </div>
                    <div className="flex items-center text-gray-700">
                      <Code className="w-5 h-5 text-gray-500 mr-3" />
                      <span>前小米智能生态负责人</span>
                    </div>
                    <div className="flex items-center text-gray-700">
                      <Award className="w-5 h-5 text-gray-500 mr-3" />
                      <span>主导构建支撑百万级并发的医疗数据中台</span>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>

          {/* 右侧：愿景与核心价值 */}
          <div className="space-y-8">
            <motion.div
              className="medical-card p-8"
              variants={cardVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              whileHover={{ y: -5, transition: { duration: 0.3 } }}
            >
              <h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <Eye className="w-6 h-6 text-blue-500 mr-3" />
                公司愿景
              </h3>
              <div className="text-center py-6">
                <motion.div
                  className="medical-gradient text-white p-6 rounded-2xl mb-6"
                  whileHover={{ scale: 1.02 }}
                  transition={{ type: "spring", stiffness: 300 }}
                >
                  <h4 className="text-xl font-bold mb-2">
                    成为国内头部的AI辅助医疗Agent提供商
                  </h4>
                </motion.div>
                <p className="text-gray-600 leading-relaxed">
                  通过先进的AI技术，为医疗机构提供智能化、个性化的临床研究解决方案，
                  提升医疗服务质量和效率，推动精准医疗发展。
                </p>
              </div>
            </motion.div>

            <motion.div
              className="medical-card p-8"
              variants={cardVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              whileHover={{ y: -5, transition: { duration: 0.3 } }}
            >
              <h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <Star className="w-6 h-6 text-blue-500 mr-3" />
                核心优势
              </h3>
              <div className="grid grid-cols-2 gap-4">
                {advantages.map((advantage, index) => (
                  <motion.div
                    key={index}
                    className="text-center p-4 bg-blue-50 rounded-lg"
                    whileHover={{ scale: 1.05, backgroundColor: '#dbeafe' }}
                    transition={{ duration: 0.2 }}
                  >
                    <advantage.icon className={`w-8 h-8 ${advantage.color} mx-auto mb-2`} />
                    <p className="text-sm font-semibold text-gray-700">{advantage.title}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CompanyIntro;