'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SEOHead from '../../../components/SEOHead';

// Product icons mapping
const productIcons = {
    ecs: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid=":qi_wdn"
        >
            <path
                d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                data-oid="e7ot:id"
            />
        </svg>
    ),

    rds: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="f1.4ipz"
        >
            <path
                d="M3 4a1 1 0 000 2v9a2 2 0 002 2h6a2 2 0 002-2V6a1 1 0 100-2H3zm3 2h2v2H6V6zm0 4h2v2H6v-2zm2 4H6v2h2v-2z"
                data-oid="g-ib6xn"
            />
        </svg>
    ),

    oss: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="ab3d_kg"
        >
            <path
                fillRule="evenodd"
                d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM3 7a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7zM4 9a1 1 0 011-1h6a1 1 0 110 2H5a1 1 0 01-1-1z"
                clipRule="evenodd"
                data-oid="ss7atzd"
            />
        </svg>
    ),

    cdn: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="3ovp.4t"
        >
            <path
                fillRule="evenodd"
                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                clipRule="evenodd"
                data-oid="naqq2-5"
            />
        </svg>
    ),

    waf: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="mnio4tf"
        >
            <path
                fillRule="evenodd"
                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
                data-oid="am.c-50"
            />
        </svg>
    ),

    slb: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="qb5c3yy"
        >
            <path
                fillRule="evenodd"
                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
                clipRule="evenodd"
                data-oid="45zc5rm"
            />
        </svg>
    ),
};

// Category icons mapping
const categoryIcons = {
    compute: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="xkzp1-2"
        >
            <path
                d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                data-oid="mn-kjx-"
            />
        </svg>
    ),

    storage: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="ugd50qu"
        >
            <path
                d="M3 4a1 1 0 000 2v9a2 2 0 002 2h6a2 2 0 002-2V6a1 1 0 100-2H3zm3 2h2v2H6V6zm0 4h2v2H6v-2zm2 4H6v2h2v-2z"
                data-oid="49eea24"
            />
        </svg>
    ),

    network: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="ixq3zn3"
        >
            <path
                fillRule="evenodd"
                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                clipRule="evenodd"
                data-oid="x:410r4"
            />
        </svg>
    ),

    security: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid=":wppv:a"
        >
            <path
                fillRule="evenodd"
                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
                data-oid="fju.vt4"
            />
        </svg>
    ),
};

interface ProductsPageProps {
    params: { locale: string };
}

