---
import MainLayout from "../layouts/MainLayout.astro";
import MorphingText from "../components/aceternity/MorphingText.astro";

// 导航数据
---

<MainLayout title="首页 - 河北游礼">
  <!-- 主页文字特效区域 - 使用更简洁的背景设计 -->
  <section class="hero-section relative w-full h-screen flex items-center justify-center overflow-hidden">
    <!-- 单一背景层 - 合并多层背景效果 -->
    <div class="absolute inset-0 bg-hero-gradient"></div>
    
    <!-- 文字特效容器 -->
    <div class="relative z-10 text-center px-4 w-full max-w-7xl mx-auto">
      <div class="text-size-boost">
        <MorphingText 
          phrases={["这么近", "那么美", "周末来河北"]} 
          className="mb-8 text-primary-800 dark:text-primary-300 font-extrabold"
          textSize="text-8xl sm:text-9xl md:text-[10rem] lg:text-[12rem]"
        />
      </div>
    </div>
  </section>
  
</MainLayout>

<style>
  /* 合并背景样式为单一更高效的背景 */
  .bg-hero-gradient {
    background: linear-gradient(to bottom right, var(--color-primary-50), white, var(--color-secondary-100));
    position: relative;
  }
  
  /* 增加网格图案作为背景装饰 */
  .bg-hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(180, 83, 9, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(180, 83, 9, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
  }
  
  /* 特殊样式来增强文字大小 */
  .text-size-boost :global(.text-span-1),
  .text-size-boost :global(.text-span-2) {
    font-size: clamp(4rem, 15vw, 14rem) !important;
    line-height: 1.1 !important;
  }
  
  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .bg-hero-gradient {
      background: linear-gradient(to bottom right, var(--color-dark-primary-100), var(--color-dark-bg), var(--color-dark-primary-50));
    }
  }
</style>