import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Brain, Zap, Heart, Eye, Shield, Clock, AlertTriangle, Smartphone, TrendingUp, Activity } from 'lucide-react';

const VascularScenarios = () => {
  const [activeScenario, setActiveScenario] = useState(0);

  const scenarios = [
    {
      id: 0,
      title: '智能诊断',
      subtitle: 'AI智能诊断系统',
      description: 'AI系统通过深度学习算法分析医学影像、病历数据和生理指标，提供精准的疾病诊断建议，辅助医生快速准确地识别病情，提高诊断效率和准确性。',
      icon: Brain,
      gradient: 'scenario-gradient-1',
      features: [
        { title: '多模态数据融合', desc: '整合影像、病历、检验等多源数据' },
        { title: '智能病变识别', desc: '自动识别异常区域和病理特征' },
        { title: '诊断建议生成', desc: '基于AI算法提供诊断建议' },
        { title: '风险评估分析', desc: '评估疾病进展和治疗风险' },
        { title: '个性化诊疗方案', desc: '根据患者特征制定治疗计划' }
      ],
      benefits: [
        { icon: Eye, title: '诊断精度提升', desc: 'AI辅助诊断准确率显著提高，减少误诊漏诊', tags: ['准确率95%+', '误诊率降低60%'] },
        { icon: Clock, title: '效率大幅提升', desc: '诊断时间大幅缩短，提高医生工作效率', tags: ['时间节省50%', '效率提升3倍'] },
        { icon: Shield, title: '标准化诊疗', desc: '统一诊断标准，减少主观差异', tags: ['标准统一', '质量保证'] },
        { icon: Brain, title: '知识库支持', desc: '海量医学知识库提供决策支持', tags: ['知识丰富', '持续学习'] }
      ]
    },
    {
      id: 1,
      title: 'AI智能化增强',
      subtitle: 'AI智能化增强平台',
      description: '通过AI技术全面增强医疗服务能力，包括智能决策支持、自动化流程优化、预测性分析等，让医疗服务更加智能化、精准化和个性化。',
      icon: Zap,
      gradient: 'scenario-gradient-2',
      features: [
        { title: '智能决策支持', desc: '实时提供基于证据的决策建议' },
        { title: '流程自动化', desc: '自动化医疗流程，减少人工操作' },
        { title: '预测性分析', desc: '预测疾病发展趋势和治疗效果' },
        { title: '个性化推荐', desc: '基于患者特征推荐最佳方案' },
        { title: '质量监控', desc: '实时监控医疗质量和安全指标' }
      ],
      benefits: [
        { icon: TrendingUp, title: '服务能力提升', desc: 'AI技术全面提升医疗服务水平和效率', tags: ['服务质量+40%', '效率提升50%'] },
        { icon: Zap, title: '智能化程度', desc: '医疗流程高度智能化，减少人为错误', tags: ['自动化80%', '错误率降低70%'] },
        { icon: Brain, title: '决策支持', desc: '智能决策系统提供精准医疗建议', tags: ['决策准确', '循证医学'] },
        { icon: Activity, title: '实时优化', desc: '系统持续学习优化，不断提升性能', tags: ['持续改进', '自我优化'] }
      ]
    },
    {
      id: 2,
      title: '健康管理',
      subtitle: 'AI健康管理系统',
      description: 'AI驱动的全生命周期健康管理平台，通过持续监测、智能分析和个性化干预，为用户提供主动式健康管理服务，预防疾病发生，提升生活质量。',
      icon: Heart,
      gradient: 'scenario-gradient-3',
      features: [
        { title: '健康状态监测', desc: '24小时连续监测各项健康指标' },
        { title: '风险预警系统', desc: '智能识别健康风险并及时预警' },
        { title: '个性化干预', desc: '制定个性化健康管理方案' },
        { title: '生活方式指导', desc: '提供科学的生活方式建议' },
        { title: '健康数据分析', desc: '深度分析健康趋势和变化' }
      ],
      benefits: [
        { icon: Heart, title: '预防为主', desc: '主动健康管理，预防疾病发生', tags: ['预防优先', '早期发现'] },
        { icon: Smartphone, title: '便捷监测', desc: '智能设备实现便捷的健康监测', tags: ['实时监测', '无感采集'] },
        { icon: AlertTriangle, title: '风险预警', desc: '智能预警系统及时发现健康风险', tags: ['早期预警', '及时干预'] },
        { icon: TrendingUp, title: '生活质量提升', desc: '科学管理提升整体生活质量', tags: ['质量提升', '健康长寿'] }
      ]
    }
  ];

  const currentScenario = scenarios[activeScenario];

  return (
    <section id="scenarios" className="section-padding bg-gray-900">
      <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">
            AI医疗应用场景
          </h2>
          <p className="text-xl text-gray-300">三大核心应用场景，全面覆盖医疗服务</p>
        </motion.div>

        {/* 场景选择器 */}
        <div className="flex flex-wrap justify-center gap-4 mb-12">
          {scenarios.map((scenario, index) => (
            <motion.button
              key={scenario.id}
              onClick={() => setActiveScenario(index)}
              className={`flex items-center space-x-3 px-6 py-3 rounded-full transition-all duration-300 ${
                activeScenario === index
                  ? 'bg-white text-gray-900 shadow-lg'
                  : 'bg-white/10 text-white hover:bg-white/20'
              }`}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <scenario.icon className="w-5 h-5" />
              <span className="font-medium">{scenario.title}</span>
            </motion.button>
          ))}
        </div>

        {/* 场景内容 */}
        <AnimatePresence mode="wait">
          <motion.div
            key={activeScenario}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -50 }}
            transition={{ duration: 0.5 }}
            className={`${currentScenario.gradient} rounded-3xl p-2`}
          >
            <div className="bg-white/95 backdrop-blur-sm rounded-2xl p-8">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                {/* 左侧：应用描述 */}
                <div>
                  <div className={`${currentScenario.gradient} text-white p-6 rounded-xl mb-6 text-center`}>
                    <currentScenario.icon className="w-8 h-8 mx-auto mb-3" />
                    <h3 className="text-2xl font-bold mb-2">{currentScenario.subtitle}</h3>
                    {currentScenario.id === 1 && (
                      <div className="inline-flex items-center bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium pulse-animation">
                        <div className="w-2 h-2 bg-white rounded-full mr-2"></div>
                        智能增强中
                      </div>
                    )}
                    {currentScenario.id === 2 && (
                      <div className="inline-flex items-center bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium heartbeat-animation">
                        <Heart className="w-4 h-4 mr-2" />
                        24/7 健康守护
                      </div>
                    )}
                  </div>

                  <p className="text-gray-700 leading-relaxed mb-6 text-lg">
                    {currentScenario.description}
                  </p>

                  <h4 className="font-bold text-gray-800 mb-4 flex items-center text-lg">
                    <currentScenario.icon className="w-5 h-5 text-blue-500 mr-2" />
                    核心功能
                  </h4>

                  <div className="space-y-3">
                    {currentScenario.features.map((feature, index) => (
                      <motion.div
                        key={index}
                        className="bg-gray-50 border-l-4 border-blue-500 p-3 rounded-lg"
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: index * 0.1 }}
                        whileHover={{ x: 5 }}
                      >
                        <strong className="text-gray-800">{feature.title}：</strong>
                        <span className="text-gray-600">{feature.desc}</span>
                      </motion.div>
                    ))}
                  </div>
                </div>

                {/* 右侧：AI赋能细节 */}
                <div>
                  <div className={`${currentScenario.gradient} text-white p-6 rounded-xl mb-6 text-center`}>
                    <h3 className="text-2xl font-bold">AI技术优势</h3>
                  </div>

                  <div className="space-y-6">
                    {currentScenario.benefits.map((benefit, index) => (
                      <motion.div
                        key={index}
                        className="bg-blue-50 p-4 rounded-xl"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: index * 0.15 }}
                        whileHover={{ scale: 1.02 }}
                      >
                        <h5 className="font-semibold text-blue-800 mb-2 flex items-center">
                          <benefit.icon className="w-5 h-5 mr-2" />
                          {benefit.title}
                        </h5>
                        <p className="text-blue-700 text-sm mb-3">{benefit.desc}</p>
                        <div className="flex flex-wrap gap-2">
                          {benefit.tags.map((tag, tagIndex) => (
                            <span
                              key={tagIndex}
                              className="bg-blue-200 text-blue-800 px-2 py-1 rounded-full text-xs font-medium"
                            >
                              {tag}
                            </span>
                          ))}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
    </section>
  );
};

export default VascularScenarios;

