// Home page component

import { useAuth } from 'miaoda-auth-react';
import React, { useEffect, useState, lazy, Suspense } from 'react';
import { useGSAPScrollReveal } from '@/hooks/useGSAPScrollReveal';
import { useTranslation } from 'react-i18next';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { FileText, Calendar, Loader2, Clock, ArrowRight, Sparkles, MapPin } from 'lucide-react';
import AISearchBox from '@/components/ai/AISearchBox';
import { SmartLink, smartNavigate } from '@/components/ui/SmartLink';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { 
  BambooScroll, 
  CalligraphyStroke, 
  CloudPattern, 
  DragonPhoenix, 
  FallingPetals, 
  FourGentlemen, 
  GuzhengStrings, 
  InkDiffusion, 
  LotusBloom, 
  SealStamp, 
  TaiChi 
} from '@/components/ui/ChineseAnimations';
import ContentShowcase from '@/components/ui/ContentShowcase';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LazyImage } from '@/components/ui/lazy-image';
import { 
  MagneticHover, 
  Optimized3DCard, 
  OptimizedBreathingGlow,
  OptimizedFloating, 
  OptimizedMouseTracker, 
  OptimizedParallax, 
  OptimizedParticleSystem, 
  OptimizedScrollTrigger, 
  RippleEffect,
  SparkleEffect
} from '@/components/ui/OptimizedAnimations';
import { DelayedRenderer, ViewportRenderer } from '@/components/ui/viewport-renderer';
import VideoCarousel from '@/components/VideoCarousel';
import SEO from '@/components/common/SEO';

// 懒加载视频生成工作室（减少首屏模块图，避免大型依赖阻塞 Home.tsx 加载）
const VideoGenerationStudio = lazy(() => import('@/components/video/VideoGenerationStudio'));
import { useSiteSettings } from '@/contexts/SiteSettingsContext';
import { supabase } from '@/db/supabase';
import { 
  newsFallback, 
  activityFallback, 
  expertFallback, 
  partnerFallback,
  homeBannerFallback,
  promoVideoFallback 
} from '@/db/fallbackService';
import { CacheManager } from '@/lib/cache-manager';
import { useToast } from '@/hooks/use-toast';
import type { Activity, Expert, HomeBanner, NewsWithAuthor, Partner } from '@/types/types';
import WeChatQuickNav from '@/components/common/WeChatQuickNav';

