import React, { useState } from 'react'

interface ProductsSectionProps {
  language?: 'zh' | 'en'
}

export const ProductsSection: React.FC<ProductsSectionProps> = ({ language = 'zh' }) => {
  const [activeTab, setActiveTab] = useState(0)

  const content = {
    zh: {
      title: '我们的产品与服务',
      subtitle: '全面覆盖企业AI转型的各个阶段',
      tabs: ['AI平台', '数据分析', '自动化流程', '智能客服'],
      products: [
        {
          title: 'TuringFlow AI平台',
          description: '企业级AI开发与部署平台，支持多模态AI模型训练、推理和监控',
          features: [
            '支持主流深度学习框架',
            '可视化模型训练界面',
            '自动化模型调优',
            '实时性能监控',
          ],
          cta: '了解详情',
        },
        {
          title: '智能数据分析套件',
          description: '一站式数据分析解决方案，从数据采集到智能洞察的全流程覆盖',
          features: [
            '实时数据流处理',
            '智能异常检测',
            '预测性分析',
            '可视化报表',
          ],
          cta: '查看案例',
        },
        {
          title: '流程自动化引擎',
          description: '基于RPA和AI的流程自动化平台，实现业务流程的智能化改造',
          features: [
            '无代码流程设计',
            '智能文档处理',
            '跨系统集成',
            '流程监控与优化',
          ],
          cta: '免费试用',
        },
        {
          title: '智能客服解决方案',
          description: '融合NLP和知识图谱的智能客服系统，提升客户服务效率和质量',
          features: [
            '多轮对话理解',
            '情感分析',
            '知识库管理',
            '人工客服协同',
          ],
          cta: '预约演示',
        },
      ],
    },
    en: {
      title: 'Our Products & Services',
      subtitle: 'Comprehensive coverage of all stages of enterprise AI transformation',
      tabs: ['AI Platform', 'Data Analytics', 'Automation', 'Intelligent Support'],
      products: [
        {
          title: 'TuringFlow AI Platform',
          description: 'Enterprise-grade AI development and deployment platform supporting multimodal AI model training, inference, and monitoring',
          features: [
            'Support for mainstream deep learning frameworks',
            'Visual model training interface',
            'Automated model tuning',
            'Real-time performance monitoring',
          ],
          cta: 'Learn More',
        },
        {
          title: 'Intelligent Analytics Suite',
          description: 'End-to-end data analytics solution covering the entire process from data collection to intelligent insights',
          features: [
            'Real-time data stream processing',
            'Intelligent anomaly detection',
            'Predictive analytics',
            'Visual reporting',
          ],
          cta: 'View Cases',
        },
        {
          title: 'Process Automation Engine',
          description: 'RPA and AI-based process automation platform for intelligent business process transformation',
          features: [
            'No-code process design',
            'Intelligent document processing',
            'Cross-system integration',
            'Process monitoring and optimization',
          ],
          cta: 'Free Trial',
        },
        {
          title: 'Intelligent Support Solution',
          description: 'NLP and knowledge graph integrated intelligent customer service system to enhance service efficiency and quality',
          features: [
            'Multi-turn conversation understanding',
            'Sentiment analysis',
            'Knowledge base management',
            'Human agent collaboration',
          ],
          cta: 'Book Demo',
        },
      ],
    },
  }

  const t = content[language]

  return (
    <section id="products" className="py-16 md:py-24 bg-gradient-to-b from-white to-brand-light">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-brand-dark mb-4">{t.title}</h2>
          <p className="text-xl text-gray-600">{t.subtitle}</p>
        </div>

        {/* Tabs */}
        <div className="flex flex-wrap justify-center gap-2 mb-12">
          {t.tabs.map((tab, index) => (
            <button
              key={index}
              onClick={() => setActiveTab(index)}
              className={`px-6 py-3 rounded-lg font-medium transition-all duration-300 ${activeTab === index ? 'bg-gradient-to-r from-brand-primary to-brand-secondary text-white shadow-lg' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'}`}
              aria-label={`切换到${tab}`}
              aria-selected={activeTab === index}
            >
              {tab}
            </button>
          ))}
        </div>

        {/* Active Product */}
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden animate-fade-in">
          <div className="grid grid-cols-1 lg:grid-cols-2">
            {/* Left Side - Content */}
            <div className="p-8 md:p-12 lg:p-16">
              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-brand-primary/10 to-brand-secondary/10 text-brand-primary px-4 py-2 rounded-full mb-6">
                <span className="w-2 h-2 bg-brand-primary rounded-full"></span>
                <span className="text-sm font-medium">旗舰产品</span>
              </div>

              <h3 className="text-2xl md:text-3xl font-bold text-brand-dark mb-4">
                {t.products[activeTab].title}
              </h3>

              <p className="text-gray-600 mb-8 text-lg">
                {t.products[activeTab].description}
              </p>

              <ul className="space-y-3 mb-8">
                {t.products[activeTab].features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <svg className="w-5 h-5 text-brand-primary mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span className="text-gray-700">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="flex flex-wrap gap-4">
                <a
                  href="#contact"
                  className="px-8 py-3 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-300 hover:scale-105 inline-flex items-center gap-2"
                  aria-label={t.products[activeTab].cta}
                >
                  <span>{t.products[activeTab].cta}</span>
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </a>
                <a
                  href="#demo"
                  className="px-8 py-3 bg-white border-2 border-gray-200 text-gray-700 font-semibold rounded-lg hover:border-brand-primary hover:text-brand-primary transition-all duration-300 inline-flex items-center gap-2"
                  aria-label="查看技术文档"
                >
                  技术文档
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                  </svg>
                </a>
              </div>
            </div>

            {/* Right Side - Visual */}
            <div className="bg-gradient-to-br from-brand-primary/5 to-brand-secondary/5 p-8 md:p-12 lg:p-16 flex items-center justify-center">
              <div className="relative w-full max-w-md">
                {/* Decorative Circles */}
                <div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-r from-brand-primary/20 to-brand-secondary/20 rounded-full blur-xl"></div>
                <div className="absolute bottom-0 right-0 w-40 h-40 bg-gradient-to-l from-brand-accent/20 to-brand-primary/20 rounded-full blur-xl"></div>

                {/* Product Visualization */}
                <div className="relative bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-lg flex items-center justify-center">
                      <span className="text-white font-bold">TF</span>
                    </div>
                    <div>
                      <h4 className="font-bold text-brand-dark">实时监控面板</h4>
                      <p className="text-sm text-gray-500">性能指标可视化</p>
                    </div>
                  </div>

                  {/* Stats Grid */}
                  <div className="grid grid-cols-2 gap-4 mb-6">
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-2xl font-bold text-brand-primary mb-1">99.9%</div>
                      <div className="text-sm text-gray-600">可用性</div>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-2xl font-bold text-brand-secondary mb-1">50ms</div>
                      <div className="text-sm text-gray-600">响应时间</div>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-2xl font-bold text-brand-accent mb-1">1M+</div>
                      <div className="text-sm text-gray-600">请求/秒</div>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-2xl font-bold text-brand-primary mb-1">24/7</div>
                      <div className="text-sm text-gray-600">监控</div>
                    </div>
                  </div>

                  {/* Performance Chart */}
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="flex justify-between items-center mb-3">
                      <span className="text-sm font-medium text-gray-700">性能趋势</span>
                      <span className="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">+12%</span>
                    </div>
                    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-gradient-to-r from-brand-primary to-brand-secondary w-3/4"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* All Products Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
          {t.products.map((product, index) => (
            <div
              key={index}
              className={`bg-white border rounded-xl p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer ${activeTab === index ? 'border-brand-primary' : 'border-gray-200'}`}
              onClick={() => setActiveTab(index)}
              aria-label={`查看${product.title}`}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => e.key === 'Enter' && setActiveTab(index)}
            >
              <div className="w-12 h-12 bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 rounded-lg flex items-center justify-center mb-4">
                <span className="text-brand-primary font-bold">{index + 1}</span>
              </div>
              <h4 className="font-bold text-brand-dark mb-2">{product.title}</h4>
              <p className="text-sm text-gray-600 line-clamp-2">{product.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}