'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../../components/Navigation';
import { Footer } from '../../../components/Footer';
import { Head } from '../../../components/Head';
import { Shield, Zap, BarChart3, Globe, Settings, Activity, Check, Star } from 'lucide-react';

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

    const translations = {
        zh: {
            title: '负载均衡 SLB - 智能流量分发服务 | CloudPro',
            description:
                '高性能负载均衡SLB，智能分发访问流量到多台服务器，提升应用可用性和性能，支持HTTP/HTTPS、TCP/UDP协议。',
            keywords: '负载均衡,SLB,流量分发,高可用,负载均衡器',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '负载均衡 SLB',
                subtitle: '智能流量分发服务',
                description: '将访问流量智能分发到多台云服务器，提升应用系统的可用性、扩展性和性能',
            },
            features: [
                {
                    icon: Shield,
                    title: '高可用保障',
                    description: '多可用区部署，自动故障切换，保证99.99%服务可用性',
                },
                {
                    icon: Zap,
                    title: '智能调度',
                    description: '支持多种负载均衡算法，智能分发流量，优化性能',
                },
                {
                    icon: BarChart3,
                    title: '健康检查',
                    description: '实时监控后端服务器健康状态，自动剔除异常节点',
                },
                {
                    icon: Globe,
                    title: '多协议支持',
                    description: '支持HTTP/HTTPS、TCP/UDP等多种协议',
                },
                {
                    icon: Settings,
                    title: 'SSL卸载',
                    description: '支持SSL证书管理和SSL卸载，减轻后端服务器负担',
                },
                {
                    icon: Activity,
                    title: '会话保持',
                    description: '支持会话保持功能，确保用户请求的连续性',
                },
            ],

            algorithms: [
                {
                    name: '轮询',
                    description: '按顺序将请求分发到各个服务器',
                    useCase: '适合服务器性能相近的场景',
                },
                {
                    name: '加权轮询',
                    description: '根据服务器权重分发请求',
                    useCase: '适合服务器性能不同的场景',
                },
                {
                    name: '最少连接',
                    description: '将请求分发到连接数最少的服务器',
                    useCase: '适合长连接应用',
                },
                {
                    name: 'IP哈希',
                    description: '根据客户端IP进行哈希分发',
                    useCase: '适合需要会话保持的应用',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基础版',
                    popular: false,
                    price: '¥299',
                    period: '/月',
                    specs: {
                        bandwidth: '10Mbps',
                        connections: '5万',
                        servers: '10台',
                        protocols: 'HTTP/HTTPS',
                    },
                    features: ['基础负载均衡', '健康检查', '基础监控', '技术支持'],
                },
                {
                    id: 'standard',
                    name: '标准版',
                    popular: true,
                    price: '¥599',
                    period: '/月',
                    specs: {
                        bandwidth: '50Mbps',
                        connections: '20万',
                        servers: '50台',
                        protocols: 'HTTP/HTTPS/TCP/UDP',
                    },
                    features: ['高级负载均衡', 'SSL卸载', '会话保持', '高级监控', '专属支持'],
                },
                {
                    id: 'premium',
                    name: '企业版',
                    popular: false,
                    price: '¥1299',
                    period: '/月',
                    specs: {
                        bandwidth: '200Mbps',
                        connections: '100万',
                        servers: '200台',
                        protocols: '全协议支持',
                    },
                    features: [
                        '企业级负载均衡',
                        '高级SSL功能',
                        '自定义规则',
                        '实时监控',
                        '7x24支持',
                    ],
                },
            ],
        },
        'zh-tw': {
            title: '負載平衡 SLB - 智慧流量分發服務 | CloudPro',
            description:
                '高效能負載平衡SLB，智慧分發存取流量到多台伺服器，提升應用可用性和效能，支援HTTP/HTTPS、TCP/UDP協定。',
            keywords: '負載平衡,SLB,流量分發,高可用,負載平衡器',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '負載平衡 SLB',
                subtitle: '智慧流量分發服務',
                description: '將存取流量智慧分發到多台雲伺服器，提升應用系統的可用性、擴展性和效能',
            },
            features: [
                {
                    icon: Shield,
                    title: '高可用保障',
                    description: '多可用區部署，自動故障切換，保證99.99%服務可用性',
                },
                {
                    icon: Zap,
                    title: '智慧調度',
                    description: '支援多種負載平衡演算法，智慧分發流量，優化效能',
                },
                {
                    icon: BarChart3,
                    title: '健康檢查',
                    description: '即時監控後端伺服器健康狀態，自動剔除異常節點',
                },
                {
                    icon: Globe,
                    title: '多協定支援',
                    description: '支援HTTP/HTTPS、TCP/UDP等多種協定',
                },
                {
                    icon: Settings,
                    title: 'SSL卸載',
                    description: '支援SSL憑證管理和SSL卸載，減輕後端伺服器負擔',
                },
                {
                    icon: Activity,
                    title: '會話保持',
                    description: '支援會話保持功能，確保用戶請求的連續性',
                },
            ],

            algorithms: [
                {
                    name: '輪詢',
                    description: '按順序將請求分發到各個伺服器',
                    useCase: '適合伺服器效能相近的場景',
                },
                {
                    name: '加權輪詢',
                    description: '根據伺服器權重分發請求',
                    useCase: '適合伺服器效能不同的場景',
                },
                {
                    name: '最少連接',
                    description: '將請求分發到連接數最少的伺服器',
                    useCase: '適合長連接應用',
                },
                {
                    name: 'IP雜湊',
                    description: '根據客戶端IP進行雜湊分發',
                    useCase: '適合需要會話保持的應用',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: '基礎版',
                    popular: false,
                    price: 'NT$8,990',
                    period: '/月',
                    specs: {
                        bandwidth: '10Mbps',
                        connections: '5萬',
                        servers: '10台',
                        protocols: 'HTTP/HTTPS',
                    },
                    features: ['基礎負載平衡', '健康檢查', '基礎監控', '技術支援'],
                },
                {
                    id: 'standard',
                    name: '標準版',
                    popular: true,
                    price: 'NT$17,990',
                    period: '/月',
                    specs: {
                        bandwidth: '50Mbps',
                        connections: '20萬',
                        servers: '50台',
                        protocols: 'HTTP/HTTPS/TCP/UDP',
                    },
                    features: ['高級負載平衡', 'SSL卸載', '會話保持', '高級監控', '專屬支援'],
                },
                {
                    id: 'premium',
                    name: '企業版',
                    popular: false,
                    price: 'NT$38,990',
                    period: '/月',
                    specs: {
                        bandwidth: '200Mbps',
                        connections: '100萬',
                        servers: '200台',
                        protocols: '全協定支援',
                    },
                    features: ['企業級負載平衡', '高級SSL功能', '自訂規則', '即時監控', '7x24支援'],
                },
            ],
        },
        en: {
            title: 'Load Balancer SLB - Intelligent Traffic Distribution | CloudPro',
            description:
                'High-performance Load Balancer SLB intelligently distributes traffic across multiple servers, improving application availability and performance with HTTP/HTTPS, TCP/UDP protocol support.',
            keywords: 'load balancer,SLB,traffic distribution,high availability,load balancing',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Load Balancer SLB',
                subtitle: 'Intelligent Traffic Distribution Service',
                description:
                    'Intelligently distribute access traffic across multiple cloud servers to improve application availability, scalability, and performance',
            },
            features: [
                {
                    icon: Shield,
                    title: 'High Availability',
                    description:
                        'Multi-AZ deployment with automatic failover, ensuring 99.99% service availability',
                },
                {
                    icon: Zap,
                    title: 'Smart Scheduling',
                    description:
                        'Support multiple load balancing algorithms for intelligent traffic distribution and performance optimization',
                },
                {
                    icon: BarChart3,
                    title: 'Health Check',
                    description:
                        'Real-time monitoring of backend server health, automatic removal of unhealthy nodes',
                },
                {
                    icon: Globe,
                    title: 'Multi-Protocol Support',
                    description: 'Support HTTP/HTTPS, TCP/UDP and other protocols',
                },
                {
                    icon: Settings,
                    title: 'SSL Offloading',
                    description:
                        'Support SSL certificate management and SSL offloading to reduce backend server load',
                },
                {
                    icon: Activity,
                    title: 'Session Persistence',
                    description:
                        'Support session persistence to ensure continuity of user requests',
                },
            ],

            algorithms: [
                {
                    name: 'Round Robin',
                    description: 'Distribute requests to servers in sequence',
                    useCase: 'Suitable for scenarios with similar server performance',
                },
                {
                    name: 'Weighted Round Robin',
                    description: 'Distribute requests based on server weights',
                    useCase: 'Suitable for scenarios with different server performance',
                },
                {
                    name: 'Least Connections',
                    description: 'Distribute requests to server with fewest connections',
                    useCase: 'Suitable for long connection applications',
                },
                {
                    name: 'IP Hash',
                    description: 'Hash distribution based on client IP',
                    useCase: 'Suitable for applications requiring session persistence',
                },
            ],

            plans: [
                {
                    id: 'basic',
                    name: 'Basic',
                    popular: false,
                    price: '$45',
                    period: '/month',
                    specs: {
                        bandwidth: '10Mbps',
                        connections: '50K',
                        servers: '10',
                        protocols: 'HTTP/HTTPS',
                    },
                    features: [
                        'Basic load balancing',
                        'Health check',
                        'Basic monitoring',
                        'Technical support',
                    ],
                },
                {
                    id: 'standard',
                    name: 'Standard',
                    popular: true,
                    price: '$89',
                    period: '/month',
                    specs: {
                        bandwidth: '50Mbps',
                        connections: '200K',
                        servers: '50',
                        protocols: 'HTTP/HTTPS/TCP/UDP',
                    },
                    features: [
                        'Advanced load balancing',
                        'SSL offloading',
                        'Session persistence',
                        'Advanced monitoring',
                        'Dedicated support',
                    ],
                },
                {
                    id: 'premium',
                    name: 'Enterprise',
                    popular: false,
                    price: '$195',
                    period: '/month',
                    specs: {
                        bandwidth: '200Mbps',
                        connections: '1M',
                        servers: '200',
                        protocols: 'All protocols',
                    },
                    features: [
                        'Enterprise load balancing',
                        'Advanced SSL features',
                        'Custom rules',
                        'Real-time monitoring',
                        '7x24 support',
                    ],
                },
            ],
        },
    };

    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>

            {/* Load Balancing Algorithms */}
            <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'
                                  ? '負載平衡演算法'
                                  : 'Load Balancing Algorithms'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '多种算法满足不同应用场景需求'
                                : currentLang === 'zh-tw'
                                  ? '多種演算法滿足不同應用場景需求'
                                  : 'Multiple algorithms to meet different application scenarios'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {t.algorithms.map((algorithm, index) => (
                            <div
                                key={index}
                                className="bg-gradient-to-br from-amber-50 to-yellow-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
                            >
                                <h3 className="text-xl font-bold text-amber-900 mb-4">
                                    {algorithm.name}
                                </h3>
                                <p className="text-amber-700 mb-4">{algorithm.description}</p>
                                <div className="bg-amber-100 p-3 rounded-lg">
                                    <p className="text-amber-800 text-sm font-medium">
                                        {algorithm.useCase}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Pricing Plans */}
            <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">
                            {currentLang === 'zh'
                                ? '选择适合的版本'
                                : currentLang === 'zh-tw'
                                  ? '選擇適合的版本'
                                  : 'Choose Your Plan'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '根据业务流量选择合适的负载均衡配置'
                                : currentLang === 'zh-tw'
                                  ? '根據業務流量選擇合適的負載平衡配置'
                                  : 'Select the right load balancer configuration based on your traffic'}
                        </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">
                                                {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'
                                                      ? '併發連接:'
                                                      : 'Connections:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.connections}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '后端服务器:'
                                                    : currentLang === 'zh-tw'
                                                      ? '後端伺服器:'
                                                      : 'Backend Servers:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.servers}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-amber-700">
                                                {currentLang === 'zh'
                                                    ? '协议支持:'
                                                    : currentLang === 'zh-tw'
                                                      ? '協定支援:'
                                                      : 'Protocols:'}
                                            </span>
                                            <span className="font-semibold text-amber-900">
                                                {plan.specs.protocols}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="mb-8">
                                        <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>

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