import React from 'react';
import { motion } from 'framer-motion';
import { Database, Heart, Activity, Star, Brain, RefreshCw, Shield, Rocket } from 'lucide-react';

const ProductMatrix = () => {
  const products = [
    {
      icon: Database,
      title: 'AI智能数据库与随访系统',
      description: '基于大模型的智能数据管理平台，实现患者全生命周期的智能化随访管理',
      features: ['智能录入', '自动随访', '数据分析'],
      gradient: 'from-blue-500 to-purple-600',
      bgColor: 'bg-blue-50'
    },
    {
      icon: Heart,
      title: 'AI血管介入知识库智能体平台',
      description: '专业的血管介入医疗知识库，提供智能诊疗建议和手术指导',
      features: ['知识图谱', '智能问答', '手术指导'],
      gradient: 'from-pink-500 to-red-600',
      bgColor: 'bg-pink-50'
    },
    {
      icon: Activity,
      title: 'AI可穿戴彩超硬件+辅助医疗系统',
      description: '创新的可穿戴医疗设备，结合AI算法提供实时健康监测',
      features: ['实时监测', 'AI分析', '预警提醒'],
      gradient: 'from-cyan-500 to-blue-600',
      bgColor: 'bg-cyan-50'
    }
  ];

  const coreFeatures = [
    { icon: Brain, title: 'AI原生架构', description: '从底层设计融入AI能力', color: 'text-blue-500' },
    { icon: RefreshCw, title: '全流程覆盖', description: '诊疗全环节智能化', color: 'text-green-500' },
    { icon: Shield, title: '安全可靠', description: '医疗级安全标准', color: 'text-purple-500' },
    { icon: Rocket, title: '持续创新', description: '技术不断迭代升级', color: 'text-red-500' }
  ];

  return (
    <section id="products" 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">
            <Database className="inline-block w-12 h-12 mr-4 text-blue-600" />
            核心产品矩阵
          </h2>
        </motion.div>

        {/* 产品卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          {products.map((product, index) => (
            <motion.div
              key={index}
              className="medical-card p-6 h-full flex flex-col"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.2 }}
              whileHover={{ y: -10, transition: { duration: 0.3 } }}
            >
              <div className="flex-1">
                <div className={`w-16 h-16 bg-gradient-to-r ${product.gradient} rounded-full flex items-center justify-center text-white mb-4`}>
                  <product.icon className="w-8 h-8" />
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-3 leading-tight">
                  {product.title}
                </h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  {product.description}
                </p>
              </div>
              <div className="mt-4">
                <div className="flex flex-wrap gap-2">
                  {product.features.map((feature, featureIndex) => (
                    <motion.span
                      key={featureIndex}
                      className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium"
                      whileHover={{ scale: 1.05 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                    >
                      {feature}
                    </motion.span>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </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 }}
        >
          <h3 className="text-2xl font-bold text-gray-800 mb-8 text-center flex items-center justify-center">
            <Star className="w-6 h-6 text-yellow-500 mr-3" />
            产品核心特色
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {coreFeatures.map((feature, index) => (
              <motion.div
                key={index}
                className="text-center"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <feature.icon className={`w-8 h-8 ${feature.color}`} />
                </div>
                <h4 className="font-semibold text-gray-800 mb-2">{feature.title}</h4>
                <p className="text-gray-600 text-sm">{feature.description}</p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default ProductMatrix;

