import React from 'react';
import { motion } from 'framer-motion';
import { Target, Lightbulb, RefreshCw, UserCheck, Calendar, TestTube, ArrowRight } from 'lucide-react';

const Mission = () => {
  const features = [
    {
      title: 'AI原生设计',
      description: '从底层架构开始，全面融入AI能力',
      icon: Lightbulb
    },
    {
      title: '临床场景深度',
      description: '深入理解医疗业务流程和临床需求',
      icon: UserCheck
    },
    {
      title: '智能化决策',
      description: '提供精准的诊疗建议和决策支持',
      icon: Target
    }
  ];

  const processSteps = [
    { icon: UserCheck, title: '专病管理', color: 'bg-blue-500' },
    { icon: Calendar, title: '随访管理', color: 'bg-blue-500' },
    { icon: TestTube, title: '科研支持', color: 'bg-blue-500' }
  ];

  return (
    <section id="mission" className="section-padding medical-gradient">
      <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-white mb-4">
            <Target className="inline-block w-12 h-12 mr-4" />
            我们在做什么
          </h2>
        </motion.div>

        <div className="max-w-6xl mx-auto">
          <motion.div
            className="medical-card p-12"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            {/* 核心理念标题 */}
            <motion.div
              className="medical-gradient text-white p-8 rounded-2xl mb-12 text-center"
              whileHover={{ scale: 1.02 }}
              transition={{ type: "spring", stiffness: 300 }}
            >
              <h3 className="text-3xl font-bold mb-4">
                新一代大模型原生临床研究智能解决方案
              </h3>
              <p className="text-xl opacity-90">
                基于先进的大语言模型技术，构建医疗AI生态系统
              </p>
            </motion.div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {/* 左侧：核心理念 */}
              <div>
                <h4 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                  <Lightbulb className="w-6 h-6 text-blue-500 mr-3" />
                  核心理念
                </h4>
                <div className="space-y-4">
                  {features.map((feature, index) => (
                    <motion.div
                      key={index}
                      className="bg-gray-50 border-l-4 border-blue-500 p-4 rounded-lg"
                      initial={{ opacity: 0, x: -20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: index * 0.1 }}
                      whileHover={{ x: 5, transition: { duration: 0.2 } }}
                    >
                      <div className="flex items-start space-x-3">
                        <feature.icon className="w-5 h-5 text-blue-500 mt-1 flex-shrink-0" />
                        <div>
                          <h5 className="font-semibold text-gray-800 mb-1">{feature.title}</h5>
                          <p className="text-gray-600 text-sm">{feature.description}</p>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </div>

              {/* 右侧：闭环管理 */}
              <div>
                <h4 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                  <RefreshCw className="w-6 h-6 text-blue-500 mr-3" />
                  闭环管理
                </h4>
                <div className="bg-blue-50 p-6 rounded-xl">
                  <div className="text-center mb-6">
                    <h5 className="text-xl font-bold text-blue-800 mb-2">一体化平台助力</h5>
                    <p className="text-blue-600">专病管理、随访与科研全流程闭环管理</p>
                  </div>

                  <div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-6">
                    {processSteps.map((step, index) => (
                      <React.Fragment key={index}>
                        <motion.div
                          className="text-center"
                          initial={{ opacity: 0, scale: 0.8 }}
                          whileInView={{ opacity: 1, scale: 1 }}
                          viewport={{ once: true }}
                          transition={{ delay: index * 0.2 }}
                          whileHover={{ scale: 1.1 }}
                        >
                          <div className={`w-16 h-16 ${step.color} rounded-full flex items-center justify-center text-white mb-3 mx-auto`}>
                            <step.icon className="w-8 h-8" />
                          </div>
                          <span className="text-sm font-semibold text-gray-700">{step.title}</span>
                        </motion.div>
                        
                        {index < processSteps.length - 1 && (
                          <motion.div
                            className="hidden md:block"
                            initial={{ opacity: 0, scale: 0 }}
                            whileInView={{ opacity: 1, scale: 1 }}
                            viewport={{ once: true }}
                            transition={{ delay: index * 0.2 + 0.3 }}
                          >
                            <ArrowRight className="w-6 h-6 text-blue-400" />
                          </motion.div>
                        )}
                      </React.Fragment>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Mission;

