'use client';

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

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

    const translations = {
        zh: {
            title: '云服务器 ECS - 弹性计算服务 | CloudPro',
            description:
                '高性能云服务器ECS，提供弹性计算服务，支持多种实例规格，按需付费，助力业务快速发展。99.9%可用性保证。',
            keywords: '云服务器,ECS,弹性计算,虚拟主机,云主机,服务器租用',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '云服务器 ECS',
                subtitle: '弹性计算服务',
                description: '高性能、高可靠的弹性计算服务，为您的应用提供安全稳定的计算环境',
            },
            features: [
                {
                    icon: Cpu,
                    title: '高性能计算',
                    description: '采用最新一代Intel/AMD处理器，提供强劲的计算性能',
                },
                {
                    icon: HardDrive,
                    title: 'SSD高速存储',
                    description: '全SSD存储，IOPS高达数万，保证数据读写性能',
                },
                {
                    icon: Shield,
                    title: '安全防护',
                    description: '多层安全防护，DDoS防护，数据加密，保障业务安全',
                },
                {
                    icon: Zap,
                    title: '弹性扩展',
                    description: '支持在线升降配，按需调整资源，灵活应对业务变化',
                },
                {
                    icon: Globe,
                    title: '全球部署',
                    description: '多地域多可用区部署，就近接入，降低网络延迟',
                },
                {
                    icon: Server,
                    title: '99.9%可用性',
                    description: '企业级可用性保证，7x24小时监控，故障快速恢复',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基础型',
                    popular: false,
                    price: '¥99',
                    period: '/月',
                    specs: {
                        cpu: '2核',
                        memory: '4GB',
                        storage: '40GB SSD',
                        bandwidth: '1Mbps',
                        traffic: '不限流量',
                    },
                    features: ['适合个人网站', '小型应用', '开发测试环境', '基础安全防护'],
                },
                {
                    id: 'standard',
                    name: '标准型',
                    popular: true,
                    price: '¥299',
                    period: '/月',
                    specs: {
                        cpu: '4核',
                        memory: '8GB',
                        storage: '80GB SSD',
                        bandwidth: '3Mbps',
                        traffic: '不限流量',
                    },
                    features: ['适合中小企业', '电商网站', '企业应用', '高级安全防护', '负载均衡'],
                },
                {
                    id: 'premium',
                    name: '高级型',
                    popular: false,
                    price: '¥599',
                    period: '/月',
                    specs: {
                        cpu: '8核',
                        memory: '16GB',
                        storage: '160GB SSD',
                        bandwidth: '5Mbps',
                        traffic: '不限流量',
                    },
                    features: [
                        '适合大型企业',
                        '高并发应用',
                        '数据库服务器',
                        '企业级安全',
                        '专属技术支持',
                    ],
                },
            ],

            advantages: {
                title: '为什么选择我们的云服务器',
                items: [
                    {
                        title: '性价比高',
                        description: '相比传统服务器，成本降低30-50%，按需付费更经济',
                    },
                    {
                        title: '部署快速',
                        description: '1分钟内完成服务器创建，快速响应业务需求',
                    },
                    {
                        title: '管理简单',
                        description: '可视化控制面板，一键操作，降低运维成本',
                    },
                    {
                        title: '技术支持',
                        description: '7x24小时专业技术支持，快速解决问题',
                    },
                ],
            },
        },
        'zh-tw': {
            title: '雲伺服器 ECS - 彈性運算服務 | CloudPro',
            description:
                '高效能雲伺服器ECS，提供彈性運算服務，支援多種實例規格，按需付費，助力業務快速發展。99.9%可用性保證。',
            keywords: '雲伺服器,ECS,彈性運算,虛擬主機,雲主機,伺服器租用',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '雲伺服器 ECS',
                subtitle: '彈性運算服務',
                description: '高效能、高可靠的彈性運算服務，為您的應用提供安全穩定的運算環境',
            },
            features: [
                {
                    icon: Cpu,
                    title: '高效能運算',
                    description: '採用最新一代Intel/AMD處理器，提供強勁的運算效能',
                },
                {
                    icon: HardDrive,
                    title: 'SSD高速儲存',
                    description: '全SSD儲存，IOPS高達數萬，保證資料讀寫效能',
                },
                {
                    icon: Shield,
                    title: '安全防護',
                    description: '多層安全防護，DDoS防護，資料加密，保障業務安全',
                },
                {
                    icon: Zap,
                    title: '彈性擴展',
                    description: '支援線上升降配，按需調整資源，靈活應對業務變化',
                },
                {
                    icon: Globe,
                    title: '全球部署',
                    description: '多地域多可用區部署，就近接入，降低網路延遲',
                },
                {
                    icon: Server,
                    title: '99.9%可用性',
                    description: '企業級可用性保證，7x24小時監控，故障快速恢復',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基礎型',
                    popular: false,
                    price: 'NT$2,990',
                    period: '/月',
                    specs: {
                        cpu: '2核',
                        memory: '4GB',
                        storage: '40GB SSD',
                        bandwidth: '1Mbps',
                        traffic: '不限流量',
                    },
                    features: ['適合個人網站', '小型應用', '開發測試環境', '基礎安全防護'],
                },
                {
                    id: 'standard',
                    name: '標準型',
                    popular: true,
                    price: 'NT$8,990',
                    period: '/月',
                    specs: {
                        cpu: '4核',
                        memory: '8GB',
                        storage: '80GB SSD',
                        bandwidth: '3Mbps',
                        traffic: '不限流量',
                    },
                    features: ['適合中小企業', '電商網站', '企業應用', '高級安全防護', '負載平衡'],
                },
                {
                    id: 'premium',
                    name: '高級型',
                    popular: false,
                    price: 'NT$17,990',
                    period: '/月',
                    specs: {
                        cpu: '8核',
                        memory: '16GB',
                        storage: '160GB SSD',
                        bandwidth: '5Mbps',
                        traffic: '不限流量',
                    },
                    features: [
                        '適合大型企業',
                        '高併發應用',
                        '資料庫伺服器',
                        '企業級安全',
                        '專屬技術支援',
                    ],
                },
            ],

            advantages: {
                title: '為什麼選擇我們的雲伺服器',
                items: [
                    {
                        title: '性價比高',
                        description: '相比傳統伺服器，成本降低30-50%，按需付費更經濟',
                    },
                    {
                        title: '部署快速',
                        description: '1分鐘內完成伺服器建立，快速回應業務需求',
                    },
                    {
                        title: '管理簡單',
                        description: '視覺化控制面板，一鍵操作，降低運維成本',
                    },
                    {
                        title: '技術支援',
                        description: '7x24小時專業技術支援，快速解決問題',
                    },
                ],
            },
        },
        en: {
            title: 'Cloud Server ECS - Elastic Compute Service | CloudPro',
            description:
                'High-performance Cloud Server ECS providing elastic compute service with multiple instance types, pay-as-you-go pricing. 99.9% availability guarantee.',
            keywords:
                'cloud server,ECS,elastic compute,virtual hosting,cloud hosting,server rental',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Cloud Server ECS',
                subtitle: 'Elastic Compute Service',
                description:
                    'High-performance, highly reliable elastic compute service providing secure and stable computing environment for your applications',
            },
            features: [
                {
                    icon: Cpu,
                    title: 'High Performance Computing',
                    description:
                        'Latest generation Intel/AMD processors providing powerful computing performance',
                },
                {
                    icon: HardDrive,
                    title: 'SSD High-Speed Storage',
                    description:
                        'Full SSD storage with IOPS up to tens of thousands, ensuring data read/write performance',
                },
                {
                    icon: Shield,
                    title: 'Security Protection',
                    description:
                        'Multi-layer security protection, DDoS protection, data encryption for business security',
                },
                {
                    icon: Zap,
                    title: 'Elastic Scaling',
                    description:
                        'Support online scaling up/down, adjust resources on demand, flexible response to business changes',
                },
                {
                    icon: Globe,
                    title: 'Global Deployment',
                    description:
                        'Multi-region multi-availability zone deployment, nearby access, reduced network latency',
                },
                {
                    icon: Server,
                    title: '99.9% Availability',
                    description:
                        'Enterprise-grade availability guarantee, 7x24 monitoring, rapid fault recovery',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: 'Basic',
                    popular: false,
                    price: '$15',
                    period: '/month',
                    specs: {
                        cpu: '2 Core',
                        memory: '4GB',
                        storage: '40GB SSD',
                        bandwidth: '1Mbps',
                        traffic: 'Unlimited',
                    },
                    features: [
                        'Personal websites',
                        'Small applications',
                        'Development/test environment',
                        'Basic security protection',
                    ],
                },
                {
                    id: 'standard',
                    name: 'Standard',
                    popular: true,
                    price: '$45',
                    period: '/month',
                    specs: {
                        cpu: '4 Core',
                        memory: '8GB',
                        storage: '80GB SSD',
                        bandwidth: '3Mbps',
                        traffic: 'Unlimited',
                    },
                    features: [
                        'SME businesses',
                        'E-commerce websites',
                        'Enterprise applications',
                        'Advanced security protection',
                        'Load balancing',
                    ],
                },
                {
                    id: 'premium',
                    name: 'Premium',
                    popular: false,
                    price: '$89',
                    period: '/month',
                    specs: {
                        cpu: '8 Core',
                        memory: '16GB',
                        storage: '160GB SSD',
                        bandwidth: '5Mbps',
                        traffic: 'Unlimited',
                    },
                    features: [
                        'Large enterprises',
                        'High-concurrency applications',
                        'Database servers',
                        'Enterprise-grade security',
                        'Dedicated technical support',
                    ],
                },
            ],

            advantages: {
                title: 'Why Choose Our Cloud Servers',
                items: [
                    {
                        title: 'Cost-Effective',
                        description:
                            'Reduce costs by 30-50% compared to traditional servers, pay-as-you-go is more economical',
                    },
                    {
                        title: 'Fast Deployment',
                        description:
                            'Complete server creation within 1 minute, quickly respond to business needs',
                    },
                    {
                        title: 'Easy Management',
                        description:
                            'Visual control panel, one-click operations, reduce operational costs',
                    },
                    {
                        title: 'Technical Support',
                        description: '7x24 professional technical support, quickly solve problems',
                    },
                ],
            },
        },
    };

    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">
                            {t.hero.subtitle}
                        </p>
                        <p className="text-lg text-yellow-200 max-w-3xl mx-auto">
                            {t.hero.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Features Section */}
            <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.features.map((feature, index) => {
                            const IconComponent = feature.icon;
                            return (
                                <div
                                    key={index}
                                    className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
                                >
                                    <div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6">
                                        <IconComponent className="w-6 h-6 text-white" />
                                    </div>
                                    <h3 className="text-xl font-semibold text-amber-900 mb-4">
                                        {feature.title}
                                    </h3>
                                    <p className="text-amber-700 leading-relaxed">
                                        {feature.description}
                                    </p>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* Pricing Plans */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
                            {currentLang === 'zh'
                                ? '选择适合您的配置'
                                : currentLang === 'zh-tw'
                                  ? '選擇適合您的配置'
                                  : 'Choose Your Perfect Plan'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '灵活的配置选择，满足不同业务需求'
                                : currentLang === 'zh-tw'
                                  ? '靈活的配置選擇，滿足不同業務需求'
                                  : 'Flexible configuration options to meet different business needs'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {t.plans.map((plan) => (
                            <div
                                key={plan.id}
                                className={`relative bg-white rounded-xl shadow-lg border-2 transition-all duration-300 hover:shadow-xl ${
                                    plan.popular
                                        ? 'border-amber-500 transform scale-105'
                                        : 'border-amber-200 hover:border-amber-300'
                                }`}
                            >
                                {plan.popular && (
                                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                                        <div className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center space-x-1">
                                            <Star className="w-4 h-4" />
                                            <span>
                                                {currentLang === 'zh'
                                                    ? '推荐'
                                                    : currentLang === 'zh-tw'
                                                      ? '推薦'
                                                      : 'Popular'}
                                            </span>
                                        </div>
                                    </div>
                                )}

                                <div className="p-8">
                                    <h3 className="text-2xl font-bold text-amber-900 mb-4">
                                        {plan.name}
                                    </h3>

                                    <div className="mb-6">
                                        <span className="text-4xl font-bold text-amber-600">
                                            {plan.price}
                                        </span>
                                        <span className="text-amber-700 ml-2">{plan.period}</span>
                                    </div>

                                    <div className="mb-6 space-y-3">
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">CPU:</span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.cpu}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '内存:'
                                                    : currentLang === 'zh-tw'
                                                      ? '記憶體:'
                                                      : 'Memory:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.memory}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '存储:'
                                                    : currentLang === 'zh-tw'
                                                      ? '儲存:'
                                                      : 'Storage:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.storage}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '带宽:'
                                                    : currentLang === 'zh-tw'
                                                      ? '頻寬:'
                                                      : 'Bandwidth:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.bandwidth}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '流量:'
                                                    : currentLang === 'zh-tw'
                                                      ? '流量:'
                                                      : 'Traffic:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.traffic}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="mb-8">
                                        <h4 className="font-semibold text-amber-900 mb-3">
                                            {currentLang === 'zh'
                                                ? '适用场景:'
                                                : currentLang === 'zh-tw'
                                                  ? '適用場景:'
                                                  : 'Use Cases:'}
                                        </h4>
                                        <ul className="space-y-2">
                                            {plan.features.map((feature, index) => (
                                                <li
                                                    key={index}
                                                    className="flex items-center text-amber-700"
                                                >
                                                    <Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />

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

                                    <button
                                        className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-200 ${
                                            plan.popular
                                                ? 'bg-gradient-to-r from-amber-500 to-yellow-500 text-white hover:from-amber-600 hover:to-yellow-600'
                                                : 'border-2 border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white'
                                        }`}
                                    >
                                        {currentLang === 'zh'
                                            ? '立即购买'
                                            : currentLang === 'zh-tw'
                                              ? '立即購買'
                                              : 'Buy Now'}
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Advantages Section */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
                            {t.advantages.title}
                        </h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {t.advantages.items.map((advantage, index) => (
                            <div
                                key={index}
                                className="text-center p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
                            >
                                <div className="w-16 h-16 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
                                    <span className="text-2xl font-bold text-white">
                                        {index + 1}
                                    </span>
                                </div>
                                <h3 className="text-xl font-semibold text-amber-900 mb-4">
                                    {advantage.title}
                                </h3>
                                <p className="text-amber-700 leading-relaxed">
                                    {advantage.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

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