InfiniteCloud/components/Cta.tsx

import Link from "next/link";
import { ArrowRight, Play, MessageCircle, Zap } from 'lucide-react';

export default function Cta() {
  return (
    <section className="px-6 py-20 bg-gradient-to-r from-accent via-blue-600 to-purple-600 text-white relative overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0 bg-black/10"></div>
      <div className="absolute top-0 left-0 w-full h-full">
        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full"></div>
        <div className="absolute top-32 right-20 w-16 h-16 bg-white/5 rounded-full"></div>
        <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-white/10 rounded-full"></div>
        <div className="absolute bottom-10 right-10 w-24 h-24 bg-white/5 rounded-full"></div>
      </div>
      
      <div className="relative max-w-screen-xl mx-auto text-center">
        <div className="mb-8">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            准备好加速您的
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-300">
              云服务了吗？
            </span>
          </h2>
          <p className="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
            立即开始免费试用，体验全球领先的云加速服务。
            无需信用卡，15 天免费试用，专业技术支持。
          </p>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
          <a
            href="/contact"
            className="group bg-white text-accent px-8 py-4 rounded-xl font-semibold text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center"
          >
            立即免费试用
            <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </a>
          
          <a
            href="/pricing"
            className="group border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white hover:text-accent transition-all duration-300 flex items-center"
          >
            查看定价方案
            <Play className="ml-2 w-5 h-5 group-hover:scale-110 transition-transform" />
          </a>
        </div>

        {/* 特色亮点 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
          <div className="flex flex-col items-center text-center">
            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
              <Zap className="w-8 h-8 text-yellow-300" />
            </div>
            <h3 className="text-lg font-semibold mb-2">15 天免费试用</h3>
            <p className="text-blue-100 text-sm">无需信用卡，立即开始体验</p>
          </div>
          
          <div className="flex flex-col items-center text-center">
            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
              <MessageCircle className="w-8 h-8 text-green-300" />
            </div>
            <h3 className="text-lg font-semibold mb-2">专业技术支持</h3>
            <p className="text-blue-100 text-sm">7×24 小时专家团队支持</p>
          </div>
          
          <div className="flex flex-col items-center text-center">
            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
              <ArrowRight className="w-8 h-8 text-purple-300" />
            </div>
            <h3 className="text-lg font-semibold mb-2">快速部署</h3>
            <p className="text-blue-100 text-sm">5 分钟内完成配置部署</p>
          </div>
        </div>

        {/* 信任指标 */}
        <div className="mt-16 pt-8 border-t border-white/20">
          <p className="text-blue-200 text-sm mb-4">已有超过 10,000+ 企业选择我们</p>
          <div className="flex flex-wrap justify-center items-center gap-8 opacity-80">
            <div className="text-2xl font-bold">99.9%</div>
            <div className="text-gray-300">•</div>
            <div className="text-2xl font-bold">50+</div>
            <div className="text-gray-300">•</div>
            <div className="text-2xl font-bold">24/7</div>
            <div className="text-gray-300">•</div>
            <div className="text-2xl font-bold">15天</div>
          </div>
          <p className="text-blue-200 text-xs mt-2">
            可用性保障 • 全球节点 • 技术支持 • 免费试用
          </p>
        </div>
      </div>
    </section>
  );
}