again

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

  // 计算每个里程碑的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-20 text-center tracking-tight">发展路标</h2>
        
        <div className="relative" style={{ height: '280px' }}>
          {/* 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 180 Q 200 145 300 110 Q 400 90 500 130 Q 600 100 700 70 Q 800 60 900 90"
              stroke="url(#lineGradient)"
              strokeWidth="3.5"
              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="relative mb-4">
                    <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>
                  
                  {/* Year - 在节点下方 */}
                  <div className="relative mb-3">
                    <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">
                      {milestone.year}
                    </div>
                  </div>
                  
                  {/* 内容在节点下方 */}
                  <div className="text-center space-y-1" style={{ width: '150px' }}>
                    {milestone.items.map((item, idx) => (
                      <div key={idx} className="text-xs text-gray-600 font-medium leading-relaxed">
                        • {item}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};