---
import MainLayout from "../layouts/MainLayout.astro";
import FlipCard from "../components/aceternity/FlipCard.astro";
import ParticleButton from "../components/aceternity/ParticleButton.astro";
import MagneticElement from "../components/aceternity/MagneticElement.astro";
import ParallaxCard from "../components/aceternity/ParallaxCard.astro";
import NeonButton from "../components/aceternity/NeonButton.astro";
import SpotlightCard from "../components/aceternity/SpotlightCard.astro";
import HoverGlow from "../components/aceternity/HoverGlow.astro";
import ScrollReveal from "../components/aceternity/ScrollReveal.astro";
---

<MainLayout title="交互效果展示 - 河北游礼">
  <div class="py-16 bg-gray-50 dark:bg-color-dark-bg">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto mb-16 text-center">
        <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">酷炫交互效果展示</h1>
        <p class="text-lg text-gray-600 dark:text-gray-400">探索我们网站上使用的各种交互和悬停效果</p>
      </div>
      
      <!-- 各种效果分组 -->
      <div class="space-y-24">
      
        <!-- 3D翻转卡片 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">3D翻转卡片</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <FlipCard 
              frontTitle="长城" 
              backTitle="世界文化遗产"
            >
              <div slot="front" class="text-center">
                <img src="https://picsum.photos/seed/great-wall-flip/300/200" alt="长城" class="rounded-lg mb-4 mx-auto"/>
                <p class="text-gray-600 dark:text-gray-400">中国最具代表性的文化象征</p>
              </div>
              <div slot="back" class="text-center">
                <p class="mb-4 text-white">河北拥有全国最长的长城线，包括八达岭、金山岭等著名景点。</p>
                <a href="/attractions/great-wall" class="inline-block px-4 py-2 bg-white text-color-primary-600 rounded-md hover:bg-gray-100">了解更多</a>
              </div>
            </FlipCard>
            
            <FlipCard 
              frontTitle="蔚县剪纸" 
              backTitle="非遗文化"
            >
              <div slot="front" class="text-center">
                <img src="https://picsum.photos/seed/paper-cutting-flip/300/200" alt="蔚县剪纸" class="rounded-lg mb-4 mx-auto"/>
                <p class="text-gray-600 dark:text-gray-400">传统民间艺术</p>
              </div>
              <div slot="back" class="text-center">
                <p class="mb-4 text-white">蔚县剪纸以其独特的造型和鲜明的色彩闻名，展现了浓郁的民俗风情。</p>
                <a href="/culture/paper-cutting" class="inline-block px-4 py-2 bg-white text-color-primary-600 rounded-md hover:bg-gray-100">了解更多</a>
              </div>
            </FlipCard>
            
            <FlipCard 
              frontTitle="保定莲花酥" 
              backTitle="传统美食"
            >
              <div slot="front" class="text-center">
                <img src="https://picsum.photos/seed/lotus-pastry-flip/300/200" alt="保定莲花酥" class="rounded-lg mb-4 mx-auto"/>
                <p class="text-gray-600 dark:text-gray-400">清代宫廷点心</p>
              </div>
              <div slot="back" class="text-center">
                <p class="mb-4 text-white">酥脆可口，形如莲花，是保定地区传统的伴手礼。</p>
                <a href="/cuisine/lotus-pastry" class="inline-block px-4 py-2 bg-white text-color-primary-600 rounded-md hover:bg-gray-100">了解更多</a>
              </div>
            </FlipCard>
          </div>
        </section>
        
        <!-- 粒子按钮 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">粒子特效按钮</h2>
          <div class="flex flex-wrap justify-center gap-8">
            <ParticleButton 
              text="探索河北景点" 
              href="/attractions" 
              color="#4f46e5"
            />
            
            <ParticleButton 
              text="了解文化遗产" 
              href="/culture" 
              color="#e11d48"
            />
            
            <ParticleButton 
              text="品尝地方美食" 
              href="/cuisine" 
              color="#059669"
              particleCount={40}
            />
          </div>
        </section>
        
        <!-- 磁性元素 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">磁性吸附效果</h2>
          <div class="flex flex-wrap justify-center gap-12">
            <MagneticElement strength={3} className="text-center">
              <div class="w-32 h-32 bg-color-primary-500 dark:bg-color-dark-primary-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg">
                弱吸附效果
              </div>
            </MagneticElement>
            
            <MagneticElement strength={7} className="text-center">
              <div class="w-32 h-32 bg-color-primary-600 dark:bg-color-dark-primary-700 rounded-full flex items-center justify-center text-white font-bold shadow-lg">
                中吸附效果
              </div>
            </MagneticElement>
            
            <MagneticElement strength={10} className="text-center">
              <div class="w-32 h-32 bg-color-primary-700 dark:bg-color-dark-primary-800 rounded-full flex items-center justify-center text-white font-bold shadow-lg">
                强吸附效果
              </div>
            </MagneticElement>
          </div>
        </section>
        
        <!-- 视差卡片 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">3D视差卡片</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <ParallaxCard 
              backgroundImage="https://picsum.photos/seed/parallax-card-1/800/600"
              depth={7}
            >
              <h3 class="text-xl font-bold text-white mb-3 parallax-item" data-depth="8">承德避暑山庄</h3>
              <p class="text-white mb-4 parallax-item" data-depth="5">中国清代皇家园林，世界文化遗产</p>
              <a href="/attractions/summer-resort" class="inline-block px-4 py-2 bg-white text-color-primary-600 rounded-md hover:bg-gray-100 parallax-item" data-depth="3">了解更多</a>
            </ParallaxCard>
            
            <ParallaxCard
              backgroundImage="https://picsum.photos/seed/parallax-card-2/800/600"
              depth={5}
            >
              <h3 class="text-xl font-bold text-white mb-3 parallax-item" data-depth="8">秦皇岛海滨</h3>
              <p class="text-white mb-4 parallax-item" data-depth="5">碧海蓝天，金色沙滩</p>
              <a href="/attractions/qinhuangdao" class="inline-block px-4 py-2 bg-white text-color-primary-600 rounded-md hover:bg-gray-100 parallax-item" data-depth="3">了解更多</a>
            </ParallaxCard>
          </div>
        </section>
        
        <!-- 霓虹灯按钮 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">霓虹灯按钮</h2>
          <div class="flex flex-wrap justify-center gap-8">
            <NeonButton 
              text="蓝色按钮" 
              color="rgb(59, 130, 246)" 
              glowSize="medium"
              glowIntensity="medium"
            />
            
            <NeonButton 
              text="绿色按钮" 
              color="rgb(16, 185, 129)" 
              glowSize="large"
              glowIntensity="high"
            />
            
            <NeonButton 
              text="红色按钮" 
              color="rgb(239, 68, 68)" 
              glowSize="small"
              glowIntensity="low"
              pulseAnimation={false}
            />
          </div>
        </section>
        
        <!-- 聚光灯卡片 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">聚光灯卡片</h2>
          <div class="max-w-2xl mx-auto">
            <SpotlightCard 
              title="正定古城"
              description="河北省历史文化名城，保存有大量的历史文物古迹。建于战国时期，是全国首批历史文化名城之一，素有'北方雄镇'之称。城内现存有隆兴寺、临济寺、广惠寺三塔等众多历史遗迹和文物古迹，是中国保存最为完好的古城之一。"
              className="p-10 bg-white dark:bg-color-dark-card rounded-lg shadow-md"
              color="rgba(16, 185, 129, 0.35)"
              spotlightSize="large"
              spotlightIntensity="strong"
            >
              <div class="mt-4 mb-4">
                <div class="flex items-center gap-2 text-gray-600 dark:text-gray-400 text-sm">
                  <span>旅游景点类型:</span>
                  <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full dark:bg-color-dark-surface dark:text-gray-400">历史文化</span>
                  <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full dark:bg-color-dark-surface dark:text-gray-400">古建筑</span>
                  <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full dark:bg-color-dark-surface dark:text-gray-400">名城古镇</span>
                </div>
              </div>
              <a href="/attractions/zhengding" class="inline-block mt-2 text-color-primary-600 hover:text-color-primary-700 dark:text-color-primary-400 dark:hover:text-color-primary-300 font-medium">了解更多 &rarr;</a>
            </SpotlightCard>
          </div>
        </section>
        
        <!-- 悬停发光效果 -->
        <section>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">悬停发光效果</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <HoverGlow intensity="subtle" className="relative">
              <div class="p-8 bg-white dark:bg-color-dark-card rounded-lg shadow-md">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">内画鼻烟壶</h3>
                <p class="text-gray-600 dark:text-gray-400">河北衡水传统工艺品，在小小的鼻烟壶内壁上绘制精美图案。</p>
              </div>
            </HoverGlow>
            
            <HoverGlow intensity="medium" color="#4f46e5" className="relative">
              <div class="p-8 bg-white dark:bg-color-dark-card rounded-lg shadow-md">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">曲阳石雕</h3>
                <p class="text-gray-600 dark:text-gray-400">历史悠久的传统工艺，技艺精湛，形态逼真。</p>
              </div>
            </HoverGlow>
            
            <HoverGlow intensity="strong" color="#e11d48" className="relative">
              <div class="p-8 bg-white dark:bg-color-dark-card rounded-lg shadow-md">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">景泰蓝</h3>
                <p class="text-gray-600 dark:text-gray-400">一种金属胎掐丝珐琅工艺品，色彩华丽绚烂。</p>
              </div>
            </HoverGlow>
          </div>
        </section>
      </div>
    </div>
  </div>
</MainLayout> 