'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SEOHead from '../../../components/SEOHead';
// 移除不再需要的import

// Team member icons
const teamIcons = {
    ceo: (
        <svg
            className="w-12 h-12 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="arefwy3"
        >
            <path
                fillRule="evenodd"
                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                clipRule="evenodd"
                data-oid="el5tl.i"
            />
        </svg>
    ),

    cto: (
        <svg
            className="w-12 h-12 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="cum4rol"
        >
            <path
                fillRule="evenodd"
                d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
                clipRule="evenodd"
                data-oid="rz0ktpq"
            />
        </svg>
    ),

    coo: (
        <svg
            className="w-12 h-12 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="-:xudau"
        >
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="w17754c" />
        </svg>
    ),
};

// Value icons
const valueIcons = [
    <svg key="check" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="40p0z-e">
        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="4i79syw" />
    </svg>,
    <svg key="lightning" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="7w4b8xs">
        <path
            fillRule="evenodd"
            d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
            clipRule="evenodd"
            data-oid="ayzcnrl"
        />
    </svg>,
    <svg key="shield" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="ak_01xr">
        <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="xq8b:y7"
        />
    </svg>,
    <svg key="users" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="tyu:xvm">
        <path
            d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
            data-oid="y-8jfh9"
        />
    </svg>,
];

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

