'use client';

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

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

    const translations = {
        zh: {
            title: '对象存储 OSS - 海量云存储服务 | CloudPro',
            description:
                '安全可靠的对象存储OSS，提供海量、安全、低成本的云存储服务，支持多种存储类型，适用于网站、移动应用、备份归档等场景。',
            keywords: '对象存储,OSS,云存储,文件存储,数据备份',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '对象存储 OSS',
                subtitle: '海量云存储服务',
                description: '提供安全、可靠、低成本的海量云存储服务，支持任意类型文件的存储和访问',
            },
            features: [
                {
                    icon: HardDrive,
                    title: '海量存储',
                    description: '支持EB级别的存储容量，无需担心存储空间不足',
                },
                {
                    icon: Shield,
                    title: '数据安全',
                    description: '99.999999999%的数据可靠性，多重备份保障数据安全',
                },
                {
                    icon: Zap,
                    title: '高性能访问',
                    description: '毫秒级响应，支持高并发访问，CDN加速全球访问',
                },
                {
                    icon: Globe,
                    title: '全球部署',
                    description: '多地域部署，就近存储和访问，降低延迟',
                },
                {
                    icon: Code,
                    title: 'API接口',
                    description: '丰富的API接口和SDK，轻松集成到应用中',
                },
                {
                    icon: BarChart3,
                    title: '智能分析',
                    description: '提供存储分析和访问统计，优化存储成本',
                },
            ],

            storageTypes: [
                {
                    name: '标准存储',
                    description: '适合频繁访问的热点数据',
                    features: ['毫秒级访问', '99.99%可用性', '适合网站、应用'],
                    price: '¥0.12/GB/月',
                },
                {
                    name: '低频访问',
                    description: '适合不频繁访问但需要快速获取的数据',
                    features: ['毫秒级访问', '较低存储成本', '适合备份、归档'],
                    price: '¥0.08/GB/月',
                },
                {
                    name: '归档存储',
                    description: '适合长期保存的归档数据',
                    features: ['超低成本', '分钟级恢复', '适合合规、备份'],
                    price: '¥0.03/GB/月',
                },
                {
                    name: '冷归档',
                    description: '适合极少访问的冷数据',
                    features: ['极低成本', '小时级恢复', '适合长期归档'],
                    price: '¥0.01/GB/月',
                },
            ],

            useCases: [
                {
                    title: '网站和应用',
                    description: '存储网站静态资源、用户上传文件',
                    icon: Globe,
                },
                {
                    title: '数据备份',
                    description: '企业数据备份和灾难恢复',
                    icon: Shield,
                },
                {
                    title: '内容分发',
                    description: '配合CDN进行全球内容分发',
                    icon: Zap,
                },
                {
                    title: '大数据分析',
                    description: '存储大数据分析的原始数据',
                    icon: BarChart3,
                },
            ],
        },
        'zh-tw': {
            title: '物件儲存 OSS - 海量雲儲存服務 | CloudPro',
            description:
                '安全可靠的物件儲存OSS，提供海量、安全、低成本的雲儲存服務，支援多種儲存類型，適用於網站、行動應用、備份歸檔等場景。',
            keywords: '物件儲存,OSS,雲儲存,檔案儲存,資料備份',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '物件儲存 OSS',
                subtitle: '海量雲儲存服務',
                description: '提供安全、可靠、低成本的海量雲儲存服務，支援任意類型檔案的儲存和存取',
            },
            features: [
                {
                    icon: HardDrive,
                    title: '海量儲存',
                    description: '支援EB級別的儲存容量，無需擔心儲存空間不足',
                },
                {
                    icon: Shield,
                    title: '資料安全',
                    description: '99.999999999%的資料可靠性，多重備份保障資料安全',
                },
                {
                    icon: Zap,
                    title: '高效能存取',
                    description: '毫秒級回應，支援高併發存取，CDN加速全球存取',
                },
                {
                    icon: Globe,
                    title: '全球部署',
                    description: '多地域部署，就近儲存和存取，降低延遲',
                },
                {
                    icon: Code,
                    title: 'API介面',
                    description: '豐富的API介面和SDK，輕鬆整合到應用中',
                },
                {
                    icon: BarChart3,
                    title: '智慧分析',
                    description: '提供儲存分析和存取統計，優化儲存成本',
                },
            ],

            storageTypes: [
                {
                    name: '標準儲存',
                    description: '適合頻繁存取的熱點資料',
                    features: ['毫秒級存取', '99.99%可用性', '適合網站、應用'],
                    price: 'NT$3.6/GB/月',
                },
                {
                    name: '低頻存取',
                    description: '適合不頻繁存取但需要快速獲取的資料',
                    features: ['毫秒級存取', '較低儲存成本', '適合備份、歸檔'],
                    price: 'NT$2.4/GB/月',
                },
                {
                    name: '歸檔儲存',
                    description: '適合長期保存的歸檔資料',
                    features: ['超低成本', '分鐘級恢復', '適合合規、備份'],
                    price: 'NT$0.9/GB/月',
                },
                {
                    name: '冷歸檔',
                    description: '適合極少存取的冷資料',
                    features: ['極低成本', '小時級恢復', '適合長期歸檔'],
                    price: 'NT$0.3/GB/月',
                },
            ],

            useCases: [
                {
                    title: '網站和應用',
                    description: '儲存網站靜態資源、用戶上傳檔案',
                    icon: Globe,
                },
                {
                    title: '資料備份',
                    description: '企業資料備份和災難恢復',
                    icon: Shield,
                },
                {
                    title: '內容分發',
                    description: '配合CDN進行全球內容分發',
                    icon: Zap,
                },
                {
                    title: '大數據分析',
                    description: '儲存大數據分析的原始資料',
                    icon: BarChart3,
                },
            ],
        },
        en: {
            title: 'Object Storage OSS - Massive Cloud Storage Service | CloudPro',
            description:
                'Secure and reliable Object Storage OSS providing massive, secure, low-cost cloud storage service with multiple storage types for websites, mobile apps, backup and archival scenarios.',
            keywords: 'object storage,OSS,cloud storage,file storage,data backup',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Object Storage OSS',
                subtitle: 'Massive Cloud Storage Service',
                description:
                    'Secure, reliable, and cost-effective massive cloud storage service supporting storage and access of any file type',
            },
            features: [
                {
                    icon: HardDrive,
                    title: 'Massive Storage',
                    description:
                        'Support EB-level storage capacity without worrying about storage space',
                },
                {
                    icon: Shield,
                    title: 'Data Security',
                    description:
                        '99.999999999% data reliability with multiple backups ensuring data security',
                },
                {
                    icon: Zap,
                    title: 'High Performance Access',
                    description:
                        'Millisecond response with high concurrency support and CDN acceleration for global access',
                },
                {
                    icon: Globe,
                    title: 'Global Deployment',
                    description:
                        'Multi-region deployment for nearby storage and access, reducing latency',
                },
                {
                    icon: Code,
                    title: 'API Interface',
                    description:
                        'Rich API interfaces and SDKs for easy integration into applications',
                },
                {
                    icon: BarChart3,
                    title: 'Smart Analytics',
                    description:
                        'Provide storage analytics and access statistics to optimize storage costs',
                },
            ],

            storageTypes: [
                {
                    name: 'Standard Storage',
                    description: 'For frequently accessed hot data',
                    features: ['Millisecond access', '99.99% availability', 'For websites, apps'],
                    price: '$0.02/GB/month',
                },
                {
                    name: 'Infrequent Access',
                    description: 'For infrequently accessed but quickly retrievable data',
                    features: ['Millisecond access', 'Lower storage cost', 'For backup, archival'],
                    price: '$0.012/GB/month',
                },
                {
                    name: 'Archive Storage',
                    description: 'For long-term archival data',
                    features: ['Ultra-low cost', 'Minute-level recovery', 'For compliance, backup'],
                    price: '$0.004/GB/month',
                },
                {
                    name: 'Cold Archive',
                    description: 'For rarely accessed cold data',
                    features: [
                        'Extremely low cost',
                        'Hour-level recovery',
                        'For long-term archival',
                    ],

                    price: '$0.0015/GB/month',
                },
            ],

            useCases: [
                {
                    title: 'Websites & Apps',
                    description: 'Store website static resources and user uploaded files',
                    icon: Globe,
                },
                {
                    title: 'Data Backup',
                    description: 'Enterprise data backup and disaster recovery',
                    icon: Shield,
                },
                {
                    title: 'Content Distribution',
                    description: 'Global content distribution with CDN',
                    icon: Zap,
                },
                {
                    title: 'Big Data Analytics',
                    description: 'Store raw data for big data analytics',
                    icon: BarChart3,
                },
            ],
        },
    };

    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>

            {/* Storage Types */}
            <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'
                                  ? '儲存類型'
                                  : 'Storage Types'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '根据访问频率选择最经济的存储类型'
                                : currentLang === 'zh-tw'
                                  ? '根據存取頻率選擇最經濟的儲存類型'
                                  : 'Choose the most economical storage type based on access frequency'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {t.storageTypes.map((type, index) => (
                            <div
                                key={index}
                                className="bg-gradient-to-br from-amber-50 to-yellow-50 p-6 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-3">
                                    {type.name}
                                </h3>
                                <p className="text-amber-700 mb-4 text-sm">{type.description}</p>

                                <div className="mb-4">
                                    {type.features.map((feature, featureIndex) => (
                                        <div key={featureIndex} className="flex items-center mb-2">
                                            <Check className="w-3 h-3 text-green-500 mr-2 flex-shrink-0" />

                                            <span className="text-amber-700 text-sm">
                                                {feature}
                                            </span>
                                        </div>
                                    ))}
                                </div>

                                <div className="text-center">
                                    <div className="text-2xl font-bold text-amber-600 mb-2">
                                        {type.price}
                                    </div>
                                    <button className="w-full bg-gradient-to-r from-amber-500 to-yellow-500 text-white py-2 px-4 rounded-lg text-sm font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200">
                                        {currentLang === 'zh'
                                            ? '选择'
                                            : currentLang === 'zh-tw'
                                              ? '選擇'
                                              : 'Select'}
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Use Cases */}
            <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'
                                  ? '應用場景'
                                  : 'Use Cases'}
                        </h2>
                        <p className="text-xl text-amber-700">
                            {currentLang === 'zh'
                                ? '适用于各种业务场景的存储需求'
                                : currentLang === 'zh-tw'
                                  ? '適用於各種業務場景的儲存需求'
                                  : 'Storage solutions for various business scenarios'}
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {t.useCases.map((useCase, index) => {
                            const IconComponent = useCase.icon;
                            return (
                                <div
                                    key={index}
                                    className="text-center p-8 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">
                                        <IconComponent className="w-8 h-8 text-white" />
                                    </div>
                                    <h3 className="text-xl font-semibold text-amber-900 mb-4">
                                        {useCase.title}
                                    </h3>
                                    <p className="text-amber-700 leading-relaxed">
                                        {useCase.description}
                                    </p>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 bg-gradient-to-r from-amber-900 to-yellow-800 text-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <h2 className="text-3xl md:text-4xl font-bold mb-6">
                        {currentLang === 'zh'
                            ? '立即开始使用对象存储'
                            : currentLang === 'zh-tw'
                              ? '立即開始使用物件儲存'
                              : 'Start Using Object Storage Now'}
                    </h2>
                    <p className="text-xl text-yellow-100 mb-8 max-w-2xl mx-auto">
                        {currentLang === 'zh'
                            ? '注册即可获得免费存储额度，体验高性能云存储服务'
                            : currentLang === 'zh-tw'
                              ? '註冊即可獲得免費儲存額度，體驗高效能雲儲存服務'
                              : 'Register now to get free storage quota and experience high-performance cloud storage'}
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <button className="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-200 transform hover:scale-105">
                            {currentLang === 'zh'
                                ? '免费试用'
                                : currentLang === 'zh-tw'
                                  ? '免費試用'
                                  : 'Free Trial'}
                        </button>
                        <button className="border-2 border-white text-white hover:bg-white hover:text-amber-900 px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-200">
                            {currentLang === 'zh'
                                ? '查看文档'
                                : currentLang === 'zh-tw'
                                  ? '查看文件'
                                  : 'View Documentation'}
                        </button>
                    </div>
                </div>
            </section>

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