'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../components/Navigation';
import { Footer } from '../../components/Footer';
import { Head } from '../../components/Head';
import { Server, Database, Shield, Zap, Globe, HardDrive } from 'lucide-react';

export default function ProductsPage() {
    const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');

    const translations = {
        zh: {
            title: '产品服务 - CloudPro 云服务器代理商',
            description:
                '提供全面的云计算产品服务，包括云服务器ECS、云数据库RDS、负载均衡SLB、对象存储OSS等企业级解决方案。',
            keywords: '云服务器,云数据库,负载均衡,对象存储,CDN加速,云计算产品',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '全面的云计算产品服务',
                subtitle: '为企业提供稳定、高效、安全的云基础设施',
                description:
                    '从计算、存储到网络，我们提供完整的云服务产品线，满足不同规模企业的需求',
            },
            products: [
                {
                    id: 'ecs',
                    name: '云服务器 ECS',
                    description: '弹性计算服务，提供安全可靠的弹性计算服务',
                    features: ['多种实例规格', '弹性扩缩容', '高可用保障', '安全防护'],
                    price: '¥99/月起',
                    icon: Server,
                },
                {
                    id: 'rds',
                    name: '云数据库 RDS',
                    description: '关系型数据库服务，支持MySQL、PostgreSQL等',
                    features: ['自动备份', '读写分离', '监控告警', '高可用架构'],
                    price: '¥199/月起',
                    icon: Database,
                },
                {
                    id: 'slb',
                    name: '负载均衡 SLB',
                    description: '将访问流量分发到多台云服务器，提升应用可用性',
                    features: ['智能调度', '健康检查', 'SSL卸载', '会话保持'],
                    price: '¥299/月起',
                    icon: Shield,
                },
                {
                    id: 'oss',
                    name: '对象存储 OSS',
                    description: '海量、安全、低成本、高可靠的云存储服务',
                    features: ['无限容量', '多重备份', 'CDN加速', 'API接口'],
                    price: '¥0.12/GB/月起',
                    icon: HardDrive,
                },
                {
                    id: 'cdn',
                    name: 'CDN 加速',
                    description: '内容分发网络，提升网站访问速度',
                    features: ['全球节点', '智能缓存', '防护功能', '实时监控'],
                    price: '¥0.24/GB起',
                    icon: Zap,
                },
                {
                    id: 'dns',
                    name: '云解析 DNS',
                    description: '高可用、高扩展的权威DNS服务和DNS管理服务',
                    features: ['智能解析', '负载均衡', '故障切换', '统计分析'],
                    price: '¥20/月起',
                    icon: Globe,
                },
            ],
        },
        'zh-tw': {
            title: '產品服務 - CloudPro 雲伺服器代理商',
            description:
                '提供全面的雲端運算產品服務，包括雲伺服器ECS、雲資料庫RDS、負載平衡SLB、物件儲存OSS等企業級解決方案。',
            keywords: '雲伺服器,雲資料庫,負載平衡,物件儲存,CDN加速,雲端運算產品',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '全面的雲端運算產品服務',
                subtitle: '為企業提供穩定、高效、安全的雲基礎設施',
                description:
                    '從運算、儲存到網路，我們提供完整的雲服務產品線，滿足不同規模企業的需求',
            },
            products: [
                {
                    id: 'ecs',
                    name: '雲伺服器 ECS',
                    description: '彈性運算服務，提供安全可靠的彈性運算服務',
                    features: ['多種實例規格', '彈性擴縮容', '高可用保障', '安全防護'],
                    price: 'NT$2,990/月起',
                    icon: Server,
                },
                {
                    id: 'rds',
                    name: '雲資料庫 RDS',
                    description: '關聯式資料庫服務，支援MySQL、PostgreSQL等',
                    features: ['自動備份', '讀寫分離', '監控告警', '高可用架構'],
                    price: 'NT$5,990/月起',
                    icon: Database,
                },
                {
                    id: 'slb',
                    name: '負載平衡 SLB',
                    description: '將存取流量分發到多台雲伺服器，提升應用可用性',
                    features: ['智慧調度', '健康檢查', 'SSL卸載', '會話保持'],
                    price: 'NT$8,990/月起',
                    icon: Shield,
                },
                {
                    id: 'oss',
                    name: '物件儲存 OSS',
                    description: '海量、安全、低成本、高可靠的雲儲存服務',
                    features: ['無限容量', '多重備份', 'CDN加速', 'API介面'],
                    price: 'NT$3.6/GB/月起',
                    icon: HardDrive,
                },
                {
                    id: 'cdn',
                    name: 'CDN 加速',
                    description: '內容分發網路，提升網站存取速度',
                    features: ['全球節點', '智慧快取', '防護功能', '即時監控'],
                    price: 'NT$7.2/GB起',
                    icon: Zap,
                },
                {
                    id: 'dns',
                    name: '雲解析 DNS',
                    description: '高可用、高擴展的權威DNS服務和DNS管理服務',
                    features: ['智慧解析', '負載平衡', '故障切換', '統計分析'],
                    price: 'NT$600/月起',
                    icon: Globe,
                },
            ],
        },
        en: {
            title: 'Products & Services - CloudPro Cloud Server Reseller',
            description:
                'Comprehensive cloud computing products including Cloud Server ECS, Cloud Database RDS, Load Balancer SLB, Object Storage OSS and more enterprise solutions.',
            keywords:
                'cloud server,cloud database,load balancer,object storage,CDN acceleration,cloud computing products',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Comprehensive Cloud Computing Products',
                subtitle: 'Stable, Efficient, and Secure Cloud Infrastructure for Enterprises',
                description:
                    'From computing and storage to networking, we provide a complete cloud service product line to meet the needs of enterprises of all sizes',
            },
            products: [
                {
                    id: 'ecs',
                    name: 'Cloud Server ECS',
                    description:
                        'Elastic Compute Service providing secure and reliable elastic computing',
                    features: [
                        'Multiple Instance Types',
                        'Auto Scaling',
                        'High Availability',
                        'Security Protection',
                    ],

                    price: 'From $15/month',
                    icon: Server,
                },
                {
                    id: 'rds',
                    name: 'Cloud Database RDS',
                    description:
                        'Relational Database Service supporting MySQL, PostgreSQL and more',
                    features: [
                        'Auto Backup',
                        'Read-Write Splitting',
                        'Monitoring & Alerts',
                        'High Availability',
                    ],

                    price: 'From $29/month',
                    icon: Database,
                },
                {
                    id: 'slb',
                    name: 'Load Balancer SLB',
                    description:
                        'Distribute traffic across multiple cloud servers for better availability',
                    features: [
                        'Smart Scheduling',
                        'Health Check',
                        'SSL Offloading',
                        'Session Persistence',
                    ],

                    price: 'From $45/month',
                    icon: Shield,
                },
                {
                    id: 'oss',
                    name: 'Object Storage OSS',
                    description:
                        'Massive, secure, low-cost, and highly reliable cloud storage service',
                    features: [
                        'Unlimited Capacity',
                        'Multiple Backups',
                        'CDN Acceleration',
                        'API Interface',
                    ],

                    price: 'From $0.02/GB/month',
                    icon: HardDrive,
                },
                {
                    id: 'cdn',
                    name: 'CDN Acceleration',
                    description: 'Content Delivery Network to improve website access speed',
                    features: [
                        'Global Nodes',
                        'Smart Caching',
                        'Protection Features',
                        'Real-time Monitoring',
                    ],

                    price: 'From $0.04/GB',
                    icon: Zap,
                },
                {
                    id: 'dns',
                    name: 'Cloud DNS',
                    description: 'Highly available and scalable authoritative DNS service',
                    features: [
                        'Smart Resolution',
                        'Load Balancing',
                        'Failover',
                        'Statistics Analysis',
                    ],

                    price: 'From $3/month',
                    icon: Globe,
                },
            ],
        },
    };

    const t = translations[currentLang];

    useEffect(() => {
        const browserLang = navigator.language.toLowerCase();
        if (browserLang.includes('en')) {
            setCurrentLang('en');
        } else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
            setCurrentLang('zh-tw');
        }
    }, []);

    return (
        <div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
            <Head
                title={t.title}
                description={t.description}
                keywords={t.keywords}
                currentLang={currentLang}
            />

            <Navigation
                currentLang={currentLang}
                onLanguageChange={setCurrentLang}
                translations={translations}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-5xl font-bold mb-6">{t.hero.title}</h1>
                        <p className="text-xl md:text-2xl text-yellow-100 mb-8 max-w-3xl mx-auto">
                            {t.hero.subtitle}
                        </p>
                        <p className="text-lg text-yellow-200 max-w-2xl mx-auto">
                            {t.hero.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Products Grid */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {t.products.map((product) => {
                            const IconComponent = product.icon;
                            return (
                                <div
                                    key={product.id}
                                    className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-amber-200"
                                >
                                    <div className="p-8">
                                        <div className="flex items-center mb-6">
                                            <div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mr-4">
                                                <IconComponent className="w-6 h-6 text-white" />
                                            </div>
                                            <h3 className="text-xl font-semibold text-amber-900">
                                                {product.name}
                                            </h3>
                                        </div>

                                        <p className="text-amber-700 mb-6 leading-relaxed">
                                            {product.description}
                                        </p>

                                        <div className="mb-6">
                                            <h4 className="font-semibold text-amber-900 mb-3">
                                                {currentLang === 'zh'
                                                    ? '主要特性:'
                                                    : currentLang === 'zh-tw'
                                                      ? '主要特性:'
                                                      : 'Key Features:'}
                                            </h4>
                                            <ul className="space-y-2">
                                                {product.features.map((feature, index) => (
                                                    <li
                                                        key={index}
                                                        className="flex items-center text-amber-700"
                                                    >
                                                        <div className="w-2 h-2 bg-yellow-500 rounded-full mr-3" />

                                                        {feature}
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>

                                        <div className="flex items-center justify-between">
                                            <div className="text-2xl font-bold text-amber-600">
                                                {product.price}
                                            </div>
                                            <button className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-6 py-2 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200">
                                                {currentLang === 'zh'
                                                    ? '了解更多'
                                                    : currentLang === 'zh-tw'
                                                      ? '了解更多'
                                                      : 'Learn More'}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

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