timeline

// Development Timeline Section
const DevelopmentTimeline = () => {
  const milestones = [
    { year: '2008', items: ['黑盒测试', '系统功能验证'], dotY: 200 },
    { year: '2016', items: ['自动化测试工厂', '测试赋能'], dotY: 150 },
    { year: '2018', items: ['测试能力量化', 'C2C测试'], dotY: 110 },
    { year: '2020', items: ['覆盖测试', '失效测试', '虚拟自动化'], dotY: 75 },
    { year: '2025', items: ['AI测试应用', '更快化验证', '测试工具链'], dotY: 45 }
  ];

  // 计算每个里程碑的X位置
  const xPositions = [100, 300, 500, 700, 900];

  return (
    <div className="bg-gradient-to-b from-white via-purple-50/20 to-white py-24 border-b border-gray-100">
      <div className="max-w-[1200px] mx-auto px-8">
        <h2 className="text-4xl font-bold text-gray-900 mb-16 text-center tracking-tight">发展路标</h2>
        
        <div className="relative" style={{ height: '320px' }}>
          {/* SVG 曲线在底层 */}
          <svg className="absolute inset-0 w-full h-full" style={{ zIndex: 0 }}>
            <defs>
              <linearGradient id="lineGradient" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#06b6d4" stopOpacity="0.8" />
                <stop offset="25%" stopColor="#3b82f6" stopOpacity="0.9" />
                <stop offset="50%" stopColor="#6366f1" stopOpacity="0.95" />
                <stop offset="75%" stopColor="#8b5cf6" stopOpacity="0.9" />
                <stop offset="100%" stopColor="#a855f7" stopOpacity="0.8" />
              </linearGradient>
              <filter id="glow">
                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>
            {/* 连接所有节点的平滑曲线 */}
            <path
              d="M 100 200 Q 200 175 300 150 T 500 110 T 700 75 T 900 45"
              stroke="url(#lineGradient)"
              strokeWidth="3"
              fill="none"
              filter="url(#glow)"
              strokeLinecap="round"
            />
          </svg>

          {/* Milestones 内容层 */}
          <div className="relative h-full" style={{ zIndex: 1 }}>
            {milestones.map((milestone, index) => (
              <div 
                key={index}
                className="absolute"
                style={{ 
                  left: `${xPositions[index]}px`,
                  top: `${milestone.dotY}px`,
                  transform: 'translate(-50%, -50%)'
                }}
              >
                {/* 节点 */}
                <div className="relative flex flex-col items-center">
                  {/* 内容在节点上方 */}
                  <div className="absolute bottom-full mb-8 flex flex-col items-center" style={{ width: '160px' }}>
                    <div className="text-center space-y-1 mb-3">
                      {milestone.items.map((item, idx) => (
                        <div key={idx} className="text-xs text-gray-600 font-medium whitespace-nowrap">
                          • {item}
                        </div>
                      ))}
                    </div>
                    
                    {/* Year */}
                    <div className="relative mb-2">
                      <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-25"></div>
                      <div className="relative text-2xl font-bold text-gray-900 tracking-tight px-3 py-0.5 bg-white/80 rounded-lg">
                        {milestone.year}
                      </div>
                    </div>
                  </div>
                  
                  {/* 节点圆点 */}
                  <div className="relative">
                    <div className="w-5 h-5 bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-500 rounded-full shadow-xl shadow-blue-500/60 relative z-10 ring-4 ring-white">
                    </div>
                    <div className="absolute inset-0 w-5 h-5 bg-cyan-400 rounded-full animate-ping opacity-30"></div>
                    <div className="absolute inset-1 w-3 h-3 left-1 top-1 bg-white rounded-full opacity-50"></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};