import Navbar from '../components/Navbar';
import Features from '../components/Features';
import CoreAdvantages from '../components/CoreAdvantages';
import Pricing from '../components/Pricing';
import Cta from '../components/Cta';
import Footer from '../components/Footer';

export default function FeaturesPage() {
  return (
    <div className="pt-16 bg-background">
      <Navbar />
      <main>
        {/* 页面标题部分 */}
        <section className="px-6 py-16 bg-gradient-to-br from-blue-50 to-indigo-100">
          <div className="max-w-screen-xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
              产品与服务
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              我们提供全球领先的云加速服务，通过智能路由和分布式节点网络，
              为您的业务提供稳定、安全、高效的技术解决方案
            </p>
          </div>
        </section>

        {/* 核心特性展示 */}
        <Features />

        {/* 核心优势 */}
        <CoreAdvantages />

        {/* 服务介绍 */}
        <section className="px-6 py-16 bg-gray-50">
          <div className="max-w-screen-xl mx-auto">
            <h2 className="text-3xl font-semibold text-center mb-12">我们的服务</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">全球加速服务</h3>
                <p className="text-gray-600 mb-4">
                  覆盖全球主要地区的节点网络，为您的应用提供低延迟、高可用的访问体验
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 全球 50+ 节点覆盖</li>
                  <li>• 平均延迟 &lt; 50ms</li>
                  <li>• 99.9% 可用性保证</li>
                </ul>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">安全防护服务</h3>
                <p className="text-gray-600 mb-4">
                  企业级安全防护，多层加密保护，确保您的数据安全和业务连续性
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 端到端加密传输</li>
                  <li>• DDoS 攻击防护</li>
                  <li>• 实时安全监控</li>
                </ul>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">智能运维管理</h3>
                <p className="text-gray-600 mb-4">
                  AI 驱动的智能运维，自动化资源调度，降低运维成本，提升服务效率
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 智能资源调度</li>
                  <li>• 自动化运维</li>
                  <li>• 实时性能监控</li>
                </ul>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">定制化解决方案</h3>
                <p className="text-gray-600 mb-4">
                  根据您的业务需求，提供量身定制的技术解决方案和专业的咨询服务
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 个性化配置</li>
                  <li>• 专业技术咨询</li>
                  <li>• 7×24 技术支持</li>
                </ul>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">性能优化服务</h3>
                <p className="text-gray-600 mb-4">
                  专业的性能优化团队，帮助您提升应用性能，优化用户体验
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 性能诊断分析</li>
                  <li>• 优化方案制定</li>
                  <li>• 持续性能监控</li>
                </ul>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-teal-600" 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.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">培训与支持</h3>
                <p className="text-gray-600 mb-4">
                  提供全面的技术培训和持续的技术支持，确保您的团队能够充分利用我们的服务
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• 技术培训课程</li>
                  <li>• 在线文档支持</li>
                  <li>• 社区技术支持</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* 定价信息 */}
        <Pricing />

        {/* 行动号召 */}
        <Cta />
      </main>
      <Footer />
    </div>
  );
}