import Link from 'next/link';
import ServerHeader from '@/app/components/ServerHeader';
import Footer from '@/app/components/Footer';
import { productsTranslations } from '@/translations/products';
import ProductsClientComponent from './ProductsClientComponent';

interface ProductsServerComponentProps {
    locale: string;
}

export default function ProductsServerComponent({ locale }: ProductsServerComponentProps) {
    // 获取当前语言的翻译
    const t = productsTranslations[locale as keyof typeof productsTranslations] || productsTranslations['zh-CN'];

    return (
        <div className="min-h-screen bg-gray-50">
            <ServerHeader 
                language={locale} 
                translations={t} 
                locale={locale} 
            />
            
            <main>
                {/* Hero Section */}
                <section className="bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
                    <div className="container mx-auto px-6 text-center">
                        <h1 className="text-5xl font-bold text-gray-900 mb-6 leading-tight">
                            {t.title}
                        </h1>
                        <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                            {t.subtitle}
                        </p>
                    </div>
                </section>

                {/* Products Section */}
                <ProductsClientComponent 
                    categories={t.categories}
                    contactText={t.contact}
                    locale={locale}
                />

                {/* 技术优势 */}
                <section className="py-20 bg-gray-50">
                    <div className="container mx-auto px-6">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">为什么选择我们</h2>
                            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                                作为AWS官方合作伙伴，我们提供专业可靠的云服务解决方案
                            </p>
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                            <div className="text-center">
                                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                    </svg>
                                </div>
                                <h3 className="text-xl font-semibold text-gray-900 mb-2">安全可靠</h3>
                                <p className="text-gray-600">99.9%可用性保障，企业级安全防护</p>
                            </div>
                            
                            <div className="text-center">
                                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <svg className="w-8 h-8 text-green-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 text-gray-900 mb-2">高性能</h3>
                                <p className="text-gray-600">SSD存储，高速网络，极致性能体验</p>
                            </div>
                            
                            <div className="text-center">
                                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                    </svg>
                                </div>
                                <h3 className="text-xl font-semibold text-gray-900 mb-2">7x24支持</h3>
                                <p className="text-gray-600">专业技术团队，全天候技术支持</p>
                            </div>
                            
                            <div className="text-center">
                                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <svg className="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                                    </svg>
                                </div>
                                <h3 className="text-xl font-semibold text-gray-900 mb-2">性价比高</h3>
                                <p className="text-gray-600">灵活计费，按需付费，成本可控</p>
                            </div>
                        </div>
                    </div>
                </section>

                {/* 客户案例 */}
                <section className="py-20">
                    <div className="container mx-auto px-6">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">客户成功案例</h2>
                            <p className="text-xl text-gray-600">已为500+企业提供专业云服务解决方案</p>
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            <div className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300">
                                <div className="text-center mb-6">
                                    <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <span className="text-2xl font-bold text-blue-600">E</span>
                                    </div>
                                    <h3 className="text-xl font-semibold text-gray-900">某电商平台</h3>
                                    <p className="text-gray-600">零售电商</p>
                                </div>
                                <p className="text-gray-700 mb-4">
                                    &ldquo;通过使用懂云的云服务器和CDN服务，我们的网站访问速度提升了60%，用户体验显著改善。&rdquo;
                                </p>
                                <div className="text-sm text-gray-500">
                                    <span className="font-semibold">节省成本:</span> 40% | 
                                    <span className="font-semibold ml-2">性能提升:</span> 60%
                                </div>
                            </div>
                            
                            <div className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300">
                                <div className="text-center mb-6">
                                    <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <span className="text-2xl font-bold text-green-600">F</span>
                                    </div>
                                    <h3 className="text-xl font-semibold text-gray-900">某金融科技公司</h3>
                                    <p className="text-gray-600">金融科技</p>
                                </div>
                                <p className="text-gray-700 mb-4">
                                    &ldquo;高防服务器为我们的金融应用提供了强大的安全保障，零安全事故，客户信任度大幅提升。&rdquo;
                                </p>
                                <div className="text-sm text-gray-500">
                                    <span className="font-semibold">安全等级:</span> 企业级 | 
                                    <span className="font-semibold ml-2">可用性:</span> 99.99%
                                </div>
                            </div>
                            
                            <div className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300">
                                <div className="text-center mb-6">
                                    <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <span className="text-2xl font-bold text-purple-600">G</span>
                                    </div>
                                    <h3 className="text-xl font-semibold text-gray-900">某游戏公司</h3>
                                    <p className="text-gray-600">游戏娱乐</p>
                                </div>
                                <p className="text-gray-700 mb-4">
                                    &ldquo;弹性计算服务帮助我们轻松应对游戏高峰期的流量冲击，用户体验始终稳定流畅。&rdquo;
                                </p>
                                <div className="text-sm text-gray-500">
                                    <span className="font-semibold">弹性扩容:</span> 10倍 | 
                                    <span className="font-semibold ml-2">响应时间:</span> &lt;50ms
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* CTA Section */}
                <section className="bg-gradient-to-r from-blue-600 to-purple-600 py-20">
                    <div className="container mx-auto px-6 text-center">
                        <h2 className="text-4xl font-bold text-white mb-6">
                            准备开始您的云计算之旅？
                        </h2>
                        <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
                            我们的专业团队随时为您提供技术支持和解决方案咨询
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
                            <Link
                                href={locale === 'zh-CN' ? '/contact' : `/${locale}/contact`}
                                className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-300"
                            >
                                免费咨询
                            </Link>
                            <Link
                                href={locale === 'zh-CN' ? '/support' : `/${locale}/support`}
                                className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors duration-300"
                            >
                                技术支持
                            </Link>
                        </div>
                        
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
                            <div className="text-center">
                                <div className="text-3xl font-bold text-white mb-2">500+</div>
                                <div className="text-blue-100">企业客户</div>
                            </div>
                            <div className="text-center">
                                <div className="text-3xl font-bold text-white mb-2">99.9%</div>
                                <div className="text-blue-100">服务可用性</div>
                            </div>
                            <div className="text-center">
                                <div className="text-3xl font-bold text-white mb-2">7x24</div>
                                <div className="text-blue-100">技术支持</div>
                            </div>
                            <div className="text-center">
                                <div className="text-3xl font-bold text-white mb-2">5年+</div>
                                <div className="text-blue-100">行业经验</div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>

            <Footer translations={t} />
        </div>
    );
}