'use client';

import { useState, useEffect } from 'react';
import SEOHead from '../../components/SEOHead';
import { useTranslation } from '../../lib/i18n';

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

export default function Page({ params }: PageProps) {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const { t, locale } = useTranslation('common');

    // Translations - 这些可以移到locales文件中
    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品与服务',
                news: '新闻资讯',
                support: '客户支持',
                about: '关于我们',
            },
            hero: {
                title: '云端创新，塑造未来',
                subtitle: '专业的云服务解决方案，助力企业数字化转型',
                cta: '立即体验',
                learn: '了解更多',
            },
            banner: {
                slide1: {
                    title: '智能云计算平台',
                    desc: '高性能、高可用的云基础设施服务',
                },
                slide2: {
                    title: '数据安全保障',
                    desc: '企业级安全防护，保障您的数据安全',
                },
                slide3: {
                    title: '全球化部署',
                    desc: '覆盖全球的CDN网络，极速访问体验',
                },
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品與服務',
                news: '新聞資訊',
                support: '客戶支持',
                about: '關於我們',
            },
            hero: {
                title: '雲端創新，塑造未來',
                subtitle: '專業的雲服務解決方案，助力企業數位化轉型',
                cta: '立即體驗',
                learn: '了解更多',
            },
            banner: {
                slide1: {
                    title: '智能雲計算平台',
                    desc: '高性能、高可用的雲基礎設施服務',
                },
                slide2: {
                    title: '數據安全保障',
                    desc: '企業級安全防護，保障您的數據安全',
                },
                slide3: {
                    title: '全球化部署',
                    desc: '覆蓋全球的CDN網絡，極速訪問體驗',
                },
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products & Services',
                news: 'News',
                support: 'Support',
                about: 'About Us',
            },
            hero: {
                title: 'Cloud Innovation, Shaping the Future',
                subtitle:
                    'Professional cloud service solutions for enterprise digital transformation',
                cta: 'Get Started',
                learn: 'Learn More',
            },
            banner: {
                slide1: {
                    title: 'Intelligent Cloud Platform',
                    desc: 'High-performance, highly available cloud infrastructure services',
                },
                slide2: {
                    title: 'Data Security Assurance',
                    desc: 'Enterprise-grade security protection for your data',
                },
                slide3: {
                    title: 'Global Deployment',
                    desc: 'Global CDN network coverage for ultra-fast access',
                },
            },
        },
    };

    const pageTranslations = translations[locale] || translations['zh-CN'];

    const bannerSlides = [
        {
            title: pageTranslations.banner.slide1.title,
            desc: pageTranslations.banner.slide1.desc,
            bg: 'from-blue-400 to-purple-500',
        },
        {
            title: pageTranslations.banner.slide2.title,
            desc: pageTranslations.banner.slide2.desc,
            bg: 'from-green-400 to-blue-500',
        },
        {
            title: pageTranslations.banner.slide3.title,
            desc: pageTranslations.banner.slide3.desc,
            bg: 'from-purple-400 to-pink-500',
        },
    ];

    // Auto-rotate banner
    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % bannerSlides.length);
        }, 5000);
        return () => clearInterval(timer);
    }, [bannerSlides.length]);

    const CloudIcon = () => (
        <div
            className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm"
            data-oid="q_s_7vr"
        >
            <svg
                className="w-8 h-8 text-white"
                fill="currentColor"
                viewBox="0 0 20 20"
                data-oid="zpuz.th"
            >
                <path
                    fillRule="evenodd"
                    d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z"
                    clipRule="evenodd"
                    data-oid="w7g80le"
                />
            </svg>
        </div>
    );

    return (
        <>
            <SEOHead
                page="home"
                locale={locale as 'zh-CN' | 'zh-TW' | 'en'}
                canonicalUrl="/"
                data-oid="2kb3iy4"
            />

            <div
                className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="754vlml"
            >
                {/* Navigation */}
                <nav
                    className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
                    data-oid="oo8f3v:"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="2sy44f_">
                        <div className="flex justify-between items-center h-16" data-oid=":x-lv6s">
                            {/* Logo */}
                            <div className="flex items-center space-x-2" data-oid="-lgiu0n">
                                <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="6pq7cx0"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="9p6jiq."
                                    >
                                        <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="h7z1961"
                                        />
                                    </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="ul6s_7i"
                                >
                                    CloudTech
                                </span>
                            </div>

                            {/* Desktop Navigation */}
                            <div
                                className="hidden md:flex items-center space-x-8"
                                data-oid="644:yow"
                            >
                                <a
                                    href={`/${locale}`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="qiz28pa"
                                >
                                    {pageTranslations.nav.home}
                                </a>
                                <a
                                    href={`/${locale}/products`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="5w-2mv7"
                                >
                                    {pageTranslations.nav.products}
                                </a>
                                <a
                                    href={`/${locale}/news`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="71-9w94"
                                >
                                    {pageTranslations.nav.news}
                                </a>
                                <a
                                    href={`/${locale}/support`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="nanlsmt"
                                >
                                    {pageTranslations.nav.support}
                                </a>
                                <a
                                    href={`/${locale}/about`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="gtxz3:k"
                                >
                                    {pageTranslations.nav.about}
                                </a>
                            </div>

                            {/* Language Switcher */}
                            <div className="flex items-center space-x-4" data-oid="c_q16qn">
                                <select
                                    value={locale}
                                    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=".t1o5x4"
                                >
                                    <option value="zh-CN" data-oid="9t_qlys">
                                        简体中文
                                    </option>
                                    <option value="zh-TW" data-oid="ebs_ihs">
                                        繁體中文
                                    </option>
                                    <option value="en" data-oid="ph939cg">
                                        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="7rfoavj"
                                >
                                    <svg
                                        className="w-5 h-5"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="hhotqt4"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                            data-oid="biosho:"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>

                        {/* Mobile Navigation */}
                        {isMenuOpen && (
                            <div
                                className="md:hidden py-4 border-t border-white/20"
                                data-oid="7kw-6e1"
                            >
                                <div className="flex flex-col space-y-2" data-oid="am.ub85">
                                    <a
                                        href={`/${locale}`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="6h2fb9g"
                                    >
                                        {pageTranslations.nav.home}
                                    </a>
                                    <a
                                        href={`/${locale}/products`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="tryjb9d"
                                    >
                                        {pageTranslations.nav.products}
                                    </a>
                                    <a
                                        href={`/${locale}/news`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="sihppiz"
                                    >
                                        {pageTranslations.nav.news}
                                    </a>
                                    <a
                                        href={`/${locale}/support`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="kx7ptup"
                                    >
                                        {pageTranslations.nav.support}
                                    </a>
                                    <a
                                        href={`/${locale}/about`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="-s6.uoo"
                                    >
                                        {pageTranslations.nav.about}
                                    </a>
                                </div>
                            </div>
                        )}
                    </div>
                </nav>

                {/* Banner Carousel */}
                <div className="relative h-96 overflow-hidden" data-oid="6v61xaz">
                    {bannerSlides.map((slide, index) => (
                        <div
                            key={index}
                            className={`absolute inset-0 bg-gradient-to-r ${slide.bg} transition-transform duration-500 ease-in-out ${
                                index === currentSlide
                                    ? 'translate-x-0'
                                    : index < currentSlide
                                      ? '-translate-x-full'
                                      : 'translate-x-full'
                            }`}
                            data-oid="uwyqs7x"
                        >
                            <div
                                className="relative h-full flex items-center justify-center"
                                data-oid="kh9cmme"
                            >
                                {/* Clay-style floating elements */}
                                <div
                                    className="absolute top-10 left-10 opacity-30"
                                    data-oid="xd7:tff"
                                >
                                    <CloudIcon data-oid="oisg123" />
                                </div>
                                <div
                                    className="absolute bottom-10 right-10 opacity-30"
                                    data-oid="bfrcv0f"
                                >
                                    <CloudIcon data-oid="4bidlj." />
                                </div>
                                <div
                                    className="absolute top-1/2 left-20 opacity-20 transform -translate-y-1/2"
                                    data-oid="6idc4h5"
                                >
                                    <div
                                        className="w-12 h-12 bg-white/20 rounded-full backdrop-blur-sm"
                                        data-oid="11s.t2p"
                                    ></div>
                                </div>
                                <div
                                    className="absolute top-1/4 right-1/4 opacity-20"
                                    data-oid="5cqi6sy"
                                >
                                    <div
                                        className="w-20 h-20 bg-white/20 rounded-2xl backdrop-blur-sm transform rotate-12"
                                        data-oid="abamfn4"
                                    ></div>
                                </div>

                                <div
                                    className="text-center text-white z-10 max-w-4xl mx-auto px-4"
                                    data-oid="wp6cp__"
                                >
                                    <h2
                                        className="text-4xl md:text-6xl font-bold mb-4 drop-shadow-lg"
                                        data-oid=":i2f::y"
                                    >
                                        {slide.title}
                                    </h2>
                                    <p
                                        className="text-xl md:text-2xl opacity-90 drop-shadow-md"
                                        data-oid=":0hgx37"
                                    >
                                        {slide.desc}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}

                    {/* Carousel indicators */}
                    <div
                        className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
                        data-oid="rq7emww"
                    >
                        {bannerSlides.map((_, index) => (
                            <button
                                key={index}
                                onClick={() => setCurrentSlide(index)}
                                className={`w-3 h-3 rounded-full transition-colors ${
                                    index === currentSlide ? 'bg-white' : 'bg-white/50'
                                }`}
                                data-oid="jz5x803"
                            />
                        ))}
                    </div>
                </div>

                {/* Hero Section */}
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20" data-oid="r:m17g2">
                    <div className="text-center" data-oid="u0_iru:">
                        <h1
                            className="text-4xl md:text-6xl font-bold text-gray-900 mb-6"
                            data-oid="afk3o6t"
                        >
                            {pageTranslations.hero.title}
                        </h1>
                        <p
                            className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto"
                            data-oid="rujj_vp"
                        >
                            {pageTranslations.hero.subtitle}
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="v0l:zq4"
                        >
                            <button
                                className="px-8 py-4 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="m4jyh1m"
                            >
                                {pageTranslations.hero.cta}
                            </button>
                            <button
                                className="px-8 py-4 bg-white/80 text-gray-700 rounded-2xl font-semibold border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-200"
                                data-oid="4a3ld73"
                            >
                                {pageTranslations.hero.learn}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Features Section with Clay Style */}
                <div className="bg-white/50 py-20" data-oid="74ailtt">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="19d4ov8">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="5segwtn">
                            {/* Feature 1 */}
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
                                data-oid="jsmwuue"
                            >
                                <div
                                    className="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-6 transform rotate-3"
                                    data-oid="y1qftfp"
                                >
                                    <svg
                                        className="w-8 h-8 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="qtjk8td"
                                    >
                                        <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="sed:b29"
                                        />
                                    </svg>
                                </div>
                                <h3
                                    className="text-xl font-bold text-gray-900 mb-4"
                                    data-oid="v60qck9"
                                >
                                    云计算服务
                                </h3>
                                <p className="text-gray-600" data-oid="gc25lar">
                                    提供弹性、可扩展的云计算资源，满足不同规模企业的需求。
                                </p>
                            </div>

                            {/* Feature 2 */}
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
                                data-oid="0pxu6ce"
                            >
                                <div
                                    className="w-16 h-16 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl flex items-center justify-center mb-6 transform -rotate-3"
                                    data-oid="47vhkwm"
                                >
                                    <svg
                                        className="w-8 h-8 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="wxl0a4n"
                                    >
                                        <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="ti46.2b"
                                        />
                                    </svg>
                                </div>
                                <h3
                                    className="text-xl font-bold text-gray-900 mb-4"
                                    data-oid="ykvwts4"
                                >
                                    安全防护
                                </h3>
                                <p className="text-gray-600" data-oid="w_v.brt">
                                    多层次安全防护体系，保障您的数据和应用安全无忧。
                                </p>
                            </div>

                            {/* Feature 3 */}
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
                                data-oid="1zfrv2m"
                            >
                                <div
                                    className="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mb-6 transform rotate-2"
                                    data-oid="t5e03vc"
                                >
                                    <svg
                                        className="w-8 h-8 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="-:3or6p"
                                    >
                                        <path
                                            fillRule="evenodd"
                                            d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 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="18wno8p"
                                        />
                                    </svg>
                                </div>
                                <h3
                                    className="text-xl font-bold text-gray-900 mb-4"
                                    data-oid="i-05hg2"
                                >
                                    专业支持
                                </h3>
                                <p className="text-gray-600" data-oid="aqbla9i">
                                    7x24小时专业技术支持，确保您的业务持续稳定运行。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <footer className="bg-gray-900 text-white py-12" data-oid="x-idxc3">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="u8ltb.q">
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-8" data-oid="-4e.o4x">
                            <div data-oid="htrqpwb">
                                <div
                                    className="flex items-center space-x-2 mb-4"
                                    data-oid="1yq2tlg"
                                >
                                    <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="d3.311j"
                                    >
                                        <svg
                                            className="w-5 h-5 text-white"
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid="uip6ifu"
                                        >
                                            <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="pd_ubpk"
                                            />
                                        </svg>
                                    </div>
                                    <span className="text-xl font-bold" data-oid="9l2ebx9">
                                        CloudTech
                                    </span>
                                </div>
                                <p className="text-gray-400" data-oid="y3cz9qe">
                                    专业的云服务提供商，致力于为企业提供最优质的云计算解决方案。
                                </p>
                            </div>

                            <div data-oid="v3kp8ja">
                                <h4 className="font-semibold mb-4" data-oid="o:jhck0">
                                    产品服务
                                </h4>
                                <ul className="space-y-2 text-gray-400" data-oid="g2:c0zg">
                                    <li data-oid="6r:qc2x">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="1nooig4"
                                        >
                                            云服务器
                                        </a>
                                    </li>
                                    <li data-oid="gyb72:i">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="is3:93g"
                                        >
                                            云数据库
                                        </a>
                                    </li>
                                    <li data-oid="47yxnx1">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="s3ih-zr"
                                        >
                                            云存储
                                        </a>
                                    </li>
                                    <li data-oid="2_njk7v">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="acf66ja"
                                        >
                                            CDN加速
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div data-oid="2iquqyp">
                                <h4 className="font-semibold mb-4" data-oid="3y525k-">
                                    支持中心
                                </h4>
                                <ul className="space-y-2 text-gray-400" data-oid="hbme51f">
                                    <li data-oid="3v6wd53">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="krc.jfa"
                                        >
                                            帮助文档
                                        </a>
                                    </li>
                                    <li data-oid="q9adirk">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="bnfhze:"
                                        >
                                            技术支持
                                        </a>
                                    </li>
                                    <li data-oid="5x8v8i0">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="i16gjz6"
                                        >
                                            服务状态
                                        </a>
                                    </li>
                                    <li data-oid="_slfwng">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="v6n83lw"
                                        >
                                            联系我们
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div data-oid="osbq1d-">
                                <h4 className="font-semibold mb-4" data-oid="1tt8gr6">
                                    关于我们
                                </h4>
                                <ul className="space-y-2 text-gray-400" data-oid="8uffdg8">
                                    <li data-oid=".d._afb">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="fjt1jwx"
                                        >
                                            公司介绍
                                        </a>
                                    </li>
                                    <li data-oid="f-e:obm">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="nm6-fs8"
                                        >
                                            新闻动态
                                        </a>
                                    </li>
                                    <li data-oid="16:_mrp">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="pomh_rv"
                                        >
                                            招聘信息
                                        </a>
                                    </li>
                                    <li data-oid="vk48fcx">
                                        <a
                                            href="#"
                                            className="hover:text-white transition-colors"
                                            data-oid="4wd0fmt"
                                        >
                                            合作伙伴
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div
                            className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"
                            data-oid="uv2rwqm"
                        >
                            <p data-oid="3smnh7g">&copy; 2024 CloudTech. All rights reserved.</p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}