'use client';

import { useState, useEffect } from 'react';
import { getTranslations, type Language } from '@/lib/languages';

export default function ProductsPageClient({ params }: { params: { lang: string } }) {
    const [isLoaded, setIsLoaded] = useState(false);
    const lang = params.lang as Language;
    const t = getTranslations(lang);

    useEffect(() => {
        setIsLoaded(true);
    }, []);

    const products = [
        {
            icon: '☁️',
            color: 'from-blue-500 to-cyan-500',
            data: t.pages.products.cloudServers,
        },
        {
            icon: '💾',
            color: 'from-purple-500 to-pink-500',
            data: t.pages.products.storage,
        },
        {
            icon: '🌐',
            color: 'from-green-500 to-teal-500',
            data: t.pages.products.networking,
        },
    ];

    return (
        <div className="max-w-7xl mx-auto px-6 py-20">
            <div
                className={`transform transition-all duration-1000 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
            >
                {/* Header */}
                <div className="text-center mb-16">
                    <h1 className="text-5xl md:text-7xl font-bold mb-6">
                        <span className="text-cyan-400">{t.pages.products.title}</span>
                    </h1>
                    <p className="text-xl md:text-2xl text-pink-400 mb-4">
                        {t.pages.products.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                        {t.pages.products.description}
                    </p>
                </div>

                {/* Products Grid */}
                <div className="grid md:grid-cols-3 gap-8 mb-20">
                    {products.map((product, index) => (
                        <div
                            key={index}
                            className="group relative p-8 border border-cyan-500/30 rounded-lg backdrop-blur-sm hover:border-cyan-400 transition-all duration-300 transform hover:scale-105"
                        >
                            <div
                                className={`absolute inset-0 bg-gradient-to-br ${product.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
                            ></div>
                            <div className="relative z-10">
                                <div className="text-6xl mb-6 text-center">{product.icon}</div>
                                <h3 className="text-2xl font-bold text-cyan-400 mb-4 text-center">
                                    {product.data.title}
                                </h3>
                                <p className="text-gray-300 mb-6 text-center">
                                    {product.data.description}
                                </p>
                                <ul className="space-y-2">
                                    {product.data.features.map((feature, featureIndex) => (
                                        <li
                                            key={featureIndex}
                                            className="flex items-center text-gray-400"
                                        >
                                            <span className="text-cyan-400 mr-2">✓</span>
                                            {feature}
                                        </li>
                                    ))}
                                </ul>
                                <button
                                    className={`w-full mt-6 px-6 py-3 bg-gradient-to-r ${product.color} text-black font-bold rounded-lg hover:opacity-90 transition-all duration-300`}
                                >
                                    了解更多
                                </button>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Feature Comparison */}
                <div className="bg-black/50 border border-cyan-500/30 rounded-lg p-8">
                    <h2 className="text-3xl font-bold text-cyan-400 mb-8 text-center">产品对比</h2>
                    <div className="overflow-x-auto">
                        <table className="w-full text-left">
                            <thead>
                                <tr className="border-b border-cyan-500/30">
                                    <th className="pb-4 text-cyan-400">功能</th>
                                    <th className="pb-4 text-cyan-400 text-center">云服务器</th>
                                    <th className="pb-4 text-cyan-400 text-center">云存储</th>
                                    <th className="pb-4 text-cyan-400 text-center">网络服务</th>
                                </tr>
                            </thead>
                            <tbody className="text-gray-300">
                                <tr className="border-b border-gray-700">
                                    <td className="py-4">高可用性</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                </tr>
                                <tr className="border-b border-gray-700">
                                    <td className="py-4">自动扩展</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                    <td className="py-4 text-center text-gray-500">-</td>
                                </tr>
                                <tr className="border-b border-gray-700">
                                    <td className="py-4">全球部署</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                    <td className="py-4 text-center text-gray-500">-</td>
                                    <td className="py-4 text-center text-green-400">✓</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
}