import { useState } from 'react';
import { ArrowRight, TrendingUp, Users, Clock, CheckCircle, Star } from 'lucide-react';

type Case = { 
  id: string; 
  name: string; 
  company: string;
  industry: string;
  image: string; 
  description: string;
  challenge: string;
  solution: string;
  results: {
    metric: string;
    value: string;
    improvement: string;
  }[];
  testimonial: {
    quote: string;
    author: string;
    position: string;
  };
  tags: string[];
};

export default function CaseList() {
  const [selectedCase, setSelectedCase] = useState<string | null>(null);

  const cases: Case[] = [
    {
      id: '1',
      name: '电商平台全球加速',
      company: '某大型电商平台',
      industry: '电商零售',
      image: '/hero-graphic.png',
      description: '为全球领先的电商平台提供CDN加速服务，显著提升用户体验和转化率。',
      challenge: '该电商平台面临全球用户访问速度慢、页面加载时间长的问题，特别是在海外用户访问时，导致用户流失和转化率下降。',
      solution: '部署全球CDN网络，优化图片和静态资源加载，实施智能路由和缓存策略，提供多层次的加速解决方案。',
      results: [
        { metric: '页面加载速度', value: '2.1秒', improvement: '提升 65%' },
        { metric: '全球访问延迟', value: '45ms', improvement: '降低 70%' },
        { metric: '转化率', value: '12.5%', improvement: '提升 28%' },
        { metric: '用户满意度', value: '98%', improvement: '提升 15%' }
      ],
      testimonial: {
        quote: 'Pinnovate Cloud 的加速服务帮助我们显著提升了全球用户的访问体验，转化率提升了近30%，这对我们的业务增长起到了关键作用。',
        author: '张总',
        position: '技术总监'
      },
      tags: ['CDN加速', '全球部署', '性能优化', '电商']
    },
    {
      id: '2',
      name: '在线游戏低延迟优化',
      company: '知名游戏公司',
      industry: '在线游戏',
      image: '/hero-graphic.png',
      description: '为多人在线游戏提供全球低延迟网络优化，确保玩家获得流畅的游戏体验。',
      challenge: '游戏公司需要为全球玩家提供低延迟、高稳定的网络连接，确保实时对战和多人协作的流畅性。',
      solution: '部署专用游戏加速节点，优化网络路由，实施智能负载均衡，提供专线级别的网络质量保障。',
      results: [
        { metric: '游戏延迟', value: '35ms', improvement: '降低 60%' },
        { metric: '连接稳定性', value: '99.9%', improvement: '提升 25%' },
        { metric: '玩家留存率', value: '85%', improvement: '提升 20%' },
        { metric: '服务器负载', value: '优化', improvement: '降低 40%' }
      ],
      testimonial: {
        quote: '通过 Pinnovate Cloud 的游戏加速服务，我们的玩家在全球范围内都能享受到流畅的游戏体验，玩家满意度大幅提升。',
        author: '李经理',
        position: '运营总监'
      },
      tags: ['游戏加速', '低延迟', '全球节点', '实时优化']
    },
    {
      id: '3',
      name: '金融平台安全加速',
      company: '大型金融机构',
      industry: '金融服务',
      image: '/hero-graphic.png',
      description: '为金融机构提供安全可靠的网络加速服务，确保交易系统的稳定性和安全性。',
      challenge: '金融机构需要处理大量实时交易数据，对网络稳定性和安全性要求极高，同时需要全球用户能够快速访问。',
      solution: '部署企业级安全防护，实施端到端加密，提供高可用性保障，结合智能路由和负载均衡技术。',
      results: [
        { metric: '系统可用性', value: '99.99%', improvement: '提升 0.1%' },
        { metric: '交易响应时间', value: '120ms', improvement: '降低 50%' },
        { metric: '安全事件', value: '0', improvement: '100% 防护' },
        { metric: '用户满意度', value: '99.5%', improvement: '提升 8%' }
      ],
      testimonial: {
        quote: 'Pinnovate Cloud 不仅提供了卓越的性能优化，更重要的是保证了我们金融系统的安全性和稳定性，完全符合我们的合规要求。',
        author: '王总',
        position: 'CTO'
      },
      tags: ['金融安全', '高可用', '合规认证', '实时交易']
    },
    {
      id: '4',
      name: '在线教育平台优化',
      company: '知名教育机构',
      industry: '教育培训',
      image: '/hero-graphic.png',
      description: '为在线教育平台提供视频流媒体加速，确保全球学生能够流畅观看课程内容。',
      challenge: '教育平台需要为全球学生提供高质量的视频流媒体服务，支持大规模并发访问，确保学习体验不受网络影响。',
      solution: '部署视频CDN网络，优化视频编码和传输，实施智能缓存策略，提供多码率自适应服务。',
      results: [
        { metric: '视频加载时间', value: '1.2秒', improvement: '提升 75%' },
        { metric: '缓冲时间', value: '0.5秒', improvement: '降低 80%' },
        { metric: '学生满意度', value: '96%', improvement: '提升 22%' },
        { metric: '并发支持', value: '10万+', improvement: '提升 300%' }
      ],
      testimonial: {
        quote: 'Pinnovate Cloud 的视频加速服务让我们的在线课程在全球范围内都能流畅播放，学生的学习体验得到了显著改善。',
        author: '陈教授',
        position: '技术负责人'
      },
      tags: ['视频加速', '流媒体', '教育', '大规模并发']
    }
  ];

  return (
    <section className="px-6 py-16 bg-gray-50">
      <div className="max-w-screen-xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-primary mb-4">成功案例详情</h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            深入了解我们如何帮助不同行业的客户实现业务目标，提升用户体验和运营效率。
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {cases.map((caseItem, index) => (
            <div 
              key={caseItem.id} 
              className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100"
            >
              {/* 案例头部 */}
              <div className="relative">
                <div className="h-48 bg-gradient-to-br from-accent/10 to-blue-100 flex items-center justify-center">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-3">
                      <TrendingUp className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-lg font-semibold text-primary">{caseItem.company}</h3>
                    <p className="text-sm text-gray-600">{caseItem.industry}</p>
                  </div>
                </div>
                
                {/* 行业标签 */}
                <div className="absolute top-4 left-4">
                  <span className="bg-accent text-white text-xs font-semibold px-3 py-1 rounded-full">
                    {caseItem.industry}
                  </span>
                </div>
              </div>

              {/* 案例内容 */}
              <div className="p-6">
                <h4 className="text-xl font-bold text-primary mb-3 group-hover:text-accent transition-colors">
                  {caseItem.name}
                </h4>
                
                <p className="text-gray-600 mb-4 leading-relaxed">
                  {caseItem.description}
                </p>

                {/* 关键指标 */}
                <div className="grid grid-cols-2 gap-4 mb-6">
                  {caseItem.results.slice(0, 2).map((result, idx) => (
                    <div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
                      <div className="text-lg font-bold text-accent">{result.value}</div>
                      <div className="text-xs text-gray-600 mb-1">{result.metric}</div>
                      <div className="text-xs text-green-600 font-medium">{result.improvement}</div>
                    </div>
                  ))}
                </div>

                {/* 标签 */}
                <div className="flex flex-wrap gap-2 mb-4">
                  {caseItem.tags.slice(0, 3).map((tag, idx) => (
                    <span key={idx} className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
                      {tag}
                    </span>
                  ))}
                </div>

                {/* 客户证言 */}
                <div className="bg-blue-50 rounded-lg p-4 mb-4">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
                      <Star className="w-4 h-4 text-white" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-700 italic mb-2 line-clamp-2">
                        "{caseItem.testimonial.quote}"
                      </p>
                      <div className="text-xs text-gray-600">
                        <div className="font-semibold">{caseItem.testimonial.author}</div>
                        <div>{caseItem.testimonial.position}</div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* 查看详情按钮 */}
                <button
                  onClick={() => setSelectedCase(selectedCase === caseItem.id ? null : caseItem.id)}
                  className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-accent text-white rounded-xl hover:bg-blue-700 transition-colors font-medium"
                >
                  {selectedCase === caseItem.id ? '收起详情' : '查看详情'}
                  <ArrowRight className={`w-4 h-4 transition-transform ${selectedCase === caseItem.id ? 'rotate-90' : ''}`} />
                </button>
              </div>

              {/* 展开的详细信息 */}
              {selectedCase === caseItem.id && (
                <div className="px-6 pb-6 border-t border-gray-100">
                  <div className="pt-6 space-y-6">
                    {/* 挑战与解决方案 */}
                    <div>
                      <h5 className="font-semibold text-primary mb-2">面临的挑战</h5>
                      <p className="text-sm text-gray-600 leading-relaxed">{caseItem.challenge}</p>
                    </div>
                    
                    <div>
                      <h5 className="font-semibold text-primary mb-2">我们的解决方案</h5>
                      <p className="text-sm text-gray-600 leading-relaxed">{caseItem.solution}</p>
                    </div>

                    {/* 完整结果 */}
                    <div>
                      <h5 className="font-semibold text-primary mb-3">取得的成果</h5>
                      <div className="grid grid-cols-2 gap-3">
                        {caseItem.results.map((result, idx) => (
                          <div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
                            <div className="text-lg font-bold text-accent">{result.value}</div>
                            <div className="text-xs text-gray-600 mb-1">{result.metric}</div>
                            <div className="text-xs text-green-600 font-medium">{result.improvement}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* 联系我们 */}
        <div className="mt-16 text-center">
          <div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-8 text-white">
            <h3 className="text-2xl font-bold mb-4">想要了解您的行业案例？</h3>
            <p className="text-blue-100 mb-6 max-w-2xl mx-auto">
              我们为各行各业提供定制化的云加速解决方案。联系我们的专家团队，了解如何为您的业务量身定制最佳方案。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="/contact"
                className="px-8 py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors"
              >
                立即咨询
              </a>
              <a
                href="/pricing"
                className="px-8 py-3 border-2 border-white text-white rounded-xl font-semibold hover:bg-white hover:text-accent transition-colors"
              >
                查看定价
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}