import { useHomeData } from '@/hooks/home/use-home-data';
import { useVideoGeneration } from '@/hooks/home/use-video-generation';
import { T } from '@/i18n/smartTranslate';
import { ChuanchengHomeSection } from "@/components/home/ChuanchengHomeSection";
import { HotTopicsHomeSection } from "@/components/home/HotTopicsHomeSection";
import { ThreeHeroBackground, HeroTimelineAnimation } from '@/components/visual';
import { imgOnError } from '@/utils/img-fallback';
const Home: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation();
  const { toast } = useToast();

  // 全站滚动揭示动画
  useGSAPScrollReveal();
  
  // 🔧 使用自定义 Hook 封装逻辑
  const {
    banners,
    latestNews,
    activityNews,
    upcomingActivities,
    featuredExperts,
    partners,
    promoVideo,
    loading,
    siteStats,
  } = useHomeData();

  const {
    videoPlaylist,
    setVideoPlaylist,
    isGeneratingVideo,
    videoGenerationStatus,
    handleGenerateVideo
  } = useVideoGeneration(['https://resource-static.cdn.bcebos.com/video/sample-video.mp4']);

  const [currentBannerIndex, setCurrentBannerIndex] = useState(0);
  const [showVideoStudio, setShowVideoStudio] = useState(false);
  const { user } = useAuth();
  const { siteSettings } = useSiteSettings();

  // 恢复滚动位置
  useEffect(() => {
    const state = location.state as { from?: string; scrollY?: number } | null;
    let timeoutId: NodeJS.Timeout;

    if ((state?.from === 'news-detail' || state?.from === 'activity-detail') && typeof state.scrollY === 'number') {
      timeoutId = setTimeout(() => {
        window.scrollTo({
          top: state.scrollY,
          behavior: 'instant' as ScrollBehavior,
        });
      }, 100);
      
      window.history.replaceState({}, document.title);
    }

    return () => {
      if (timeoutId) clearTimeout(timeoutId);
    };
  }, [location]);

  // 更新视频播放列表（当 promoVideo 加载后）
  useEffect(() => {
    if (promoVideo) {
      if (promoVideo.segments && promoVideo.segments.length > 0) {
        setVideoPlaylist(promoVideo.segments.map((s: any) => s.url));
      } else {
        setVideoPlaylist([promoVideo.video_url]);
      }
    }
  }, [promoVideo, setVideoPlaylist]);

  // 首页刷新后回到最顶部
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  // 清除缓存并重新加载数据
  const handleClearCacheAndReload = async () => {
    try {
      console.log('[调试] 开始清除缓存...');
      await CacheManager.clearAllCache();
      toast({
        title: T('缓存已清除'),
        description: T('正在重新加载数据...')
      });
      
      // 重新加载页面
      window.location.reload();
    } catch (error) {
      console.error('[调试] 清除缓存失败:', error);
      toast({
        title: T('清除缓存失败'),
        description: T('请手动刷新页面'),
        variant: 'destructive'
      });
    }
  };

  // 轮播图自动切换
  useEffect(() => {
    if (banners.length <= 1) return;
    
    const timer = setInterval(() => {
      setCurrentBannerIndex((prev) => (prev + 1) % banners.length);
    }, 5000);

    return () => clearInterval(timer);
  }, [banners.length]);

  const nextBanner = () => {
    setCurrentBannerIndex((prev) => (prev + 1) % banners.length);
  };

  const prevBanner = () => {
    setCurrentBannerIndex((prev) => (prev - 1 + banners.length) % banners.length);
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };



  return (
    <>
      <noscript>
        <div style={{ padding: '24px', fontFamily: 'sans-serif' }}>
          <h1>中华经典传承网 — 首页</h1>
          <p>请启用 JavaScript 查看完整页面。</p>
        </div>
      </noscript>
      <div className="min-h-screen w-full bg-gradient-to-br from-red-50 via-amber-50 to-orange-50 relative overflow-hidden noise-overlay">
      {/* 顶部金色分界 — 绝对定位不占空间，与上方区域一线之隔 */}
      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-amber-400/40 to-transparent z-30 pointer-events-none"></div>
      <div className="absolute top-[2px] left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-300/60 to-transparent z-30 pointer-events-none"></div>
      <SEO 
        title={T('首页')} 
        description={T('中华经典传承网首页 - 弘扬中华文化，传播权威资讯。汇聚行业动态、文化活动与专家智库。')}
        geoRegion="CN-11"
        geoPlacename="Beijing"
      />
      {/* 调试按钮 - 仅在开发模式下显示 */}
      {import.meta.env.DEV && (
        <div className="fixed bottom-4 right-4 z-50">
          <Button
            onClick={handleClearCacheAndReload}
            variant="destructive"
            size="sm"
            className="shadow-lg"
          >
            {T('🗑️ 清除缓存并重新加载')}
          </Button>
        </div>
      )}
      {/* 轮播图 Banner */}
      {banners.length > 0 && (
        <></>
      )}
      {/* Hero Section - 高贵雅致版升级 - 极致紧凑布局，顶部与Header无缝衔接 */}
      {/* 移除第一个模块的视差效果，避免在某些移动端浏览器（如百度）下由于滚动偏移导致的标题遮挡问题 */}
      <section className="relative bg-gradient-to-br from-red-900 via-red-800 to-amber-700 text-white pt-1 md:pt-2 pb-0 overflow-hidden mx-0 px-0 shadow-none min-h-[160px] md:min-h-[180px] flex flex-col justify-center">
        {/* Three.js 3D 粒子背景 —— 延迟加载以不阻塞 LCP */}
        <DelayedRenderer delay={600}>
          <ThreeHeroBackground />
        </DelayedRenderer>

        {/* GSAP Hero 入场动画控制器 */}
        <HeroTimelineAnimation heroSelector=".hero-section-target" delay={300} />

        {/* 云纹背景动画 - 延迟加载 */}
        <DelayedRenderer delay={200}>
          <CloudPattern className="absolute inset-0 opacity-10">
            <div />
          </CloudPattern>
        </DelayedRenderer>
        
        {/* 增强的背景装饰 */}
        <div className="absolute inset-0">
          {/* 装饰图案 — 使用低频 CSS 动画代替 animate-pulse/bounce，减少 GPU 合成层 */}
          <div className="absolute top-10 left-10 w-16 h-16 opacity-10 pointer-events-none" style={{ animation: 'pulse 6s ease-in-out infinite' }}>
            <div className="w-full h-full border-4 border-amber-400 rounded-full"></div>
          </div>
          <div className="absolute bottom-32 right-1/3 w-10 h-10 opacity-15 pointer-events-none" style={{ animation: 'pulse 8s ease-in-out infinite 2s' }}>
            <div className="w-full h-full border-2 border-red-400 rounded-full"></div>
          </div>
          <div className="absolute top-1/3 right-20 w-12 h-12 opacity-10 pointer-events-none" style={{ animation: 'pulse 7s ease-in-out infinite 1s' }}>
            <div className="w-full h-full border-4 border-yellow-400 rounded-full"></div>
          </div>
          
          {/* 龙凤装饰 - 延迟加载 */}
          <DelayedRenderer delay={400}>
            <div className="absolute top-1/4 left-0 w-32 h-16 opacity-15">
              <DragonPhoenix type="dragon" />
            </div>
            <div className="absolute top-1/4 right-0 w-32 h-16 opacity-15">
              <DragonPhoenix type="phoenix" />
            </div>
          </DelayedRenderer>
        </div>
        
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
          style={{
            backgroundImage: `url('/ai-hero-bg.png')`
          }}
        ></div>
        <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-black/40 to-black/50 mt-[0px]"></div>

        {/* 优化的粒子效果 - 延迟加载 */}
        <DelayedRenderer delay={300}>
          <OptimizedParticleSystem count={15} />
        </DelayedRenderer>

        <div className="relative w-full px-4 sm:px-6 lg:px-8 text-center z-10 py-6 md:py-8 lg:py-10 hero-section-target">
          <BambooScroll>
            <OptimizedBreathingGlow color="rgba(251, 191, 36, 0.4)">
              <div className="hero-title-wrap">
              <CalligraphyStroke
                text={siteSettings?.site_title || t('site.title')}
                className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-bold mb-2 md:mb-3 lg:mb-5 font-serif text-white drop-shadow-2xl py-2 leading-tight"
                delay={500}
              />
              </div>
            </OptimizedBreathingGlow>

            <p className="hero-subtitle-text text-xl md:text-2xl lg:text-3xl mb-3 md:mb-4 lg:mb-6 text-amber-100 font-serif px-4 drop-shadow-lg mt-3 sm:mt-4 md:mt-5 tracking-[0.15em] leading-relaxed whitespace-nowrap">
              {t('home.subtitle')}
            </p>

              <InkDiffusion>
                <p className="hero-description text-base md:text-xl mb-4 md:mb-5 lg:mb-6 max-w-5xl mx-auto text-gray-100 leading-[2] animate-fade-in-up px-4 drop-shadow-md tracking-widest">
                  {t('home.description')}
                </p>
              </InkDiffusion>

              <div className="hero-cta-row flex flex-col sm:flex-row gap-4 md:gap-8 justify-center items-center mb-4 md:mb-5 lg:mb-6">
                {user ? (
                  <>
                    <Link to="/news">
                      <MagneticHover strength={0.3}>
                        <Button size="lg" className="relative bg-gradient-to-br from-red-700 via-red-600 to-amber-600 text-white hover:from-red-800 hover:via-red-700 hover:to-amber-700 shadow-elegant hover:shadow-2xl hover:shadow-red-500/50 interactive-enhanced px-12 py-4 sm:py-5 md:py-6 text-xl font-bold border-2 border-amber-400/50 transition-all duration-500 group glow-red-gold">
                          <FileText className="mr-3 h-7 w-7 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300" />
                          <span className="relative">
                            {T('行业资讯')}
                            <div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-amber-300 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                          </span>
                        </Button>
                      </MagneticHover>
                    </Link>
                    <Link to="/news/activities">
                      <MagneticHover strength={0.3}>
                        <Button size="lg" variant="outline" className="relative border-3 border-amber-400 text-white hover:bg-gradient-to-br hover:from-amber-600 hover:via-amber-500 hover:to-red-600 hover:border-transparent interactive-enhanced px-12 py-4 sm:py-5 md:py-6 text-xl font-bold shadow-xl hover:shadow-2xl hover:shadow-amber-500/50 transition-all duration-500 group backdrop-blur-sm bg-gradient-to-br from-white/10 to-amber-500/10 glow-gold">
                          <Calendar className="mr-3 h-7 w-7 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300" />
                          <span className="relative">
                            {T('文化传承')}
                            <div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-amber-300 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                          </span>
                        </Button>
                      </MagneticHover>
                    </Link>
                  </>
                ) : (
                  <>
                    <Link to="/news">
                      <MagneticHover strength={0.3}>
                        <Button size="lg" className="relative bg-gradient-to-br from-red-700 via-red-600 to-amber-600 text-white hover:from-red-800 hover:via-red-700 hover:to-amber-700 shadow-elegant hover:shadow-2xl hover:shadow-red-500/50 interactive-enhanced px-12 py-4 sm:py-5 md:py-6 text-xl font-bold border-2 border-amber-400/50 transition-all duration-500 group glow-red-gold">
                          <FileText className="mr-3 h-7 w-7 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300" />
                          <span className="relative">
                            {T('行业资讯')}
                            <div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-amber-300 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                          </span>
                        </Button>
                      </MagneticHover>
                    </Link>
                    <Link to="/news/activities">
                      <MagneticHover strength={0.3}>
                        <Button size="lg" variant="outline" className="relative border-3 border-amber-400 text-white hover:bg-gradient-to-br hover:from-amber-600 hover:via-amber-500 hover:to-red-600 hover:border-transparent interactive-enhanced px-12 py-4 sm:py-5 md:py-6 text-xl font-bold shadow-xl hover:shadow-2xl hover:shadow-amber-500/50 transition-all duration-500 group backdrop-blur-sm bg-gradient-to-br from-white/10 to-amber-500/10 glow-gold">
                          <Calendar className="mr-3 h-7 w-7 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300" />
                          <span className="relative">
                            {T('文化传承')}
                            <div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-amber-300 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                          </span>
                        </Button>
                      </MagneticHover>
                    </Link>
                  </>
                )}
              </div>
              
              {/* AI智能搜索 */}
              <div className="hero-search-row mt-2 md:mt-3 lg:mt-4">
                <AISearchBox 
                  placeholder={t('search.placeholder')}
                  showVoiceInput={true}
                  onSearch={(query) => {
                    // 跳转到搜索结果页面，使用smartNavigate兼容百度App
                    smartNavigate(`/news/search?q=${encodeURIComponent(query)}`, navigate);
                  }}
                />
              </div>
            </BambooScroll>
          </div>
        </section>
      {/* 最新动态板块 - 优化版本 - 与Hero无缝衔接 */}
      <OptimizedParallax speed={0.05}>
        <section data-gsap="fade-up" className="pt-0 pb-10 md:pb-16 bg-gradient-to-b from-red-50/20 via-white to-white relative overflow-hidden">
          {/* 简化背景装饰 */}
          <div className="absolute inset-0 opacity-[0.02] pointer-events-none">
            <CloudPattern className="absolute top-0 right-0 w-full sm:w-80 h-80"><div /></CloudPattern>
          </div>

          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <OptimizedScrollTrigger animation="fadeInUp" threshold={0.1}>
              {/* 统一框架容器 */}
              <Card className="bg-white border-2 border-red-200/50 shadow-xl hover:shadow-2xl transition-shadow duration-500 overflow-hidden">
                {/* 板块标题区域 - 简化版 - 电脑端增加内边距 */}
                <CardHeader className="bg-gradient-to-r from-red-600 via-red-700 to-amber-600 text-white py-4 md:py-3 lg:py-6 px-6 md:px-8 border-b-2 border-amber-400/40">
                  <div className="flex items-center gap-3 flex-wrap">
                    <div className="w-1 h-7 bg-amber-300 rounded-full"></div>
                    <CalligraphyStroke 
                      text={T('最新动态')}
                      className="text-xl md:text-2xl font-bold font-serif"
                    />
                  </div>
                </CardHeader>
                
                {/* 资讯列表区域 */}
                <CardContent className="p-0">
                  {loading ? (
                    <div className="flex justify-center items-center py-10">
                      <Loader2 className="h-10 w-10 animate-spin text-red-600" />
                    </div>
                  ) : latestNews.length > 0 ? (
                    <div className="divide-y divide-gray-200/70">
                      {latestNews.slice(0, 5).map((news, index) => (
                        <Link 
                          key={news.id}
                          to={`/news/${news.id}`}
                          state={{ from: 'home', scrollY: window.scrollY }}
                          className="block group"
                        >
                          <div className="flex items-start gap-2 flex-wrap pl-4 pr-1.5 md:pl-8 md:pr-4 py-4 hover:bg-gradient-to-r hover:from-red-50/50 hover:to-transparent transition-colors duration-300 relative">
                            {/* 左侧装饰条 */}
                            <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-600 to-amber-600 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></div>
                            
                            {/* 装饰点 */}
                            <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br from-red-600 to-amber-600 mt-2.5 group-hover:scale-125 transition-transform duration-300"></div>
                            
                            {/* 标题区域 - 占据最大空间 */}
                            <div className="flex-1 min-w-0">
                              <h3 className="text-base md:text-lg font-semibold text-gray-800 group-hover:text-red-700 transition-colors duration-300 line-clamp-2 leading-relaxed font-serif">
                                {news.title}
                              </h3>
                            </div>
                            
                            {/* 时间和图标区域 - 极尽向右靠拢 */}
                            <div className="flex-shrink-0 flex items-center gap-1 flex-wrap md:gap-1.5 text-gray-400 group-hover:text-red-600 transition-colors duration-300 self-start mt-2">
                              <Clock className="h-3 w-3 md:h-3.5 md:w-3.5 flex-shrink-0" />
                              <time 
                                dateTime={news.published_at}
                                className="text-[10px] md:text-sm font-medium whitespace-nowrap"
                              >
                                {news.published_at && new Date(news.published_at).toLocaleDateString('zh-CN', {
                                  year: 'numeric',
                                  month: '2-digit',
                                  day: '2-digit'
                                })}
                              </time>
                              
                              {/* 右侧箭头 - 紧贴时间 */}
                              <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-0.5">
                                <ArrowRight className="h-3.5 w-3.5 md:h-4 md:w-4 text-red-600" />
                              </div>
                            </div>
                          </div>
                        </Link>
                      ))}
                    </div>
                  ) : (
                    <div className="py-10 text-center">
                      <FileText className="h-16 w-16 mx-auto mb-4 text-gray-300" />
                      <p className="text-gray-400 text-base">{T('暂无最新资讯')}</p>
                    </div>
                  )}
                </CardContent>
                
                {/* 底部操作区域 */}
                {latestNews.length > 0 && (
                  <div className="bg-gray-50/50 px-6 md:px-8 py-3 border-t border-gray-200/60">
                    <div className="flex items-center justify-center">
                      <Link to="/news">
                        <Button 
                          size="lg"
                          className="bg-gradient-to-r from-red-600 to-amber-600 hover:from-red-700 hover:to-amber-700 text-white font-semibold px-3 sm:px-4 md:px-6 lg:px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-400/30"
                        >
                          <span className="flex items-center gap-2 flex-wrap">
                            {T('查看更多资讯')}
                            <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-300" />
                          </span>
                        </Button>
                      </Link>
                    </div>
                  </div>
                )}
              </Card>
            </OptimizedScrollTrigger>
          </div>
        </section>
      </OptimizedParallax>
      {/* 文化传承板块 - 内容同步相关资讯，增加内边距防止遮挡 */}
      <OptimizedParallax speed={0.05}>
        <section data-gsap="fade-up" className="py-10 md:py-16 bg-gradient-to-b from-white via-amber-50/10 to-white relative overflow-hidden">
          {/* 简化背景装饰 */}
          <div className="absolute inset-0 opacity-[0.02] pointer-events-none">
            <CloudPattern className="absolute bottom-0 left-0 w-full sm:w-80 h-80"><div /></CloudPattern>
          </div>

          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <OptimizedScrollTrigger animation="fadeInUp" threshold={0.1}>
              {/* 统一框架容器 */}
              <Card className="bg-white border-2 border-amber-200/50 shadow-xl hover:shadow-2xl transition-shadow duration-500 overflow-hidden group/main">
                {/* 板块标题区域 - 雅致国风设计 */}
                <CardHeader className="bg-gradient-to-r from-amber-600 via-orange-600 to-red-600 text-white py-4 md:py-3 lg:py-6 px-6 md:px-8 border-b-2 border-red-400/40 relative overflow-hidden">
                  <div className="flex items-center gap-3 flex-wrap relative z-10">
                    <div className="w-1 h-7 bg-amber-300 rounded-full"></div>
                    <CalligraphyStroke 
                      text={T('文化活动')}
                      className="text-xl md:text-2xl font-bold font-serif"
                    />
                  </div>
                </CardHeader>

                {/* 内容区域 - 整合活动与资讯 */}
                <CardContent className="p-4 sm:p-5 md:p-6">
                  {loading ? (
                    <div className="flex justify-center items-center py-10">
                      <Loader2 className="h-10 w-10 animate-spin text-amber-600" />
                    </div>
                  ) : (
                    <div className="space-y-4 sm:space-y-6 md:space-y-8">
                      {/* 精彩活动展示 */}
                      {upcomingActivities.length > 0 && (
                        <div className="space-y-4">
                          <div className="flex items-center justify-between">
                            <h3 className="text-lg font-bold text-amber-900 flex items-center gap-2 flex-wrap">
                              <Calendar className="h-5 w-5 text-red-600" />
                              {T('近期精彩活动')}
                            </h3>
                            <Link to="/news/activities" className="text-sm text-amber-700 hover:text-red-700 font-medium">{T('查看全部活动')}</Link>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
                            {upcomingActivities.slice(0, 3).map((activity) => (
                              <Link 
                                key={activity.id} 
                                to={`/news/activities/${activity.id}`}
                                className="group block h-full"
                              >
                                <Card className="h-full border border-amber-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                                  {activity.image_url ? (
                                    <div className="aspect-[16/9] relative overflow-hidden">
                                      <img src={activity.image_url} 
                                        alt={activity.title}
                                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                                          onError={imgOnError}
      />
                                      <Badge className={`absolute top-2 right-2 z-10 ${activity.status === 'ongoing' ? 'bg-green-600' : 'bg-blue-600'}`}>
                                        {activity.status === 'ongoing' ? T('进行中') : T('即将开始')}
                                      </Badge>
                                    </div>
                                  ) : (
                                    <div className="aspect-[16/9] relative bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center p-4 sm:p-5 md:p-6 text-center border-b border-amber-100">
                                      <Calendar className="absolute top-4 right-4 h-12 w-12 text-amber-200/50" />
                                      <div className="space-y-3">
                                        <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto shadow-sm border border-amber-100 group-hover:scale-110 transition-transform duration-500">
                                          <Sparkles className="h-8 w-8 text-amber-600" />
                                        </div>
                                        <div className="text-amber-800 font-serif font-bold text-xl tracking-widest">{T('精彩活动')}</div>
                                      </div>
                                      <Badge className={`absolute top-2 right-2 z-10 ${activity.status === 'ongoing' ? 'bg-green-600' : 'bg-blue-600'}`}>
                                        {activity.status === 'ongoing' ? T('进行中') : T('即将开始')}
                                      </Badge>
                                    </div>
                                  )}
                                  <CardContent className="p-4">
                                    <div className="flex justify-between items-start mb-2">
                                      <h4 className="font-bold text-slate-800 group-hover:text-red-700 transition-colors leading-relaxed flex-1 min-w-0 text-sm md:text-base">{activity.title}</h4>
                                    </div>
                                    <div className="space-y-1 text-xs text-slate-500">
                                      <div className="flex items-center gap-1 flex-wrap">
                                        <MapPin className="h-3 w-3" />
                                        <span className="truncate min-w-0">{activity.location || T('线上活动')}</span>
                                      </div>
                                      <div className="flex items-center gap-1 flex-wrap">
                                        <Clock className="h-3 w-3" />
                                        <span>{new Date(activity.start_date || activity.created_at).toLocaleString('zh-CN', {
                                          year: 'numeric',
                                          month: '2-digit',
                                          day: '2-digit',
                                          hour: '2-digit',
                                          minute: '2-digit',
                                          second: '2-digit'
                                        })}</span>
                                      </div>
                                    </div>
                                  </CardContent>
                                </Card>
                              </Link>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* 相关资讯列表 */}
                      <div className="space-y-4">

                        {activityNews.length > 0 ? (
                          <div className="divide-y divide-amber-100/70 border rounded-xl overflow-hidden bg-white/50">
                            {activityNews.slice(0, 5).map((news, index) => (
                              <Link 
                                key={news.id}
                                to={`/news/${news.id}`}
                                className="block group p-4 hover:bg-white transition-colors"
                              >
                                <div className="flex items-start gap-3 flex-wrap">
                                  {/* 装饰点 */}
                                  <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br from-red-600 to-amber-600 mt-2.5 group-hover:scale-125 transition-transform duration-300"></div>
                                  
                                  <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2 flex-wrap mb-1">
                                      {news.is_pinned && (
                                        <Badge className="bg-red-600 text-white text-[9px] h-4 px-1">{T('置顶')}</Badge>
                                      )}
                                      <h4 className="font-bold text-slate-800 group-hover:text-red-700 transition-colors leading-relaxed flex-1 min-w-0 text-sm md:text-base">{news.title}</h4>
                                    </div>
                                    <p className="text-xs text-slate-500 mt-1 line-clamp-2">{news.summary}</p>
                                    <div className="flex items-center gap-3 flex-wrap mt-2">
                                      <span className="text-[10px] text-slate-400">
                                        {new Date(news.published_at || news.created_at).toLocaleDateString('zh-CN', {
                                          year: 'numeric',
                                          month: '2-digit',
                                          day: '2-digit'
                                        })}
                                      </span>
                                      <Badge variant="outline" className="text-[9px] h-4 py-0 border-amber-200 text-amber-600">
                                        {news.category || T('文化活动')}
                                      </Badge>
                                    </div>
                                  </div>
                                </div>
                              </Link>
                            ))}
                          </div>
                        ) : (
                          <div className="py-10 text-center border-2 border-dashed rounded-xl">
                            <FileText className="h-10 w-10 mx-auto mb-2 text-slate-300" />
                            <p className="text-slate-400">{T('暂无相关资讯')}</p>
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </CardContent>
                
                {/* 底部操作区域 */}
                {activityNews.length > 0 && (
                  <div className="bg-amber-50/30 px-6 md:px-8 py-3 border-t border-amber-100/60">
                    <div className="flex items-center justify-center">
                      <Link to="/news/activities">
                        <Button 
                          size="lg"
                          className="bg-gradient-to-r from-amber-600 to-red-600 hover:from-amber-700 hover:to-red-700 text-white font-semibold px-3 sm:px-4 md:px-6 lg:px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-400/30"
                        >
                          <span className="flex items-center gap-2 flex-wrap">
                            {T('查看更多文化资讯')}
                            <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-300" />
                          </span>
                        </Button>
                      </Link>
                    </div>
                  </div>
                )}
              </Card>
            </OptimizedScrollTrigger>
          </div>
        </section>
      </OptimizedParallax>
      {/* 传承号子板块 */}
      <ChuanchengHomeSection />
      {/* 热门话题 */}
      <HotTopicsHomeSection />
      {/* 真实站点数据统计栏 */}

      {/* Featured Experts Section */}
      {featuredExperts.length > 0 && (
        <ViewportRenderer once rootMargin="150px">
          <OptimizedParallax speed={0.04}>
            <OptimizedScrollTrigger animation="fadeInUp">
              <div />
            </OptimizedScrollTrigger>
          </OptimizedParallax>
        </ViewportRenderer>
      )}
      {/* CTA Section - 优化动态效果 - 增加内边距防止遮挡 */}
      <OptimizedParallax speed={0.05}>
        <section data-gsap="fade-up" className="py-12 md:py-16 lg:py-20 bg-gradient-to-r from-red-800 via-red-700 to-amber-600 text-white relative overflow-hidden shadow-inner">
          {/* 背景装饰 */}
          <div className="absolute inset-0">
            <DragonPhoenix type="dragon" className="absolute top-0 left-0 w-full h-full opacity-5" />
            <DragonPhoenix type="phoenix" className="absolute bottom-0 right-0 w-full h-full opacity-5" />
          </div>
          
          {/* 粒子效果 */}
          <OptimizedParticleSystem count={8} className="opacity-40" />
          
          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
            <BambooScroll>
              <CalligraphyStroke 
                text={T("加入我们，共同传承中华文化")}
                className="text-xl sm:text-2xl md:text-3xl font-bold mb-4 text-white"
              />
              
              <OptimizedBreathingGlow color="rgba(251, 191, 36, 0.4)">
                <p className="text-xl mb-8 text-amber-100">{T('欢迎各界人士投稿，分享您的文化见解和研究成果')}</p>
              </OptimizedBreathingGlow>
              
              <Link to="/news/submission">

              </Link>
            </BambooScroll>
          </div>
        </section>
      </OptimizedParallax>
      {/* Featured Content Showcase */}
      <div className="bg-gradient-to-br from-amber-50 via-red-50 to-orange-50 py-4 md:py-6">
        <ContentShowcase
          title={T("精彩内容推荐")}
          subtitle={T('深度解读中华文化精髓，展现传统文化时代价值')}
          className="py-0"
          items={[
          {
            id: '1',
            title: T('海峡两岸神农炎帝故里交流盛况'),
            description: T('第十届海峡两岸同胞神农炎帝故里民间交流活动圆满举办，两岸同胞共祭人文始祖，弘扬中华民族优秀传统文化'),
            category: T('文化活动'),
            imageUrl: 'https://miaoda-site-img.cdn.bcebos.com/46611133-b83e-454a-b01f-c833cdcb6d96/images/2f964898-a391-11f0-ab42-ead8d933836c_0.jpg',
            date: '2025-05-15'
          },
          {
            id: '2',
            title: T('昆曲艺术传承发展新篇章'),
            description: T('昆曲艺术传承发展座谈会探讨"百戏之祖"的保护与创新，推动传统戏曲艺术在新时代的发展'),
            category: T('非遗保护'),
            imageUrl: 'https://miaoda-site-img.cdn.bcebos.com/adac01c5-d988-41ab-9928-77412d6cb10c/images/32f58fa8-a391-11f0-b78c-5a8ff2041e7f_0.jpg',
            date: '2025-06-20'
          },
          {
            id: '3',
            title: T('中华文明探源工程重大发现'),
            description: T('最新考古成果证实中华文明五千年历史，为中华文明起源提供有力的考古学证据'),
            category: T('学术研究'),
            imageUrl: 'https://miaoda-site-img.cdn.bcebos.com/c59fb364-c594-4667-845c-e301addcc367/images/2faae2da-a391-11f0-b78c-5a8ff2041e7f_0.jpg',
            date: '2025-07-10'
          }
        ]}
        />
      </div>
      {/* Cultural Heritage Gallery - 优化动态效果 */}
      <ViewportRenderer once rootMargin="150px">
        <section data-gsap="fade-up" className="pt-12 md:pt-16 lg:pt-20 pb-16 md:pb-24 bg-gradient-to-br from-red-50 via-amber-50 to-orange-50 relative overflow-hidden">
            {/* 背景装饰 - 减少数量并延迟加载 */}
            <div className="absolute inset-0 pointer-events-none">
              {/* 添加中国风渐变背景装饰 */}
              <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-red-100/30 via-transparent to-transparent"></div>
              <div className="absolute bottom-0 right-0 w-full h-full bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-amber-100/30 via-transparent to-transparent"></div>
              <DelayedRenderer delay={200}>
                <div className="absolute top-10 left-10">
                  <OptimizedFloating duration={8} delay={0}>
                    <FourGentlemen type="orchid" />
                  </OptimizedFloating>
                </div>
              </DelayedRenderer>
              <DelayedRenderer delay={300}>
                <div className="absolute bottom-10 right-10">
                  <OptimizedFloating duration={6} delay={2}>
                    <FourGentlemen type="plum" />
                  </OptimizedFloating>
                </div>
              </DelayedRenderer>
            </div>
          
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <OptimizedScrollTrigger animation="fadeInUp">
              <div className="text-center mb-6">
                <CalligraphyStroke 
                  text={T("中华文化瑰宝")}
                  className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 mb-4"
                />
                <p className="text-gray-600">{t('home.culturalShowcase.subtitle')}</p>
              </div>
            </OptimizedScrollTrigger>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-4 md:mb-5 lg:mb-6">
              <OptimizedScrollTrigger animation="fadeInLeft">
                <MagneticHover>
                  <RippleEffect>
                    <Optimized3DCard>
                      <div className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 interactive-enhanced">
                        <SparkleEffect count={3} color="#dc2626">
                          <div className="relative w-full h-48 overflow-hidden">
                            <img src="https://miaoda-site-img.cdn.bcebos.com/89a8d0fc-917e-4df9-aab2-ae4f1713fe1c/images/2f93ffca-a391-11f0-842d-22ca35a46c75_0.jpg"
                              alt={T('中国书法艺术')}
                              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" 
                                onError={imgOnError}
      />
                          </div>
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                          <div className="absolute bottom-4 left-4 text-white">
                            <h3 className="font-semibold">{t('home.culturalShowcase.calligraphy.title')}</h3>
                            <p className="text-sm text-gray-200">{t('home.culturalShowcase.calligraphy.description')}</p>
                          </div>
                          <div className="absolute top-2 right-2">
                            <SealStamp text={T('书')} size={20} />
                          </div>
                        </SparkleEffect>
                      </div>
                    </Optimized3DCard>
                  </RippleEffect>
                </MagneticHover>
              </OptimizedScrollTrigger>

              <OptimizedScrollTrigger animation="fadeInUp">
                <MagneticHover>
                  <RippleEffect>
                    <Optimized3DCard>
                      <div className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 interactive-enhanced">
                        <SparkleEffect count={3} color="#d97706">
                          <div className="relative w-full h-48 overflow-hidden">
                            <img src="https://miaoda-site-img.cdn.bcebos.com/6649f8ef-d6f8-49de-99e9-a8578890a2fe/images/32c49628-a391-11f0-ab42-ead8d933836c_0.jpg"
                              alt={T('陶瓷工艺')}
                              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" 
                                onError={imgOnError}
      />
                          </div>
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                          <div className="absolute bottom-4 left-4 text-white">
                            <h3 className="font-semibold">{t('home.culturalShowcase.ceramics.title')}</h3>
                            <p className="text-sm text-gray-200">{t('home.culturalShowcase.ceramics.description')}</p>
                          </div>
                          <div className="absolute top-2 right-2">
                            <SealStamp text={T('陶')} size={20} />
                          </div>
                        </SparkleEffect>
                      </div>
                    </Optimized3DCard>
                  </RippleEffect>
                </MagneticHover>
              </OptimizedScrollTrigger>

              <OptimizedScrollTrigger animation="fadeInUp">
                <MagneticHover>
                  <RippleEffect>
                    <Optimized3DCard>
                      <div className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 interactive-enhanced">
                        <SparkleEffect count={3} color="#059669">
                          <div className="relative w-full h-48 overflow-hidden">
                            <img src="https://miaoda-site-img.cdn.bcebos.com/d59ccffb-bc08-4ffe-9377-fbeaaf196007/images/cee3c5d2-a71b-11f0-9448-4607c254ba9d_0.jpg"
                              alt={T('传统音乐')}
                              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" 
                                onError={imgOnError}
      />
                          </div>
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                          <div className="absolute bottom-4 left-4 text-white">
                            <h3 className="font-semibold">{t('home.culturalShowcase.music.title')}</h3>
                            <p className="text-sm text-gray-200">{t('home.culturalShowcase.music.description')}</p>
                          </div>
                          <div className="absolute top-2 right-2">
                            <SealStamp text={T('乐')} size={20} />
                          </div>
                        </SparkleEffect>
                      </div>
                    </Optimized3DCard>
                  </RippleEffect>
                </MagneticHover>
              </OptimizedScrollTrigger>

              <OptimizedScrollTrigger animation="fadeInRight">
                <MagneticHover>
                  <RippleEffect>
                    <Optimized3DCard>
                      <div className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 interactive-enhanced">
                        <SparkleEffect count={3} color="#7c3aed">
                          <div className="relative w-full h-48 overflow-hidden">
                            <img src="https://miaoda-site-img.cdn.bcebos.com/353403f6-4a18-43e3-8752-0862f49e8194/images/361a63c0-a391-11f0-ab42-ead8d933836c_0.jpg"
                              alt={T('古典园林')}
                              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" 
                                onError={imgOnError}
      />
                          </div>
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                          <div className="absolute bottom-4 left-4 text-white">
                            <h3 className="font-semibold">{t('home.culturalShowcase.garden.title')}</h3>
                            <p className="text-sm text-gray-200">{t('home.culturalShowcase.garden.description')}</p>
                          </div>
                          <div className="absolute top-2 right-2">
                            <SealStamp text={T('园')} size={20} />
                          </div>
                        </SparkleEffect>
                      </div>
                    </Optimized3DCard>
                  </RippleEffect>
                </MagneticHover>
              </OptimizedScrollTrigger>
            </div>

            {/* 传统工艺专区 - 优化动态效果 */}
            <OptimizedScrollTrigger animation="scaleIn">
              <InkDiffusion>
                <div className="relative">
                  <div className="text-center mb-4">
                    <CalligraphyStroke 
                      text={T("传统工艺精品")}
                      className="text-xl sm:text-2xl font-bold text-gray-900 mb-2"
                    />
                    <p className="text-gray-600">{t('home.craftsmanship.subtitle')}</p>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-img.cdn.bcebos.com/img/corpus/e5f7702baa7a445c878051df4116ae62.jpg"
                                  alt={T('传统刺绣工艺')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.embroidery.title')}</h4>
                                <p className="text-sm text-gray-600">{t('home.craftsmanship.embroidery.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('绣')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>

                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-img.cdn.bcebos.com/img/corpus/bc301f943d3d4a16be3fc42ab7e9f812.jpg"
                                  alt={T('木雕艺术')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.woodCarving.title')}</h4>
                                <p className="text-sm text-gray-600">{t('home.craftsmanship.woodCarving.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('雕')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>

                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-site-img.cdn.bcebos.com/0c4f1b7b-972d-4d37-9f48-481dc3ed7f92/images/60b43428-a394-11f0-b42d-8af640abeb71_0.jpg"
                                  alt={T('剪纸艺术')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.paperCutting.title')}</h4>
                                <p className="text-sm text-gray-600">{t('home.craftsmanship.paperCutting.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('剪')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>

                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-site-img.cdn.bcebos.com/9a7d0c63-f903-427a-ad1a-27b66fde57d1/images/60e0a9b8-a394-11f0-9d75-ced54ea2a831_0.jpg"
                                  alt={T('漆器工艺')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.lacquerware.title')}</h4>
                                <p className="text-sm text-gray-600">{t('home.craftsmanship.lacquerware.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('漆')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>

                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-site-img.cdn.bcebos.com/ec30dc1a-a24a-4eb3-81f4-5143f1d9743b/images/60e64dd2-a394-11f0-ab42-ead8d933836c_0.jpg"
                                  alt={T('玉雕艺术')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.jadeCarving.title')}</h4>
                                <p className="text-sm text-gray-600">{t('home.craftsmanship.jadeCarving.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('玉')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>

                      <OptimizedScrollTrigger animation="fadeInUp">
                        <Optimized3DCard>
                          
                            <div className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 bg-gradient-to-br from-white to-red-50/30 hover:scale-[1.02] interactive-enhanced">
                              <div className="relative w-full h-48 overflow-hidden">
                                <img src="https://miaoda-img.cdn.bcebos.com/img/corpus/6ad8a65e7361472faa50c25a5d13ee91.jpg"
                                  alt={T('竹编工艺')}
                                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                                    onError={imgOnError}
      />
                              </div>
                              <div className="p-4">
                                <h4 className="font-semibold text-gray-900 mb-1">{t('home.craftsmanship.bambooWeaving.title')}</h4>
                                <p className="text-sm text-gray-600 mb-[2px]">{t('home.craftsmanship.bambooWeaving.description')}</p>
                              </div>
                              <div className="absolute top-2 right-2">
                                <SealStamp text={T('竹')} size={16} />
                              </div>
                            </div>
                          
                        </Optimized3DCard>
                      </OptimizedScrollTrigger>
                    </div>
                  </div>
                </InkDiffusion>
              </OptimizedScrollTrigger>
          </div>
        </section>
    </ViewportRenderer>
      {/* 微信快捷导航 - 仅在微信环境显示 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

      </div>
      {/* 视频生成工作室对话框 */}
      <Suspense fallback={null}>
        <VideoGenerationStudio 
          open={showVideoStudio} 
          onOpenChange={setShowVideoStudio} 
        />
      </Suspense>
    </div>
    </>
  );
};

export default Home;