export default function AboutPage({ params }: AboutPageProps) {
    const currentLang = params.locale || 'zh-CN';
    const [translations, setTranslations] = useState<any>({});
    const [commonTranslations, setCommonTranslations] = useState<any>({});
    const [loading, setLoading] = useState(true);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [activeTab, setActiveTab] = useState('intro');

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

                if (aboutRes.ok && commonRes.ok) {
                    const aboutData = await aboutRes.json();
                    const commonData = await commonRes.json();

                    setTranslations(aboutData);
                    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="ntavjq3"
            >
                <div className="text-center" data-oid="p93wv2x">
                    <div
                        className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
                        data-oid="86hpq18"
                    ></div>
                    <p className="text-gray-600" data-oid="zjc0wib">
                        Loading about us...
                    </p>
                </div>
            </div>
        );
    }

    const t = translations;
    const common = commonTranslations;

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

            <div
                className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="l3w2iju"
            >
                {/* Navigation */}
                <nav
                    className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
                    data-oid="c8lwtmj"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="o:exg:4">
                        <div className="flex justify-between items-center h-16" data-oid="qt96q75">
                            {/* Logo */}
                            <Link
                                href={`/${currentLang}`}
                                className="flex items-center space-x-2"
                                data-oid="3hv2g39"
                            >
                                <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="48y0jv-"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="ojp:e.d"
                                    >
                                        <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="e5y3qvq"
                                        />
                                    </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=".202hmi"
                                >
                                    CloudTech
                                </span>
                            </Link>

                            {/* Desktop Navigation */}
                            <div
                                className="hidden md:flex items-center space-x-8"
                                data-oid="1-rd:te"
                            >
                                <Link
                                    href={`/${currentLang}`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="i_jy8ex"
                                >
                                    {common.nav?.home}
                                </Link>
                                <Link
                                    href={`/${currentLang}/products`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="5j54ufc"
                                >
                                    {common.nav?.products}
                                </Link>
                                <Link
                                    href={`/${currentLang}/news`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="qza1-8y"
                                >
                                    {common.nav?.news}
                                </Link>
                                <Link
                                    href={`/${currentLang}/support`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="zbf_oen"
                                >
                                    {common.nav?.support}
                                </Link>
                                <Link
                                    href={`/${currentLang}/about`}
                                    className="text-blue-600 font-medium"
                                    data-oid="4h4ecnc"
                                >
                                    {common.nav?.about}
                                </Link>
                            </div>

                            {/* Language Switcher & Mobile Menu */}
                            <div className="flex items-center space-x-4" data-oid="15b57-b">
                                <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="-.f4z5b"
                                    title="选择语言"
                                >
                                    <option value="zh-CN" data-oid="utzg:h1">
                                        简体中文
                                    </option>
                                    <option value="zh-TW" data-oid=":7z2.98">
                                        繁體中文
                                    </option>
                                    <option value="en" data-oid="bm.0tuo">
                                        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="53ciiq9"
                                >
                                    <svg
                                        className="w-5 h-5"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="wv-7:x3"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                            data-oid="5tm48nn"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>

                        {/* Mobile Navigation */}
                        {isMenuOpen && (
                            <div
                                className="md:hidden py-4 border-t border-white/20"
                                data-oid="i6lsys4"
                            >
                                <div className="flex flex-col space-y-2" data-oid="s5dv7_e">
                                    <Link
                                        href="/"
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="c3wfs_m"
                                    >
                                        {common.nav?.home}
                                    </Link>
                                    <Link
                                        href="/products"
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="2_cz9a:"
                                    >
                                        {common.nav?.products}
                                    </Link>
                                    <Link
                                        href="/news"
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="8nxuu.e"
                                    >
                                        {common.nav?.news}
                                    </Link>
                                    <Link
                                        href="/support"
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="oov4wpi"
                                    >
                                        {common.nav?.support}
                                    </Link>
                                    <Link
                                        href="/about"
                                        className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
                                        data-oid="mo.fffw"
                                    >
                                        {common.nav?.about}
                                    </Link>
                                </div>
                            </div>
                        )}
                    </div>
                </nav>

                {/* Hero Section */}
                <div
                    className="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-24 overflow-hidden"
                    data-oid="nmknnmk"
                >
                    {/* Background decorative elements */}
                    <div className="absolute inset-0 opacity-10" data-oid="1ui5m2i">
                        <div
                            className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
                            data-oid="whtzay4"
                        ></div>
                        <div
                            className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
                            data-oid="c11hjvl"
                        ></div>
                        <div
                            className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
                            data-oid="05i1c.i"
                        ></div>
                        <div
                            className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
                            data-oid="dwa.34n"
                        ></div>
                    </div>

                    <div
                        className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="v-xv8bk"
                    >
                        <h1
                            className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
                            data-oid="u9m6y_8"
                        >
                            {t.title}
                        </h1>
                        <p
                            className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
                            data-oid="1n_mcsa"
                        >
                            {t.subtitle}
                        </p>

                        {/* Stats */}
                        <div
                            className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12"
                            data-oid="dvbq0.r"
                        >
                            <div className="text-center" data-oid=":tsvzxi">
                                <div
                                    className="text-3xl md:text-4xl font-bold mb-2"
                                    data-oid="qcjwp_h"
                                >
                                    2018
                                </div>
                                <div className="text-white/80" data-oid="uama652">
                                    {currentLang === 'en' ? 'Founded' : '成立年份'}
                                </div>
                            </div>
                            <div className="text-center" data-oid="fxm_99y">
                                <div
                                    className="text-3xl md:text-4xl font-bold mb-2"
                                    data-oid="ri1h_tu"
                                >
                                    100K+
                                </div>
                                <div className="text-white/80" data-oid="qxfh9ao">
                                    {currentLang === 'en' ? 'Customers' : '客户数量'}
                                </div>
                            </div>
                            <div className="text-center" data-oid="dcpq2i-">
                                <div
                                    className="text-3xl md:text-4xl font-bold mb-2"
                                    data-oid="rb5gde6"
                                >
                                    99.9%
                                </div>
                                <div className="text-white/80" data-oid="v8r14qm">
                                    {currentLang === 'en' ? 'Uptime' : '可用性'}
                                </div>
                            </div>
                            <div className="text-center" data-oid="bx4izfi">
                                <div
                                    className="text-3xl md:text-4xl font-bold mb-2"
                                    data-oid="ob1lf6u"
                                >
                                    24/7
                                </div>
                                <div className="text-white/80" data-oid="68.dfte">
                                    {currentLang === 'en' ? 'Support' : '技术支持'}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Company Info Tabs */}
                <div className="py-20" data-oid="8b7shn:">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="dexnb28">
                        {/* Tab Navigation */}
                        <div
                            className="flex flex-wrap justify-center gap-4 mb-12"
                            data-oid="nr2.d4o"
                        >
                            {['intro', 'mission', 'vision', 'values'].map((tab) => (
                                <button
                                    key={tab}
                                    onClick={() => setActiveTab(tab)}
                                    className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
                                        activeTab === tab
                                            ? 'bg-indigo-500 text-white shadow-lg scale-105'
                                            : 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
                                    }`}
                                    data-oid="h0g70ow"
                                >
                                    {t.company?.[tab]?.title}
                                </button>
                            ))}
                        </div>

                        {/* Tab Content */}
                        <div className="max-w-4xl mx-auto" data-oid="x4t1n8g">
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
                                data-oid="-lo_s53"
                            >
                                <h2
                                    className="text-3xl font-bold text-gray-900 mb-6 text-center"
                                    data-oid="ps_j2f5"
                                >
                                    {t.company?.[activeTab]?.title}
                                </h2>
                                {activeTab === 'values' ? (
                                    <div
                                        className="grid grid-cols-1 md:grid-cols-2 gap-6"
                                        data-oid="..m1wa5"
                                    >
                                        {t.company?.values?.items?.map(
                                            (value: string, index: number) => (
                                                <div
                                                    key={index}
                                                    className="flex items-start space-x-4 p-4 bg-white/50 rounded-2xl"
                                                    data-oid="iek84ex"
                                                >
                                                    <div
                                                        className="w-12 h-12 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0"
                                                        data-oid=".35r-sh"
                                                    >
                                                        {valueIcons[index]}
                                                    </div>
                                                    <div data-oid="wpqec5x">
                                                        <p
                                                            className="text-gray-700 font-medium leading-relaxed"
                                                            data-oid="e_id_9q"
                                                        >
                                                            {value}
                                                        </p>
                                                    </div>
                                                </div>
                                            ),
                                        )}
                                    </div>
                                ) : (
                                    <p
                                        className="text-gray-600 text-lg leading-relaxed text-center"
                                        data-oid="cn.uz9j"
                                    >
                                        {t.company?.[activeTab]?.content}
                                    </p>
                                )}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Team Section */}
                <div
                    className="py-20 bg-gradient-to-b from-white/50 to-transparent"
                    data-oid="5uxk:8g"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="clvtmxw">
                        <div className="text-center mb-16" data-oid="4edm371">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="59_3lab"
                            >
                                {t.team?.title}
                            </h2>
                            <p
                                className="text-xl text-gray-600 max-w-3xl mx-auto"
                                data-oid="-umt-zl"
                            >
                                {currentLang === 'en'
                                    ? "Meet the passionate team behind CloudTech's success"
                                    : '认识CloudTech成功背后的热情团队'}
                            </p>
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="_9cnf8d">
                            {Object.entries(t.team?.members || {}).map(
                                ([key, member]: [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 text-center hover:scale-105"
                                        data-oid="rfli0zt"
                                    >
                                        <div
                                            className="w-32 h-32 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300"
                                            data-oid="wup23n4"
                                        >
                                            {teamIcons[key as keyof typeof teamIcons]}
                                        </div>
                                        <h3
                                            className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-indigo-600 transition-colors"
                                            data-oid="1e8tj_s"
                                        >
                                            {member.name}
                                        </h3>
                                        <p
                                            className="text-indigo-600 font-medium mb-4 text-lg"
                                            data-oid="-s2ky.s"
                                        >
                                            {member.position}
                                        </p>
                                        <p
                                            className="text-gray-600 leading-relaxed"
                                            data-oid="sf59dbc"
                                        >
                                            {member.bio}
                                        </p>

                                        {/* Social Links */}
                                        <div
                                            className="flex justify-center space-x-4 mt-6"
                                            data-oid="5_0lwaf"
                                        >
                                            <a
                                                href="#"
                                                className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-indigo-100 transition-colors"
                                                data-oid="zj39uhu"
                                            >
                                                <svg
                                                    className="w-5 h-5 text-gray-600"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="sh:dvfg"
                                                >
                                                    <path
                                                        fillRule="evenodd"
                                                        d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                                                        clipRule="evenodd"
                                                        data-oid="8evj7sz"
                                                    />
                                                </svg>
                                            </a>
                                            <a
                                                href="#"
                                                className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-indigo-100 transition-colors"
                                                data-oid="ariwqa-"
                                            >
                                                <svg
                                                    className="w-5 h-5 text-gray-600"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="gxh1k5."
                                                >
                                                    <path
                                                        d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
                                                        data-oid="5_.ak8e"
                                                    />
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                ),
                            )}
                        </div>
                    </div>
                </div>

                {/* Timeline Section */}
                <div className="py-20" data-oid="vcxfi09">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="-..fohn">
                        <div className="text-center mb-16" data-oid="rove_:9">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="wwokhj1"
                            >
                                {t.milestones?.title}
                            </h2>
                            <p className="text-xl text-gray-600" data-oid="ympbjy3">
                                {currentLang === 'en'
                                    ? 'Our journey of innovation and growth'
                                    : '我们的创新与成长之路'}
                            </p>
                        </div>
                        <div className="relative" data-oid="nj.oaa:">
                            <div
                                className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-indigo-400 to-purple-600 rounded-full"
                                data-oid="a94f89h"
                            ></div>
                            <div className="space-y-12" data-oid="uiffjcd">
                                {Object.entries(t.milestones?.events || {}).map(
                                    ([year, event], index) => (
                                        <div
                                            key={year}
                                            className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
                                            data-oid="t4es30d"
                                        >
                                            <div
                                                className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8 text-left'}`}
                                                data-oid="-5mp4qk"
                                            >
                                                <div
                                                    className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/20 hover:shadow-xl transition-shadow duration-300"
                                                    data-oid="ffeq9.p"
                                                >
                                                    <h3
                                                        className="text-2xl font-bold text-indigo-600 mb-3"
                                                        data-oid="tty2r2x"
                                                    >
                                                        {year}
                                                    </h3>
                                                    <p
                                                        className="text-gray-600 leading-relaxed"
                                                        data-oid="-vtnqaj"
                                                    >
                                                        {String(event)}
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="relative z-10" data-oid="0xe7_al">
                                                <div
                                                    className="w-6 h-6 bg-white border-4 border-indigo-500 rounded-full shadow-lg"
                                                    data-oid="huam73s"
                                                ></div>
                                            </div>
                                            <div className="w-1/2" data-oid="kft8wu:"></div>
                                        </div>
                                    ),
                                )}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Contact Section */}
                <div
                    className="py-20 bg-gradient-to-b from-white/50 to-transparent"
                    data-oid="osvm-o6"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="rarqm32">
                        <div
                            className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
                            data-oid="755:vd:"
                        >
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center"
                                data-oid="r.mljut"
                            >
                                {t.contact?.title}
                            </h2>
                            <div
                                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
                                data-oid="l3kr:7_"
                            >
                                <div className="text-center group" data-oid="j-z-m2s">
                                    <div
                                        className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
                                        data-oid="nmoj5-l"
                                    >
                                        <svg
                                            className="w-8 h-8 text-white"
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid="ileb95n"
                                        >
                                            <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="yh:6wvz"
                                            />
                                        </svg>
                                    </div>
                                    <h3
                                        className="font-semibold text-gray-900 mb-2"
                                        data-oid="eg1v1.6"
                                    >
                                        {currentLang === 'en' ? 'Address' : '地址'}
                                    </h3>
                                    <p
                                        className="text-sm text-gray-600 leading-relaxed"
                                        data-oid="dc.zo6y"
                                    >
                                        {t.contact?.address}
                                    </p>
                                </div>
                                <div className="text-center group" data-oid="wt1rlzd">
                                    <div
                                        className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
                                        data-oid="xk-1_-m"
                                    >
                                        <svg
                                            className="w-8 h-8 text-white"
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid="omdqrwu"
                                        >
                                            <path
                                                d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"
                                                data-oid="vkggbq-"
                                            />
                                        </svg>
                                    </div>
                                    <h3
                                        className="font-semibold text-gray-900 mb-2"
                                        data-oid="y.s6pu4"
                                    >
                                        {currentLang === 'en' ? 'Phone' : '电话'}
                                    </h3>
                                    <p className="text-sm text-gray-600" data-oid="8g::x9u">
                                        {t.contact?.phone}
                                    </p>
                                </div>
                                <div className="text-center group" data-oid="0g14w-u">
                                    <div
                                        className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
                                        data-oid="mppu3xa"
                                    >
                                        <svg
                                            className="w-8 h-8 text-white"
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid=".guh555"
                                        >
                                            <path
                                                d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
                                                data-oid="ut43j0i"
                                            />

                                            <path
                                                d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                                                data-oid="8q-xhhd"
                                            />
                                        </svg>
                                    </div>
                                    <h3
                                        className="font-semibold text-gray-900 mb-2"
                                        data-oid=".-2zonq"
                                    >
                                        {currentLang === 'en' ? 'Email' : '邮箱'}
                                    </h3>
                                    <p className="text-sm text-gray-600" data-oid="n40859-">
                                        {t.contact?.email}
                                    </p>
                                </div>
                                <div className="text-center group" data-oid="drpyqd:">
                                    <div
                                        className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
                                        data-oid="e_pie_i"
                                    >
                                        <svg
                                            className="w-8 h-8 text-white"
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid="u3rxbe4"
                                        >
                                            <path
                                                fillRule="evenodd"
                                                d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.559-.499-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.559.499.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.497-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
                                                clipRule="evenodd"
                                                data-oid="mmeb0sx"
                                            />
                                        </svg>
                                    </div>
                                    <h3
                                        className="font-semibold text-gray-900 mb-2"
                                        data-oid="3ng6tfr"
                                    >
                                        {currentLang === 'en' ? 'Website' : '网站'}
                                    </h3>
                                    <p className="text-sm text-gray-600" data-oid="i4r92ir">
                                        {t.contact?.website}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Call to Action */}
                <div
                    className="py-20 bg-gradient-to-r from-indigo-500 to-purple-600"
                    data-oid="fdz76dc"
                >
                    <div
                        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="natnu5b"
                    >
                        <h2
                            className="text-3xl md:text-4xl font-bold text-white mb-6"
                            data-oid="d9b4upj"
                        >
                            {currentLang === 'en'
                                ? 'Ready to Transform Your Business?'
                                : '准备转型您的业务？'}
                        </h2>
                        <p
                            className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
                            data-oid="0ic043q"
                        >
                            {currentLang === 'en'
                                ? 'Join thousands of companies that trust CloudTech for their cloud computing needs.'
                                : '加入信任CloudTech云计算服务的数千家公司。'}
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="oqgkj55"
                        >
                            <button
                                className="px-8 py-4 bg-white text-indigo-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="eggec8:"
                            >
                                {currentLang === 'en' ? 'Get Started Today' : '立即开始'}
                            </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="h2oy4no"
                            >
                                {currentLang === 'en' ? 'Contact Us' : '联系我们'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <footer className="bg-gray-900 text-white py-12" data-oid="qdub_zj">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="vdnul.9">
                        <div className="text-center" data-oid="2p7h3dw">
                            <div
                                className="flex items-center justify-center space-x-2 mb-4"
                                data-oid="-.8bivv"
                            >
                                <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="isgthwq"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="4xa8kvu"
                                    >
                                        <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="ktiu:72"
                                        />
                                    </svg>
                                </div>
                                <span className="text-xl font-bold" data-oid="98-jbnq">
                                    CloudTech
                                </span>
                            </div>
                            <p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="ss9ipwq">
                                {common.footer?.company_desc}
                            </p>
                            <p className="text-gray-400" data-oid="w_nfup6">
                                {common.footer?.copyright}
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
