'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../components/Navigation';
import { Footer } from '../../components/Footer';
import { Head } from '../../components/Head';
import { Building, Shield, Cloud, Container, Database, Network } from 'lucide-react';

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

    const translations = {
        zh: {
            title: '解决方案 - CloudPro 云服务器代理商',
            description:
                '为不同行业和场景提供专业的云计算解决方案，包括企业上云、数据备份、灾难恢复、混合云等。',
            keywords: '企业上云,数据备份,灾难恢复,混合云,容器服务,云计算解决方案',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '专业的云计算解决方案',
                subtitle: '为不同行业和场景量身定制',
                description: '基于丰富的云服务产品，为企业提供完整的数字化转型解决方案',
            },
            solutions: [
                {
                    id: 'enterprise',
                    name: '企业上云',
                    description: '帮助传统企业平滑迁移到云端，实现数字化转型',
                    benefits: ['降低IT成本', '提升业务敏捷性', '增强数据安全', '简化运维管理'],
                    scenarios: ['传统IT架构升级', '新业务快速部署', '成本优化', '弹性扩展'],
                    icon: Building,
                },
                {
                    id: 'backup',
                    name: '数据备份',
                    description: '全面的数据保护方案，确保业务数据安全可靠',
                    benefits: ['自动化备份', '多地容灾', '快速恢复', '成本可控'],
                    scenarios: ['数据库备份', '文件系统备份', '应用备份', '跨地域备份'],
                    icon: Database,
                },
                {
                    id: 'recovery',
                    name: '灾难恢复',
                    description: '构建完善的灾难恢复体系，保障业务连续性',
                    benefits: ['RTO/RPO保障', '自动故障切换', '定期演练', '7x24监控'],
                    scenarios: ['同城灾备', '异地灾备', '两地三中心', '云端灾备'],
                    icon: Shield,
                },
                {
                    id: 'hybrid',
                    name: '混合云',
                    description: '融合公有云和私有云优势，构建灵活的IT架构',
                    benefits: ['资源优化配置', '数据安全可控', '成本效益最优', '平滑扩展'],
                    scenarios: ['核心系统私有化', '弹性业务上云', '数据分级存储', '统一管理'],
                    icon: Cloud,
                },
                {
                    id: 'container',
                    name: '容器服务',
                    description: '基于Kubernetes的容器化应用部署和管理',
                    benefits: ['快速部署', '弹性伸缩', '资源高效利用', 'DevOps集成'],
                    scenarios: ['微服务架构', 'CI/CD流水线', '应用现代化', '多环境管理'],
                    icon: Container,
                },
                {
                    id: 'network',
                    name: '网络安全',
                    description: '全方位的网络安全防护，保障云上业务安全',
                    benefits: ['DDoS防护', 'Web应用防火墙', '数据加密', '访问控制'],
                    scenarios: ['网站防护', 'API安全', '数据传输加密', '身份认证'],
                    icon: Network,
                },
            ],
        },
        'zh-tw': {
            title: '解決方案 - CloudPro 雲伺服器代理商',
            description:
                '為不同行業和場景提供專業的雲端運算解決方案，包括企業上雲、資料備份、災難恢復、混合雲等。',
            keywords: '企業上雲,資料備份,災難恢復,混合雲,容器服務,雲端運算解決方案',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '專業的雲端運算解決方案',
                subtitle: '為不同行業和場景量身定制',
                description: '基於豐富的雲服務產品，為企業提供完整的數位化轉型解決方案',
            },
            solutions: [
                {
                    id: 'enterprise',
                    name: '企業上雲',
                    description: '幫助傳統企業平滑遷移到雲端，實現數位化轉型',
                    benefits: ['降低IT成本', '提升業務敏捷性', '增強資料安全', '簡化運維管理'],
                    scenarios: ['傳統IT架構升級', '新業務快速部署', '成本優化', '彈性擴展'],
                    icon: Building,
                },
                {
                    id: 'backup',
                    name: '資料備份',
                    description: '全面的資料保護方案，確保業務資料安全可靠',
                    benefits: ['自動化備份', '多地容災', '快速恢復', '成本可控'],
                    scenarios: ['資料庫備份', '檔案系統備份', '應用備份', '跨地域備份'],
                    icon: Database,
                },
                {
                    id: 'recovery',
                    name: '災難恢復',
                    description: '構建完善的災難恢復體系，保障業務連續性',
                    benefits: ['RTO/RPO保障', '自動故障切換', '定期演練', '7x24監控'],
                    scenarios: ['同城災備', '異地災備', '兩地三中心', '雲端災備'],
                    icon: Shield,
                },
                {
                    id: 'hybrid',
                    name: '混合雲',
                    description: '融合公有雲和私有雲優勢，構建靈活的IT架構',
                    benefits: ['資源優化配置', '資料安全可控', '成本效益最優', '平滑擴展'],
                    scenarios: ['核心系統私有化', '彈性業務上雲', '資料分級儲存', '統一管理'],
                    icon: Cloud,
                },
                {
                    id: 'container',
                    name: '容器服務',
                    description: '基於Kubernetes的容器化應用部署和管理',
                    benefits: ['快速部署', '彈性伸縮', '資源高效利用', 'DevOps整合'],
                    scenarios: ['微服務架構', 'CI/CD流水線', '應用現代化', '多環境管理'],
                    icon: Container,
                },
                {
                    id: 'network',
                    name: '網路安全',
                    description: '全方位的網路安全防護，保障雲上業務安全',
                    benefits: ['DDoS防護', 'Web應用防火牆', '資料加密', '存取控制'],
                    scenarios: ['網站防護', 'API安全', '資料傳輸加密', '身份認證'],
                    icon: Network,
                },
            ],
        },
        en: {
            title: 'Solutions - CloudPro Cloud Server Reseller',
            description:
                'Professional cloud computing solutions for different industries and scenarios, including enterprise cloud migration, data backup, disaster recovery, hybrid cloud and more.',
            keywords:
                'enterprise cloud,data backup,disaster recovery,hybrid cloud,container service,cloud computing solutions',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Professional Cloud Computing Solutions',
                subtitle: 'Tailored for Different Industries and Scenarios',
                description:
                    'Based on rich cloud service products, we provide complete digital transformation solutions for enterprises',
            },
            solutions: [
                {
                    id: 'enterprise',
                    name: 'Enterprise Cloud',
                    description:
                        'Help traditional enterprises smoothly migrate to the cloud for digital transformation',
                    benefits: [
                        'Reduce IT Costs',
                        'Improve Business Agility',
                        'Enhance Data Security',
                        'Simplify Operations',
                    ],

                    scenarios: [
                        'Legacy IT Upgrade',
                        'Rapid Business Deployment',
                        'Cost Optimization',
                        'Elastic Scaling',
                    ],

                    icon: Building,
                },
                {
                    id: 'backup',
                    name: 'Data Backup',
                    description:
                        'Comprehensive data protection solutions ensuring business data security',
                    benefits: [
                        'Automated Backup',
                        'Multi-site Disaster Recovery',
                        'Fast Recovery',
                        'Cost Control',
                    ],

                    scenarios: [
                        'Database Backup',
                        'File System Backup',
                        'Application Backup',
                        'Cross-region Backup',
                    ],

                    icon: Database,
                },
                {
                    id: 'recovery',
                    name: 'Disaster Recovery',
                    description:
                        'Build comprehensive disaster recovery systems to ensure business continuity',
                    benefits: [
                        'RTO/RPO Guarantee',
                        'Auto Failover',
                        'Regular Drills',
                        '7x24 Monitoring',
                    ],

                    scenarios: [
                        'Local Disaster Recovery',
                        'Remote Disaster Recovery',
                        'Multi-site Setup',
                        'Cloud Disaster Recovery',
                    ],

                    icon: Shield,
                },
                {
                    id: 'hybrid',
                    name: 'Hybrid Cloud',
                    description:
                        'Combine public and private cloud advantages for flexible IT architecture',
                    benefits: [
                        'Optimized Resource Allocation',
                        'Controlled Data Security',
                        'Cost Effectiveness',
                        'Smooth Scaling',
                    ],

                    scenarios: [
                        'Core System Privatization',
                        'Elastic Business Cloud',
                        'Tiered Data Storage',
                        'Unified Management',
                    ],

                    icon: Cloud,
                },
                {
                    id: 'container',
                    name: 'Container Service',
                    description:
                        'Kubernetes-based containerized application deployment and management',
                    benefits: [
                        'Rapid Deployment',
                        'Elastic Scaling',
                        'Efficient Resource Utilization',
                        'DevOps Integration',
                    ],

                    scenarios: [
                        'Microservices Architecture',
                        'CI/CD Pipeline',
                        'Application Modernization',
                        'Multi-environment Management',
                    ],

                    icon: Container,
                },
                {
                    id: 'network',
                    name: 'Network Security',
                    description:
                        'Comprehensive network security protection for cloud business security',
                    benefits: [
                        'DDoS Protection',
                        'Web Application Firewall',
                        'Data Encryption',
                        'Access Control',
                    ],

                    scenarios: [
                        'Website Protection',
                        'API Security',
                        'Data Transmission Encryption',
                        'Identity Authentication',
                    ],

                    icon: Network,
                },
            ],
        },
    };

    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>

            {/* Solutions 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 lg:grid-cols-2 gap-8">
                        {t.solutions.map((solution) => {
                            const IconComponent = solution.icon;
                            return (
                                <div
                                    key={solution.id}
                                    className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 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-2xl font-semibold text-amber-900">
                                                {solution.name}
                                            </h3>
                                        </div>

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

                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div>
                                                <h4 className="font-semibold text-amber-900 mb-3">
                                                    {currentLang === 'zh'
                                                        ? '核心优势:'
                                                        : currentLang === 'zh-tw'
                                                          ? '核心優勢:'
                                                          : 'Key Benefits:'}
                                                </h4>
                                                <ul className="space-y-2">
                                                    {solution.benefits.map((benefit, index) => (
                                                        <li
                                                            key={index}
                                                            className="flex items-center text-amber-700"
                                                        >
                                                            <div className="w-2 h-2 bg-green-500 rounded-full mr-3" />

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

                                            <div>
                                                <h4 className="font-semibold text-amber-900 mb-3">
                                                    {currentLang === 'zh'
                                                        ? '适用场景:'
                                                        : currentLang === 'zh-tw'
                                                          ? '適用場景:'
                                                          : 'Use Cases:'}
                                                </h4>
                                                <ul className="space-y-2">
                                                    {solution.scenarios.map((scenario, index) => (
                                                        <li
                                                            key={index}
                                                            className="flex items-center text-amber-700"
                                                        >
                                                            <div className="w-2 h-2 bg-blue-500 rounded-full mr-3" />

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

                                        <div className="mt-6 pt-6 border-t border-amber-200">
                                            <button className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-6 py-3 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 w-full">
                                                {currentLang === 'zh'
                                                    ? '了解详情'
                                                    : currentLang === 'zh-tw'
                                                      ? '了解詳情'
                                                      : 'Learn More'}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

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