'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';

interface ProductsPageClientProps {
    locale: string;
}

export default function ProductsPageClient({ locale }: ProductsPageClientProps) {
    const [language, setLanguage] = useState(
        locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en',
    );

    const languages = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品与服务',
                news: '新闻资讯',
                support: '客户支持',
                about: '关于我们',
                contact: '联系我们',
            },
            title: '产品与服务',
            subtitle: '专业的AWS云服务解决方案',
            categories: [
                {
                    title: '云服务器',
                    products: [
                        {
                            name: '轻量云服务器',
                            desc: 'AWS 轻量云服务器是针对个人开发者、中小企业以及学生群体的云服务，提供高性价比的云计算资源和服务。',
                            price: '¥99/月起',
                            features: ['1核1GB', '20GB SSD', '1TB流量', '1Mbps带宽'],
                        },
                        {
                            name: 'EC2服务器',
                            desc: '提供弹性 100 Gbps 500Gbps的大宽带服务器，适用于需要大宽带大流量的高性能应用场景。',
                            price: '¥299/月起',
                            features: ['2核4GB', '40GB SSD', '无限流量', '10Mbps带宽'],
                        },
                    ],
                },
                {
                    title: '安全防护',
                    products: [
                        {
                            name: '高防服务器',
                            desc: '高防服务器适用于对网络安全要求较高的应用场景，提供强大的DDoS防护能力。',
                            price: '¥599/月起',
                            features: ['4核8GB', '100GB SSD', 'DDoS防护', '100Mbps带宽'],
                        },
                    ],
                },
                {
                    title: '存储服务',
                    products: [
                        {
                            name: 'S3云存储',
                            desc: '高可靠、高可用的对象存储服务，支持海量数据存储和访问。',
                            price: '¥0.1/GB/月',
                            features: ['99.9%可用性', '11个9的持久性', 'RESTful API', '全球CDN'],
                        },
                    ],
                },
            ],

            contact: '立即咨询',
            footer: {
                sections: [
                    {
                        title: '目录',
                        items: ['首页', '产品与服务', '新闻资讯', '客户支持', '关于我们'],
                    },
                    {
                        title: '热门产品',
                        items: [
                            '轻量云服务器',
                            '站群服务器',
                            'EC2服务器',
                            '高防服务器',
                            'S3云存储',
                        ],
                    },
                    { title: '客户支持', items: ['技术支持', '在线客服', '帮助文档', '服务状态'] },
                    { title: '', items: ['新闻资讯', '关于我们', '隐私政策', '站点地图'] },
                ],
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品與服務',
                news: '新聞資訊',
                support: '客戶支持',
                about: '關於我們',
                contact: '聯繫我們',
            },
            title: '產品與服務',
            subtitle: '專業的AWS雲服務解決方案',
            categories: [
                {
                    title: '雲服務器',
                    products: [
                        {
                            name: '輕量雲服務器',
                            desc: 'AWS 輕量雲服務器是針對個人開發者、中小企業以及學生群體的雲服務，提供高性價比的雲計算資源和服務。',
                            price: '¥99/月起',
                            features: ['1核1GB', '20GB SSD', '1TB流量', '1Mbps帶寬'],
                        },
                        {
                            name: 'EC2服務器',
                            desc: '提供彈性 100 Gbps 500Gbps的大寬帶服務器，適用於需要大寬帶大流量的高性能應用場景。',
                            price: '¥299/月起',
                            features: ['2核4GB', '40GB SSD', '無限流量', '10Mbps帶寬'],
                        },
                    ],
                },
                {
                    title: '安全防護',
                    products: [
                        {
                            name: '高防服務器',
                            desc: '高防服務器適用於對網絡安全要求較高的應用場景，提供強大的DDoS防護能力。',
                            price: '¥599/月起',
                            features: ['4核8GB', '100GB SSD', 'DDoS防護', '100Mbps帶寬'],
                        },
                    ],
                },
                {
                    title: '存儲服務',
                    products: [
                        {
                            name: 'S3雲存儲',
                            desc: '高可靠、高可用的對象存儲服務，支持海量數據存儲和訪問。',
                            price: '¥0.1/GB/月',
                            features: ['99.9%可用性', '11個9的持久性', 'RESTful API', '全球CDN'],
                        },
                    ],
                },
            ],

            contact: '立即諮詢',
            footer: {
                sections: [
                    {
                        title: '目錄',
                        items: ['首頁', '產品與服務', '新聞資訊', '客戶支持', '關於我們'],
                    },
                    {
                        title: '熱門產品',
                        items: [
                            '輕量雲服務器',
                            '站群服務器',
                            'EC2服務器',
                            '高防服務器',
                            'S3雲存儲',
                        ],
                    },
                    { title: '客戶支持', items: ['技術支持', '在線客服', '幫助文檔', '服務狀態'] },
                    { title: '', items: ['新聞資訊', '關於我們', '隱私政策', '站點地圖'] },
                ],
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products & Services',
                news: 'News',
                support: 'Support',
                about: 'About Us',
                contact: 'Contact Us',
            },
            title: 'Products & Services',
            subtitle: 'Professional AWS Cloud Service Solutions',
            categories: [
                {
                    title: 'Cloud Servers',
                    products: [
                        {
                            name: 'Lightweight Cloud Server',
                            desc: 'AWS lightweight cloud server is a cloud service for individual developers, small and medium enterprises and student groups, providing cost-effective cloud computing resources and services.',
                            price: '¥99/month',
                            features: ['1 Core 1GB', '20GB SSD', '1TB Traffic', '1Mbps Bandwidth'],
                        },
                        {
                            name: 'EC2 Server',
                            desc: 'Provides elastic 100 Gbps 500Gbps high-bandwidth servers, suitable for high-performance application scenarios that require high bandwidth and large traffic.',
                            price: '¥299/month',
                            features: [
                                '2 Core 4GB',
                                '40GB SSD',
                                'Unlimited Traffic',
                                '10Mbps Bandwidth',
                            ],
                        },
                    ],
                },
                {
                    title: 'Security Protection',
                    products: [
                        {
                            name: 'High-Defense Server',
                            desc: 'High-defense servers are suitable for application scenarios with high network security requirements, providing powerful DDoS protection capabilities.',
                            price: '¥599/month',
                            features: [
                                '4 Core 8GB',
                                '100GB SSD',
                                'DDoS Protection',
                                '100Mbps Bandwidth',
                            ],
                        },
                    ],
                },
                {
                    title: 'Storage Services',
                    products: [
                        {
                            name: 'S3 Cloud Storage',
                            desc: 'Highly reliable and available object storage service that supports massive data storage and access.',
                            price: '¥0.1/GB/month',
                            features: [
                                '99.9% Availability',
                                '11 9s Durability',
                                'RESTful API',
                                'Global CDN',
                            ],
                        },
                    ],
                },
            ],

            contact: 'Contact Now',
            footer: {
                sections: [
                    {
                        title: 'Directory',
                        items: ['Home', 'Products & Services', 'News', 'Support', 'About Us'],
                    },
                    {
                        title: 'Popular Products',
                        items: [
                            'Lightweight Cloud Server',
                            'Station Group Server',
                            'EC2 Server',
                            'High-Defense Server',
                            'S3 Cloud Storage',
                        ],
                    },
                    { title: 'Customer Support', items: ['Technical Support', 'Online Service', 'Help Documentation', 'Service Status'] },
                    { title: '', items: ['News', 'About Us', 'Privacy Policy', 'Site Map'] },
                ],
            },
        },
    };

    const t = languages[language as keyof typeof languages] || languages['zh-CN'];

    return (
        <div className="min-h-screen bg-white">
            <Header
                language={language}
                setLanguage={setLanguage}
                translations={t}
                locale={locale}
            />

            {/* Hero Section */}
            <section className="bg-blue-600 text-white h-96 flex items-center justify-center">
                <div className="max-w-6xl mx-auto px-4 text-center">
                    <h1 className="text-4xl font-bold mb-4">{t.title}</h1>
                    <p className="text-xl">{t.subtitle}</p>
                </div>
            </section>

            {/* Products Section */}
            <section className="py-16">
                <div className="max-w-6xl mx-auto px-4">
                    {t.categories.map((category, categoryIndex) => (
                        <div key={categoryIndex} className="mb-16">
                            <h2 className="text-3xl font-bold text-center mb-12">
                                {category.title}
                            </h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                {category.products.map((product, productIndex) => (
                                    <div
                                        key={productIndex}
                                        className="bg-white rounded-lg shadow-lg p-6 border"
                                    >
                                        <h3 className="text-xl font-bold mb-3">{product.name}</h3>
                                        <p className="text-gray-600 mb-4">{product.desc}</p>
                                        <div className="text-2xl font-bold text-orange-500 mb-4">
                                            {product.price}
                                        </div>
                                        <ul className="space-y-2 mb-6">
                                            {product.features.map((feature, featureIndex) => (
                                                <li
                                                    key={featureIndex}
                                                    className="flex items-center"
                                                >
                                                    <span className="w-2 h-2 bg-blue-600 rounded-full mr-3"></span>
                                                    {feature}
                                                </li>
                                            ))}
                                        </ul>
                                        <button className="w-full bg-orange-500 text-white py-2 rounded hover:bg-orange-600">
                                            {t.contact}
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </section>

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