import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const CaseSection = ({ isActive }) => {
  const [selectedCase, setSelectedCase] = useState(0);

  const cases = [
    {
      id: 1,
      title: '智能金融风控系统',
      client: '某大型银行',
      category: '金融科技',
      description: '基于机器学习的实时风险评估系统，将欺诈检测准确率提升至99.8%',
      results: ['风险识别提升85%', '处理速度提高300%', '年节省成本2000万'],
      image: '🏦',
      technologies: ['深度学习', '实时计算', '大数据分析']
    },
    {
      id: 2,
      title: '智能医疗诊断助手',
      client: '顶级三甲医院',
      category: '医疗健康',
      description: 'AI辅助医生进行疾病诊断，显著提高诊断效率和准确性',
      results: ['诊断准确率提升20%', '诊疗时间缩短40%', '患者满意度95%'],
      image: '🏥',
      technologies: ['计算机视觉', '自然语言处理', '知识图谱']
    },
    {
      id: 3,
      title: '智能制造优化平台',
      client: '制造业龙头企业',
      category: '工业4.0',
      description: '通过AI优化生产流程，实现智能化生产管理和质量控制',
      results: ['生产效率提升45%', '次品率降低90%', 'ROI达到280%'],
      image: '🏭',
      technologies: ['预测性维护', 'IoT集成', '优化算法']
    }
  ];

  return (
    <div className="case-section">
      <motion.div
        className="case-header"
        initial={{ opacity: 0, y: 50 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8, delay: 0.2 }}
      >
        <h2>成功案例</h2>
        <p>见证AI技术如何转化为实际商业价值</p>
      </motion.div>

      <div className="case-container">
        <motion.div
          className="case-navigation"
          initial={{ opacity: 0, x: -50 }}
          animate={isActive ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.4 }}
        >
          {cases.map((caseItem, index) => (
            <motion.div
              key={caseItem.id}
              className={`case-nav-item ${index === selectedCase ? 'active' : ''}`}
              onClick={() => setSelectedCase(index)}
              whileHover={{ scale: 1.02, x: 10 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="nav-icon">{caseItem.image}</div>
              <div className="nav-content">
                <h4>{caseItem.title}</h4>
                <span className="nav-category">{caseItem.category}</span>
              </div>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          className="case-details"
          initial={{ opacity: 0, x: 50 }}
          animate={isActive ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          <AnimatePresence mode="wait">
            <motion.div
              key={selectedCase}
              className="case-content"
              initial={{ opacity: 0, y: 30, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -30, scale: 1.05 }}
              transition={{ duration: 0.5 }}
            >
              <div className="case-meta">
                <span className="case-category">{cases[selectedCase].category}</span>
                <span className="case-client">{cases[selectedCase].client}</span>
              </div>
              
              <h3 className="case-title">{cases[selectedCase].title}</h3>
              <p className="case-description">{cases[selectedCase].description}</p>
              
              <div className="case-technologies">
                <h4>核心技术</h4>
                <div className="tech-tags">
                  {cases[selectedCase].technologies.map((tech, idx) => (
                    <span key={idx} className="tech-tag">{tech}</span>
                  ))}
                </div>
              </div>
              
              <div className="case-results">
                <h4>项目成果</h4>
                <div className="results-grid">
                  {cases[selectedCase].results.map((result, idx) => (
                    <motion.div
                      key={idx}
                      className="result-item"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: idx * 0.1 }}
                    >
                      ✓ {result}
                    </motion.div>
                  ))}
                </div>
              </div>
              
              <motion.button
                className="case-cta"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                查看详细案例
              </motion.button>
            </motion.div>
          </AnimatePresence>
        </motion.div>
      </div>
    </div>
  );
};

export default CaseSection;