export default function ProductsPage({ params }: ProductsPageProps) {
    const currentLang = params.locale || 'zh-CN';
    const [translations, setTranslations] = useState<any>({});
    const [commonTranslations, setCommonTranslations] = useState<any>({});
    const [loading, setLoading] = useState(true);
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    useEffect(() => {
        const loadTranslations = async () => {
                    try {
            const [productsRes, commonRes] = await Promise.all([
                fetch(`/locales/${currentLang}/products.json`),
                fetch(`/locales/${currentLang}/common.json`),
            ]);

                const [productsData, commonData] = await Promise.all([
                    productsRes.json(),
                    commonRes.json(),
                ]);

                setTranslations(productsData);
                setCommonTranslations(commonData);
                setLoading(false);
            } catch (error) {
                console.error('Failed to load translations:', error);
                setLoading(false);
            }
        };

        loadTranslations();
    }, [currentLang]);

    if (loading) {
        return (
            <div
                className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="d_7085p"
            >
                <div className="text-center" data-oid="35alwf5">
                    <div
                        className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
                        data-oid="rce6i0p"
                    ></div>
                    <p className="text-gray-600" data-oid="2uh99nb">
                        Loading...
                    </p>
                </div>
            </div>
        );
    }

    const t = translations;
    const common = commonTranslations;

    // Filter products by category
    const filteredProducts =
        selectedCategory === 'all'
            ? Object.entries(t.products || {})
            : Object.entries(t.products || {}).filter(([key]) => {
                  // Map products to categories
                  const categoryMap: { [key: string]: string } = {
                      ecs: 'compute',
                      rds: 'storage',
                      oss: 'storage',
                      cdn: 'network',
                      waf: 'security',
                      slb: 'network',
                  };
                  return categoryMap[key] === selectedCategory;
              });

    return (
        <>
            <SEOHead
                page="products"
                locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
                canonicalUrl="/products"
                data-oid="dk89py."
            />

            <div
                className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="48v1z9x"
            >
                {/* Navigation */}
                <nav
                    className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
                    data-oid="e-1n5hd"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="49oqm7c">
                        <div className="flex justify-between items-center h-16" data-oid="9cyw84:">
                            {/* Logo */}
                            <Link
                                href={`/${currentLang}`}
                                className="flex items-center space-x-2"
                                data-oid="hep:8uu"
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="u54:lah"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid=".89px2n"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="yzyqwz9"
                                        />
                                    </svg>
                                </div>
                                <span
                                    className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                                    data-oid="r-_.a0q"
                                >
                                    CloudTech
                                </span>
                            </Link>

                            {/* Desktop Navigation */}
                            <div
                                className="hidden md:flex items-center space-x-8"
                                data-oid="ldm8wp9"
                            >
                                <Link
                                    href={`/${currentLang}`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="-a-d.0o"
                                >
                                    {common.nav?.home}
                                </Link>
                                <Link
                                    href={`/${currentLang}/products`}
                                    className="text-blue-600 font-medium"
                                    data-oid="qwqd661"
                                >
                                    {common.nav?.products}
                                </Link>
                                <Link
                                    href={`/${currentLang}/news`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="99fj8mq"
                                >
                                    {common.nav?.news}
                                </Link>
                                <Link
                                    href={`/${currentLang}/support`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="dbeilj5"
                                >
                                    {common.nav?.support}
                                </Link>
                                <Link
                                    href={`/${currentLang}/about`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="rgvel20"
                                >
                                    {common.nav?.about}
                                </Link>
                            </div>

                            {/* Language Switcher & Mobile Menu */}
                            <div className="flex items-center space-x-4" data-oid="i4gr:vh">
                                <select
                                    value={currentLang}
                                    onChange={(e) => {
                                        const newLocale = e.target.value;
                                        const currentPath = window.location.pathname;
                                        const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
                                        window.location.href = `/${newLocale}${pathWithoutLocale}`;
                                    }}
                                    className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    data-oid="f4d53bx"
                                >
                                    <option value="zh-CN" data-oid="4f7e5jj">
                                        简体中文
                                    </option>
                                    <option value="zh-TW" data-oid="kb_044q">
                                        繁體中文
                                    </option>
                                    <option value="en" data-oid="pvuz:49">
                                        English
                                    </option>
                                </select>

                                {/* Mobile menu button */}
                                <button
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                    className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
                                    data-oid=".ioh_z3"
                                >
                                    <svg
                                        className="w-5 h-5"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="u5jgylm"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                            data-oid="ufdwjsw"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>

                        {/* Mobile Navigation */}
                        {isMenuOpen && (
                            <div
                                className="md:hidden py-4 border-t border-white/20"
                                data-oid="socq7mr"
                            >
                                <div className="flex flex-col space-y-2" data-oid=":p1s4ni">
                                    <Link
                                        href={`/${currentLang}`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="nz1axx-"
                                    >
                                        {common.nav?.home}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/products`}
                                        className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
                                        data-oid="s3-07ud"
                                    >
                                        {common.nav?.products}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/news`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="7gzpfj5"
                                    >
                                        {common.nav?.news}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/support`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="j26hcas"
                                    >
                                        {common.nav?.support}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/about`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="bdc2uwh"
                                    >
                                        {common.nav?.about}
                                    </Link>
                                </div>
                            </div>
                        )}
                    </div>
                </nav>

                {/* Hero Section with Enhanced Design */}
                <div
                    className="relative bg-gradient-to-r from-blue-500 to-purple-600 text-white py-24 overflow-hidden"
                    data-oid="khrbt1l"
                >
                    {/* Background decorative elements */}
                    <div className="absolute inset-0 opacity-10" data-oid=":1vjr6a">
                        <div
                            className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
                            data-oid="b992g_9"
                        ></div>
                        <div
                            className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
                            data-oid="h1frtkx"
                        ></div>
                        <div
                            className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
                            data-oid="yxgf1:f"
                        ></div>
                        <div
                            className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
                            data-oid="3p1-gzm"
                        ></div>
                    </div>

                    <div
                        className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="7ocn0wz"
                    >
                        <h1
                            className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
                            data-oid="dudgix1"
                        >
                            {t.title}
                        </h1>
                        <p
                            className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
                            data-oid="7.0197b"
                        >
                            {t.subtitle}
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="dwqnwc."
                        >
                            <button
                                className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="4nph9xs"
                            >
                                {currentLang === 'en' ? 'Start Free Trial' : '免费试用'}
                            </button>
                            <button
                                className="px-8 py-4 bg-white/20 backdrop-blur-sm text-white rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-200"
                                data-oid="wuse411"
                            >
                                {currentLang === 'en' ? 'View Pricing' : '查看价格'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Category Filter */}
                <div className="py-8 bg-white/50" data-oid="w.pj186">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="tre:2jz">
                        <div className="flex flex-wrap justify-center gap-4" data-oid="00wpqmf">
                            <button
                                onClick={() => setSelectedCategory('all')}
                                className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
                                    selectedCategory === 'all'
                                        ? 'bg-blue-500 text-white shadow-lg scale-105'
                                        : 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
                                }`}
                                data-oid="e99snw5"
                            >
                                {currentLang === 'en' ? 'All Products' : '全部产品'}
                            </button>
                            {Object.entries(t.categories || {}).map(
                                ([key, category]: [string, any]) => (
                                    <button
                                        key={key}
                                        onClick={() => setSelectedCategory(key)}
                                        className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
                                            selectedCategory === key
                                                ? 'bg-blue-500 text-white shadow-lg scale-105'
                                                : 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
                                        }`}
                                        data-oid="xemqq0d"
                                    >
                                        {category.title}
                                    </button>
                                ),
                            )}
                        </div>
                    </div>
                </div>

                {/* Categories Overview */}
                <div
                    className="py-16 bg-gradient-to-b from-white/50 to-transparent"
                    data-oid="8v8iuh."
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="vjwey92">
                        <div className="text-center mb-12" data-oid="15fdg4.">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="yh0xnnp"
                            >
                                {currentLang === 'en' ? 'Service Categories' : '服务分类'}
                            </h2>
                            <p
                                className="text-xl text-gray-600 max-w-3xl mx-auto"
                                data-oid="8v04hg3"
                            >
                                {currentLang === 'en'
                                    ? 'Comprehensive cloud solutions covering all your business needs'
                                    : '全面的云计算解决方案，覆盖您的所有业务需求'}
                            </p>
                        </div>
                        <div
                            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
                            data-oid="_7hgpvf"
                        >
                            {Object.entries(t.categories || {}).map(
                                ([key, category]: [string, any]) => (
                                    <div
                                        key={key}
                                        className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105 cursor-pointer"
                                        onClick={() => setSelectedCategory(key)}
                                        data-oid="kp9v13a"
                                    >
                                        <div
                                            className="w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
                                            data-oid="7xqvqm-"
                                        >
                                            {categoryIcons[key as keyof typeof categoryIcons]}
                                        </div>
                                        <h3
                                            className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors"
                                            data-oid="566i96d"
                                        >
                                            {category.title}
                                        </h3>
                                        <p
                                            className="text-gray-600 leading-relaxed"
                                            data-oid="ylpxqjd"
                                        >
                                            {category.desc}
                                        </p>
                                    </div>
                                ),
                            )}
                        </div>
                    </div>
                </div>

                {/* Products Grid */}
                <div className="py-20" data-oid="yddey:h">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="c:_y0cq">
                        <div className="text-center mb-12" data-oid="sjnhrj3">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="zf5x.5u"
                            >
                                {selectedCategory === 'all'
                                    ? currentLang === 'en'
                                        ? 'All Products'
                                        : '全部产品'
                                    : t.categories?.[selectedCategory]?.title}
                            </h2>
                            <p className="text-xl text-gray-600" data-oid="gnmhiij">
                                {currentLang === 'en'
                                    ? 'Choose the right solution for your business'
                                    : '为您的业务选择合适的解决方案'}
                            </p>
                        </div>

                        <div
                            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                            data-oid="w_oo0l_"
                        >
                            {filteredProducts.map(([key, product]: [string, any]) => (
                                <div
                                    key={key}
                                    className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
                                    data-oid="0wnpmx5"
                                >
                                    <div
                                        className="w-20 h-20 bg-gradient-to-r from-blue-400 to-purple-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
                                        data-oid="low7y7r"
                                    >
                                        {productIcons[key as keyof typeof productIcons] || (
                                            <svg
                                                className="w-8 h-8 text-white"
                                                fill="currentColor"
                                                viewBox="0 0 20 20"
                                                data-oid="asjey_m"
                                            >
                                                <path
                                                    d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                                    data-oid="71wtan:"
                                                />
                                            </svg>
                                        )}
                                    </div>
                                    <h3
                                        className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-blue-600 transition-colors"
                                        data-oid="scwr4pc"
                                    >
                                        {product.name}
                                    </h3>
                                    <p
                                        className="text-gray-600 mb-6 leading-relaxed"
                                        data-oid="z2y7lw:"
                                    >
                                        {product.desc}
                                    </p>
                                    <div className="space-y-3 mb-8" data-oid="0c5c81p">
                                        {product.features?.map((feature: string, index: number) => (
                                            <div
                                                key={index}
                                                className="flex items-center space-x-3"
                                                data-oid="8huiubu"
                                            >
                                                <div
                                                    className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex-shrink-0"
                                                    data-oid="1ctccj_"
                                                ></div>
                                                <span
                                                    className="text-sm text-gray-700 font-medium"
                                                    data-oid="uh71cwc"
                                                >
                                                    {feature}
                                                </span>
                                            </div>
                                        ))}
                                    </div>
                                    <div className="flex space-x-3" data-oid="gwkycfm">
                                        <button
                                            className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                            data-oid="w:l_09i"
                                        >
                                            {common.hero?.learn || 'Learn More'}
                                        </button>
                                        <button
                                            className="px-6 py-3 bg-white border-2 border-blue-500 text-blue-500 rounded-2xl font-semibold hover:bg-blue-50 transition-all duration-200"
                                            data-oid="f:rt0qp"
                                        >
                                            {currentLang === 'en' ? 'Try' : '试用'}
                                        </button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Call to Action Section */}
                <div
                    className="py-20 bg-gradient-to-r from-blue-500 to-purple-600"
                    data-oid="x.9ic8e"
                >
                    <div
                        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="rd--0y8"
                    >
                        <h2
                            className="text-3xl md:text-4xl font-bold text-white mb-6"
                            data-oid="x6nwdf-"
                        >
                            {currentLang === 'en' ? 'Ready to Get Started?' : '准备开始了吗？'}
                        </h2>
                        <p
                            className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
                            data-oid="j_zelgx"
                        >
                            {currentLang === 'en'
                                ? 'Join thousands of companies already using our cloud solutions to transform their business.'
                                : '加入已经使用我们云解决方案转型业务的数千家公司。'}
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="0yweq9b"
                        >
                            <button
                                className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="kkwna:v"
                            >
                                {currentLang === 'en' ? 'Start Free Trial' : '开始免费试用'}
                            </button>
                            <button
                                className="px-8 py-4 bg-white/20 backdrop-blur-sm text-white rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-200"
                                data-oid="8q:3-gw"
                            >
                                {currentLang === 'en' ? 'Contact Sales' : '联系销售'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <footer className="bg-gray-900 text-white py-12" data-oid="--lvq4t">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="_-t2d6-">
                        <div className="text-center" data-oid="lc0w7rf">
                            <div
                                className="flex items-center justify-center space-x-2 mb-4"
                                data-oid="60c70n3"
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="-x6:sja"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="jnmdfe6"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="intquc9"
                                        />
                                    </svg>
                                </div>
                                <span className="text-xl font-bold" data-oid="fs8vzv0">
                                    CloudTech
                                </span>
                            </div>
                            <p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="6l9oa:c">
                                {common.footer?.company_desc}
                            </p>
                            <p className="text-gray-400" data-oid="e5jhu:7">
                                {common.footer?.copyright}
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
