import React from 'react';
import { motion } from 'framer-motion';
import { Network, Mic, Bot, Database, ArrowDown, ArrowRight, Cpu, Cloud, Shield, Zap } from 'lucide-react';

const Architecture = () => {
  const architectureLayers = [
    {
      id: 'voice',
      title: 'AI语音接入系统',
      icon: Mic,
      color: 'from-blue-500 to-blue-600',
      textColor: 'text-blue-600',
      bgColor: 'bg-blue-50',
      components: [
        { name: '语音识别引擎', desc: '高精度语音转文字' },
        { name: '自然语言理解', desc: '语义分析与意图识别' },
        { name: '多语言支持', desc: '支持多种语言输入' },
        { name: '噪声过滤', desc: '智能降噪处理' }
      ]
    },
    {
      id: 'analysis',
      title: 'AI需求分析Agent',
      icon: Bot,
      color: 'from-green-500 to-green-600',
      textColor: 'text-green-600',
      bgColor: 'bg-green-50',
      components: [
        { name: '需求理解', desc: '深度理解用户需求' },
        { name: '上下文分析', desc: '结合历史信息分析' },
        { name: '优先级排序', desc: '智能排序处理优先级' },
        { name: '可行性评估', desc: '评估需求实现可行性' }
      ]
    },
    {
      id: 'generation',
      title: 'AI项目生成Agent',
      icon: Cpu,
      color: 'from-purple-500 to-purple-600',
      textColor: 'text-purple-600',
      bgColor: 'bg-purple-50',
      components: [
        { name: '方案设计', desc: '自动生成解决方案' },
        { name: '资源配置', desc: '智能分配系统资源' },
        { name: '流程规划', desc: '制定详细执行流程' },
        { name: '质量控制', desc: '确保方案质量标准' }
      ]
    },
    {
      id: 'tuning',
      title: 'AI研发微调Agent',
      icon: Zap,
      color: 'from-orange-500 to-orange-600',
      textColor: 'text-orange-600',
      bgColor: 'bg-orange-50',
      components: [
        { name: '模型优化', desc: '持续优化AI模型' },
        { name: '参数调整', desc: '精细化参数调优' },
        { name: '性能监控', desc: '实时监控系统性能' },
        { name: '自动迭代', desc: '自动化模型迭代' }
      ]
    }
  ];

  const medicalScenarios = [
    { name: '临床诊疗', icon: '🏥', desc: '智能诊断与治疗建议' },
    { name: '血管介入', icon: '🫀', desc: '血管介入智能指导' },
    { name: '慢病管理', icon: '📊', desc: '慢性病智能管理' },
    { name: '康复训练', icon: '🏃', desc: '个性化康复方案' },
    { name: '影像分析', icon: '🔬', desc: '医学影像智能分析' },
    { name: '健康监测', icon: '📱', desc: '实时健康状态监测' }
  ];

  return (
    <section id="architecture" 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">
            <Network className="inline-block w-12 h-12 mr-4 text-blue-600" />
            AI辅助医疗系统架构
          </h2>
          <p className="text-xl text-gray-600">完整的技术架构，支撑智能医疗生态系统</p>
        </motion.div>

        <motion.div
          className="medical-card p-8"
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          {/* 架构层级展示 */}
          <div className="space-y-8">
            {architectureLayers.map((layer, index) => (
              <React.Fragment key={layer.id}>
                <motion.div
                  className="relative"
                  initial={{ opacity: 0, x: -50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.2 }}
                >
                  {/* 层级标题 */}
                  <div className={`bg-gradient-to-r ${layer.color} text-white p-6 rounded-xl mb-4`}>
                    <div className="flex items-center justify-center">
                      <layer.icon className="w-8 h-8 mr-4" />
                      <h3 className="text-2xl font-bold">{layer.title}</h3>
                    </div>
                  </div>

                  {/* 组件展示 */}
                  <div className={`${layer.bgColor} p-6 rounded-xl`}>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                      {layer.components.map((component, componentIndex) => (
                        <motion.div
                          key={componentIndex}
                          className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-current"
                          style={{ borderColor: layer.color.split(' ')[1].replace('to-', '') }}
                          initial={{ opacity: 0, y: 20 }}
                          whileInView={{ opacity: 1, y: 0 }}
                          viewport={{ once: true }}
                          transition={{ delay: index * 0.2 + componentIndex * 0.1 }}
                          whileHover={{ scale: 1.02, transition: { duration: 0.2 } }}
                        >
                          <h4 className={`font-semibold ${layer.textColor} mb-2`}>
                            {component.name}
                          </h4>
                          <p className="text-gray-600 text-sm">{component.desc}</p>
                        </motion.div>
                      ))}
                    </div>
                  </div>
                </motion.div>

                {/* 连接箭头 */}
                {index < architectureLayers.length - 1 && (
                  <motion.div
                    className="flex justify-center"
                    initial={{ opacity: 0, scale: 0 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.2 + 0.3 }}
                  >
                    <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                      <ArrowDown className="w-6 h-6 text-blue-500" />
                    </div>
                  </motion.div>
                )}
              </React.Fragment>
            ))}
          </div>

          {/* 医疗场景分类 */}
          <motion.div
            className="mt-16"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5 }}
          >
            <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl">
              <h3 className="text-2xl font-bold mb-6 text-center flex items-center justify-center">
                <Database className="w-6 h-6 mr-3" />
                医疗场景分类
              </h3>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {medicalScenarios.map((scenario, index) => (
                  <motion.div
                    key={index}
                    className="bg-white/20 backdrop-blur-sm p-4 rounded-lg text-center"
                    initial={{ opacity: 0, scale: 0.8 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.1 }}
                    whileHover={{ scale: 1.05, backgroundColor: 'rgba(255,255,255,0.3)' }}
                  >
                    <div className="text-3xl mb-2">{scenario.icon}</div>
                    <h4 className="font-semibold mb-1">{scenario.name}</h4>
                    <p className="text-sm opacity-90">{scenario.desc}</p>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>

          {/* 技术特点 */}
          <motion.div
            className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.7 }}
          >
            <div className="text-center p-6 bg-blue-50 rounded-xl">
              <div className="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <Network className="w-8 h-8 text-white" />
              </div>
              <h4 className="font-semibold text-blue-800 mb-2">模块化设计</h4>
              <p className="text-blue-600 text-sm">各层级独立部署，灵活扩展</p>
            </div>
            
            <div className="text-center p-6 bg-green-50 rounded-xl">
              <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <Bot className="w-8 h-8 text-white" />
              </div>
              <h4 className="font-semibold text-green-800 mb-2">AI原生架构</h4>
              <p className="text-green-600 text-sm">深度集成大模型能力</p>
            </div>
            
            <div className="text-center p-6 bg-purple-50 rounded-xl">
              <div className="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <Shield className="w-8 h-8 text-white" />
              </div>
              <h4 className="font-semibold text-purple-800 mb-2">安全可靠</h4>
              <p className="text-purple-600 text-sm">医疗级安全标准</p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default Architecture;

