'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../components/Navigation';
import { HeroBanner } from '../components/Banner';
import { Footer } from '../components/Footer';
import { Head } from '../components/Head';

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

    const translations = {
        zh: {
            title: '云服务器代理商 - 专业云计算解决方案',
            description:
                '领先的云服务器代理商，提供阿里云、腾讯云、华为云等顶级云服务商的产品与服务，助力企业数字化转型。专业技术支持，7x24小时服务。',
            keywords:
                '云服务器,云计算,阿里云代理,腾讯云代理,华为云代理,云数据库,负载均衡,CDN加速,企业上云',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                news: '资讯',
                contact: '联系我们',
            },
            hero: {
                title: '专业云服务器解决方案',
                subtitle: '为您的业务提供稳定、高效、安全的云计算服务',
                description:
                    '我们是领先的云服务器代理商，提供全球顶级云服务商的产品与服务，助力企业数字化转型',
                cta: '立即咨询',
                demo: '产品演示',
            },
            features: {
                title: '为什么选择我们',
                items: [
                    {
                        title: '全球覆盖',
                        desc: '遍布全球的数据中心，确保低延迟高可用',
                    },
                    {
                        title: '专业服务',
                        desc: '7x24小时技术支持，专业团队保障',
                    },
                    {
                        title: '灵活配置',
                        desc: '按需配置，弹性扩展，成本可控',
                    },
                    {
                        title: '安全可靠',
                        desc: '企业级安全防护，数据安全有保障',
                    },
                ],
            },
            products: {
                title: '产品服务',
                items: [
                    {
                        name: '云服务器 ECS',
                        desc: '弹性计算服务，支持多种规格配置',
                        price: '¥99/月起',
                    },
                    {
                        name: '云数据库 RDS',
                        desc: '高可用关系型数据库服务',
                        price: '¥199/月起',
                    },
                    {
                        name: '负载均衡 SLB',
                        desc: '智能流量分发，提升应用可用性',
                        price: '¥299/月起',
                    },
                ],
            },
            footer: {
                company: '云服务器代理商',
                rights: '版权所有',
                contact: '联系方式: support@cloudreseller.com',
            },
        },
        'zh-tw': {
            title: '雲伺服器代理商 - 專業雲端運算解決方案',
            description:
                '領先的雲伺服器代理商，提供阿里雲、騰訊雲、華為雲等頂級雲服務商的產品與服務，助力企業數位化轉型。專業技術支援，7x24小時服務。',
            keywords:
                '雲伺服器,雲端運算,阿里雲代理,騰訊雲代理,華為雲代理,雲資料庫,負載平衡,CDN加速,企業上雲',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                news: '資訊',
                contact: '聯絡我們',
            },
            hero: {
                title: '專業雲伺服器解決方案',
                subtitle: '為您的業務提供穩定、高效、安全的雲端運算服務',
                description:
                    '我們是領先的雲伺服器代理商，提供全球頂級雲服務商的產品與服務，助力企業數位化轉型',
                cta: '立即諮詢',
                demo: '產品演示',
            },
            features: {
                title: '為什麼選擇我們',
                items: [
                    {
                        title: '全球覆蓋',
                        desc: '遍佈全球的資料中心，確保低延遲高可用',
                    },
                    {
                        title: '專業服務',
                        desc: '7x24小時技術支援，專業團隊保障',
                    },
                    {
                        title: '靈活配置',
                        desc: '按需配置，彈性擴展，成本可控',
                    },
                    {
                        title: '安全可靠',
                        desc: '企業級安全防護，資料安全有保障',
                    },
                ],
            },
            products: {
                title: '產品服務',
                items: [
                    {
                        name: '雲伺服器 ECS',
                        desc: '彈性運算服務，支援多種規格配置',
                        price: 'NT$2,990/月起',
                    },
                    {
                        name: '雲資料庫 RDS',
                        desc: '高可用關聯式資料庫服務',
                        price: 'NT$5,990/月起',
                    },
                    {
                        name: '負載平衡 SLB',
                        desc: '智慧流量分發，提升應用可用性',
                        price: 'NT$8,990/月起',
                    },
                ],
            },
            footer: {
                company: '雲伺服器代理商',
                rights: '版權所有',
                contact: '聯絡方式: support@cloudreseller.com',
            },
        },
        en: {
            title: 'Cloud Server Reseller - Professional Cloud Solutions',
            description:
                'Leading cloud server reseller providing Alibaba Cloud, Tencent Cloud, Huawei Cloud and other top-tier cloud services. Professional technical support with 24/7 service for enterprise digital transformation.',
            keywords:
                'cloud server,cloud computing,alibaba cloud reseller,tencent cloud reseller,huawei cloud reseller,cloud database,load balancer,CDN acceleration,enterprise cloud',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                news: 'News',
                contact: 'Contact',
            },
            hero: {
                title: 'Professional Cloud Server Solutions',
                subtitle:
                    'Stable, Efficient, and Secure Cloud Computing Services for Your Business',
                description:
                    'We are a leading cloud server reseller, providing products and services from top global cloud providers to accelerate your digital transformation',
                cta: 'Get Started',
                demo: 'View Demo',
            },
            features: {
                title: 'Why Choose Us',
                items: [
                    {
                        title: 'Global Coverage',
                        desc: 'Worldwide data centers ensuring low latency and high availability',
                    },
                    {
                        title: 'Professional Service',
                        desc: '24/7 technical support with professional team guarantee',
                    },
                    {
                        title: 'Flexible Configuration',
                        desc: 'On-demand configuration, elastic scaling, cost-effective',
                    },
                    {
                        title: 'Secure & Reliable',
                        desc: 'Enterprise-grade security protection, data safety guaranteed',
                    },
                ],
            },
            products: {
                title: 'Products & Services',
                items: [
                    {
                        name: 'Cloud Server ECS',
                        desc: 'Elastic Compute Service with multiple specifications',
                        price: 'From $15/month',
                    },
                    {
                        name: 'Cloud Database RDS',
                        desc: 'High-availability relational database service',
                        price: 'From $29/month',
                    },
                    {
                        name: 'Load Balancer SLB',
                        desc: 'Intelligent traffic distribution for better availability',
                        price: 'From $45/month',
                    },
                ],
            },
            footer: {
                company: 'Cloud Server Reseller',
                rights: 'All Rights Reserved',
                contact: 'Contact: support@cloudreseller.com',
            },
        },
    };

    const t = translations[currentLang];

    useEffect(() => {
        // Auto-detect language from browser or URL
        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 - TDK Management */}
            <Head
                title={t.title}
                description={t.description}
                keywords={t.keywords}
                currentLang={currentLang}
            />

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

            {/* Hero Banner with Carousel */}
            <HeroBanner currentLang={currentLang} translations={translations} />

            {/* Features Section */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 className="text-3xl md:text-4xl font-bold text-center text-amber-900 mb-16">
                        {t.features.title}
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {t.features.items.map((feature, 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-shadow border border-amber-200"
                            >
                                <div className="w-12 h-12 bg-gradient-to-r from-yellow-400 to-amber-500 rounded-lg mb-6 flex items-center justify-center">
                                    <div className="w-6 h-6 bg-white rounded"></div>
                                </div>
                                <h3 className="text-xl font-semibold text-amber-900 mb-4">
                                    {feature.title}
                                </h3>
                                <p className="text-amber-700">{feature.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Products Section */}
            <section className="py-20 bg-gradient-to-br from-amber-900 to-yellow-800">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 className="text-3xl md:text-4xl font-bold text-center text-yellow-100 mb-16">
                        {t.products.title}
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {t.products.items.map((product, index) => (
                            <div
                                key={index}
                                className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:scale-105"
                            >
                                <h3 className="text-2xl font-semibold text-amber-900 mb-4">
                                    {product.name}
                                </h3>
                                <p className="text-amber-700 mb-6">{product.desc}</p>
                                <div className="text-3xl font-bold text-yellow-600 mb-6">
                                    {product.price}
                                </div>
                                <button className="w-full bg-gradient-to-r from-yellow-500 to-amber-500 text-white py-3 rounded-lg font-semibold hover:from-yellow-600 hover:to-amber-600 transition-all">
                                    {currentLang === 'zh' ? '了解更多' : 'Learn More'}
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

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