<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '../stores/user'
import BaseButton from '../components/ui/BaseButton.vue'
import LoginDialog from '../components/ui/LoginDialog.vue'
import {
  SparklesIcon,
  ArrowRightOnRectangleIcon,
  MicrophoneIcon,
} from '@heroicons/vue/24/outline'

const { locale } = useI18n()
const router = useRouter()
const userStore = useUserStore()

// ========== 导航栏状态 ==========
const showUserMenu = ref(false)

function switchLocale(lang: 'en' | 'zh') {
  locale.value = lang
  localStorage.setItem('locale', lang)
}

// ========== 登录对话框状态 ==========
const showLoginDialog = ref(false)

// ========== 创作入口 ==========
// 旧的创作变量已移除，现在只负责跳转
function openCreateModal() {
  if (!userStore.user) {
    showLoginDialog.value = true
    return
  }
  // 跳转到后台创作
  router.push({ path: '/my-stories', query: { openCreate: 'true' } })
}

function openVoiceStudio() {
  if (!userStore.user) {
    showLoginDialog.value = true
    return
  }
  router.push('/voice-studio')
}

function scrollToFeatures() {
  document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })
}

// ========== 统计数据 (静态模拟) ==========
// const storiesCount = 10000
// const familiesCount = 5000
// const satisfactionCount = 99

</script>

<template>
  <div class="landing-page min-h-screen flex flex-col">
    <!-- ========== 导航栏 ========== -->
    <nav class="sticky top-0 z-50 bg-[#FDFBF7]/90 backdrop-blur-md border-b border-stone-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <router-link to="/" class="text-2xl font-bold tracking-tight text-amber-600 flex items-center gap-2">
            <SparklesIcon class="w-6 h-6" />
            <span>梦语织机</span>
          </router-link>
          
          <div class="hidden md:flex space-x-8">
            <a href="#features" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">功能</a>
            <a href="#how-it-works" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">使用方法</a>
            <a href="#faq" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">常见问题</a>
          </div>

          <div class="flex items-center space-x-4">
            <div class="flex items-center bg-white rounded-lg border border-stone-200 p-1">
              <button
                class="px-2 py-1 text-xs font-medium rounded-md transition-colors"
                :class="locale === 'en' ? 'bg-stone-100 text-stone-900' : 'text-stone-500 hover:text-stone-900'"
                @click="switchLocale('en')"
              >
                EN
              </button>
              <button
                class="px-2 py-1 text-xs font-medium rounded-md transition-colors"
                :class="locale === 'zh' ? 'bg-amber-100 text-amber-900' : 'text-stone-500 hover:text-stone-900'"
                @click="switchLocale('zh')"
              >
                中文
              </button>
            </div>
            
            <template v-if="userStore.user">
              <div class="relative">
                <button class="flex items-center space-x-2 text-stone-700 hover:text-amber-600 transition-colors" @click="showUserMenu = !showUserMenu">
                  <img
                    v-if="userStore.user.avatar_url"
                    :src="userStore.user.avatar_url"
                    :alt="userStore.user.name"
                    class="w-8 h-8 rounded-full border border-stone-200"
                  />
                  <div v-else class="w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center font-bold">
                    {{ userStore.user.name.charAt(0) }}
                  </div>
                  <span class="font-medium hidden sm:inline">{{ userStore.user.name }}</span>
                </button>
                
                <div v-if="showUserMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-stone-100 py-1 origin-top-right transform transition-all z-50">
                   <div class="px-4 py-2 border-b border-stone-50">
                      <p class="text-sm text-stone-500">已登录为</p>
                      <p class="text-sm font-medium text-stone-900 truncate">{{ userStore.user.name }}</p>
                   </div>
                   <router-link to="/my-stories" class="block px-4 py-2 text-sm text-stone-700 hover:bg-stone-50">我的故事</router-link>
                   <router-link to="/profiles" class="block px-4 py-2 text-sm text-stone-700 hover:bg-stone-50">孩子档案</router-link>
                   <button @click="userStore.logout(); showUserMenu = false" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-stone-50 flex items-center gap-2">
                    <ArrowRightOnRectangleIcon class="w-4 h-4" />
                    退出登录
                  </button>
                </div>
              </div>
            </template>
            <template v-else>
              <BaseButton size="sm" @click="showLoginDialog = true">登录 / 注册</BaseButton>
            </template>
          </div>
        </div>
      </div>
    </nav>
    <div v-if="showUserMenu" class="fixed inset-0 z-40" @click="showUserMenu = false"></div>

    <!-- ========== Hero Section ========== -->
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
             <div class="inline-flex items-center gap-2 px-3 py-1 bg-amber-50 text-amber-700 text-sm font-medium rounded-full mb-6">
                <span>✨</span> 专为 3-8 岁孩子设计的魔法故事机
             </div>
             <h1 class="text-5xl md:text-6xl font-bold text-stone-900 mb-6 leading-tight">
                为孩子编织
                <span class="text-amber-600">温暖的童年记忆</span>
             </h1>
             <p class="text-xl text-stone-600 mb-8 leading-relaxed">
                每一个孩子都是天生的梦想家。我们用 AI 科技，将天马行空的想象编织成独一无二的有声绘本，陪伴孩子快乐成长。
             </p>
             <div class="flex flex-col sm:flex-row gap-4">
                <BaseButton size="lg" @click="openCreateModal" class="shadow-xl shadow-amber-200/50">
                    <SparklesIcon class="h-5 w-5 mr-2" />
                    开始创作故事
                </BaseButton>
                <BaseButton size="lg" variant="secondary" @click="openVoiceStudio">
                    <MicrophoneIcon class="h-5 w-5 mr-2" />
                    进入语音共创
                </BaseButton>
                <button @click="scrollToFeatures" class="px-6 py-3 rounded-xl font-semibold text-stone-600 bg-white border border-stone-200 hover:border-amber-400 hover:text-amber-700 transition-all shadow-sm">
                   了解更多功能
                </button>
             </div>
             
             <!-- Trust Indicators -->
             <div class="mt-12 flex items-center gap-8 text-stone-500">
                <div class="flex -space-x-2">
                   <div class="w-8 h-8 rounded-full bg-stone-200 border-2 border-white"></div>
                   <div class="w-8 h-8 rounded-full bg-stone-300 border-2 border-white"></div>
                   <div class="w-8 h-8 rounded-full bg-stone-400 border-2 border-white"></div>
                   <div class="w-8 h-8 rounded-full bg-stone-100 border-2 border-white flex items-center justify-center text-xs font-bold">+2k</div>
                </div>
                <div class="text-sm">
                   已有 <span class="font-bold text-stone-800">5,000+</span> 个家庭正在使用
                </div>
             </div>
          </div>
          
          <!-- Hero Visual -->
          <div class="relative">
             <!-- 背景装饰圆 -->
             <div class="absolute top-0 right-0 w-72 h-72 bg-amber-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
             <div class="absolute bottom-0 left-0 w-72 h-72 bg-orange-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>

             <!-- Preview Card -->
             <div class="relative bg-white p-6 rounded-2xl shadow-xl transform rotate-1 hover:rotate-0 transition-transform duration-500 border border-stone-100">
                <div class="aspect-[4/3] bg-stone-100 rounded-xl mb-4 overflow-hidden relative group">
                   <!-- Placeholder Image -->
                   <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618331835717-801e976710b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-80 group-hover:scale-105 transition-transform duration-700"></div>
                   <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-stone-800 shadow-sm">
                      绘本插画
                   </div>
                </div>
                <h3 class="text-xl font-bold text-stone-900 mb-2">小狐狸的第一次探险</h3>
                <p class="text-stone-500 text-sm leading-relaxed mb-4">
                   这是一个关于勇气和友谊的故事。小狐狸第一次离开家，在森林里遇到了需要帮助的小松鼠...
                </p>
                <div class="flex items-center justify-between">
                   <div class="flex gap-2">
                      <span class="px-2 py-1 bg-amber-50 text-amber-700 text-xs font-bold rounded-lg">勇气</span>
                      <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-bold rounded-lg">友谊</span>
                   </div>
                   <div class="w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center">
                      <SparklesIcon class="w-4 h-4" />
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>

    <!-- ========== Features Section ========== -->
    <section id="features" class="py-24 bg-white scroll-mt-16">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
             <h2 class="text-3xl font-bold text-stone-900 mb-4">为什么选择梦语织机？</h2>
             <p class="text-lg text-stone-600 max-w-2xl mx-auto">我们不仅仅是在生成故事，更是在为孩子创造一个安全、温暖、富有教育意义的成长空间。</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🎨</div>
                <h3 class="text-xl font-bold text-stone-900 mb-3">AI 绘本创作</h3>
                <p class="text-stone-600">根据故事内容自动生成精美插画，让文字活起来，培养孩子的艺术审美。</p>
             </div>
             <div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🌱</div>
                <h3 class="text-xl font-bold text-stone-900 mb-3">个性化成长档案</h3>
                <p class="text-stone-600">为每个孩子定制专属的主角人设，将性格培养和习惯养成融入故事之中。</p>
             </div>
             <div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🎙️</div>
                <h3 class="text-xl font-bold text-stone-900 mb-3">温暖语音陪伴</h3>
                <p class="text-stone-600">像爸爸妈妈一样的温柔讲述，无论何时何地，都能给孩子最长情的陪伴。</p>
             </div>
          </div>
       </div>
    </section>

    <!-- ========== How It Works Section ========== -->
    <section id="how-it-works" class="py-24 bg-[#FDFBF7] scroll-mt-16 relative overflow-hidden">
       <!-- Background decoration -->
       <div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-stone-200 to-transparent"></div>
       
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="text-center mb-16">
             <h2 class="text-3xl font-bold text-stone-900 mb-4">只需三步，开启奇妙旅程</h2>
             <p class="text-lg text-stone-600">零门槛操作，让创意的火花瞬间变成精彩的故事。</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
             <!-- Connector Line (Desktop) -->
             <div class="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 bg-stone-200 -z-10"></div>
             
             <!-- Step 1 -->
             <div class="text-center group">
                <div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
                   <span class="text-4xl">📝</span>
                   <div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">1</div>
                </div>
                <h3 class="text-xl font-bold text-stone-900 mb-2">建立档案</h3>
                <p class="text-stone-600">输入孩子的名字、年龄和兴趣，让故事里的主角就是他自己。</p>
             </div>

             <!-- Step 2 -->
             <div class="text-center group">
                <div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
                   <span class="text-4xl">✨</span>
                   <div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">2</div>
                </div>
                <h3 class="text-xl font-bold text-stone-900 mb-2">输入灵感</h3>
                <p class="text-stone-600">"想做一个关于勇敢的小恐龙的故事"，一句话告诉 AI 你的想法。</p>
             </div>

             <!-- Step 3 -->
             <div class="text-center group">
                <div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
                   <span class="text-4xl">📖</span>
                   <div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">3</div>
                </div>
                <h3 class="text-xl font-bold text-stone-900 mb-2">生成绘本</h3>
                <p class="text-stone-600">稍等片刻，一个图文并茂、配有语音的专属绘本就诞生了。</p>
             </div>
          </div>
       </div>
    </section>

    <!-- ========== Testimonials Section (家长评价) ========== -->
    <section id="testimonials" class="py-24 bg-white scroll-mt-16">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
             <h2 class="text-3xl font-bold text-stone-900 mb-4">听听家长们怎么说</h2>
             <p class="text-lg text-stone-600">超过 5000 个家庭正在使用梦语织机陪伴孩子成长</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             <!-- Review 1 -->
             <div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
                <div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
                <p class="text-stone-700 italic mb-6 relative z-10">
                   自从有了梦语织机，每天晚上的睡前时光都成了我和女儿最期待的时刻。她最喜欢把自己变成故事里的魔法公主，看到她眼里闪着光，我也觉得好幸福。
                </p>
                <div class="flex items-center gap-4">
                   <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-xl">👩</div>
                   <div>
                      <div class="font-bold text-stone-900">张雨涵妈妈</div>
                      <div class="text-xs text-stone-500">5岁女孩的母亲</div>
                   </div>
                </div>
             </div>

             <!-- Review 2 -->
             <div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
                <div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
                <p class="text-stone-700 italic mb-6 relative z-10">
                   工作太忙，以前总是没时间给儿子编故事。现在我只需要输入一个想法，AI 就能帮我生成一个完整又富有教育意义的故事，而且声音特别温柔，简直是哄睡神器！
                </p>
                <div class="flex items-center gap-4">
                   <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-xl">👨</div>
                   <div>
                      <div class="font-bold text-stone-900">李强爸爸</div>
                      <div class="text-xs text-stone-500">4岁男孩的父亲</div>
                   </div>
                </div>
             </div>

             <!-- Review 3 -->
             <div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
                <div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
                <p class="text-stone-700 italic mb-6 relative z-10">
                   作为幼儿园老师，我经常用它来生成针对性的教育故事。比如班里有小朋友不爱刷牙，我就做了一个《牙齿王国的保卫战》，孩子们特别吃这一套！效果满分。
                </p>
                <div class="flex items-center gap-4">
                   <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-xl">🧑‍🏫</div>
                   <div>
                      <div class="font-bold text-stone-900">王老师</div>
                      <div class="text-xs text-stone-500">资深幼教</div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>

    <!-- ========== Story Gallery (精选绘本展) ========== -->
    <section id="gallery" class="py-24 bg-[#FDFBF7] relative overflow-hidden">
       <!-- 装饰背景 -->
       <div class="absolute top-0 inset-x-0 h-px bg-stone-200"></div>
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="flex flex-col md:flex-row items-end justify-between mb-12 gap-6">
             <div>
                <h2 class="text-3xl font-bold text-stone-900 mb-2">探索无限可能</h2>
                <p class="text-stone-600">从奇幻冒险到温馨日常，每一个故事都是独一无二的宝藏</p>
             </div>
             <BaseButton class="shrink-0" @click="openCreateModal">我也要创作</BaseButton>
          </div>

          <!-- 滚动展示区 -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
             <!-- Book 1 -->
             <div class="group cursor-pointer">
                <div class="aspect-[3/4] rounded-2xl bg-amber-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
                   <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1535905557558-afc4877a26fc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
                   <div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/60 to-transparent text-white opacity-0 group-hover:opacity-100 transition-opacity">
                      <span class="text-sm font-bold">阅读故事 &rarr;</span>
                   </div>
                </div>
                <h3 class="font-bold text-stone-800 text-lg">魔法书店的奇妙夜</h3>
                <p class="text-xs text-stone-500">奇幻 • 想象力</p>
             </div>
             <!-- Book 2 -->
             <div class="group cursor-pointer">
                <div class="aspect-[3/4] rounded-2xl bg-blue-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
                   <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1459369510627-9efbee1e6051?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
                </div>
                <h3 class="font-bold text-stone-800 text-lg">小熊的蜂蜜罐</h3>
                <p class="text-xs text-stone-500">分享 • 友谊</p>
             </div>
             <!-- Book 3 -->
             <div class="group cursor-pointer">
                <div class="aspect-[3/4] rounded-2xl bg-green-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
                   <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1503919005314-30d93d07d823?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
                </div>
                <h3 class="font-bold text-stone-800 text-lg">森林里的音乐会</h3>
                <p class="text-xs text-stone-500">艺术 • 自在</p>
             </div>
             <!-- Book 4 -->
             <div class="group cursor-pointer">
                <div class="aspect-[3/4] rounded-2xl bg-purple-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
                   <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
                </div>
                <h3 class="font-bold text-stone-800 text-lg">冲向月球！</h3>
                <p class="text-xs text-stone-500">科学 • 探索</p>
             </div>
          </div>
       </div>
    </section>

    <!-- ========== FAQ Section ========== -->
    <section id="faq" class="py-24 bg-white scroll-mt-16">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
             <h2 class="text-3xl font-bold text-stone-900 mb-4">常见问题解答</h2>
             <p class="text-lg text-stone-600">这里是关于使用梦语织机的一些详细解答</p>
          </div>

          <div class="space-y-4">
             <!-- FAQ 1: Customization -->
             <details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
                   我可以把孩子设为故事主角吗？
                   <span class="transform group-open:rotate-180 transition-transform">▼</span>
                </summary>
                <div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
                   当然可以！这是我们最核心的功能。您可以在"孩子档案"中设置孩子的名字、年龄、性格特点，AI 会根据这些信息量身定制故事，让孩子在故事中看到自己的影子，代入感极强。
                </div>
             </details>
             
             <!-- FAQ 2: Voice -->
             <details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
                   生成的故事有语音朗读吗？
                   <span class="transform group-open:rotate-180 transition-transform">▼</span>
                </summary>
                <div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
                   是的，我们采用最先进的 TTS（文本转语音）技术，能够生成媲美真人的情感语音。您可以选择不同的讲述人音色（如温柔妈妈、磁性爸爸等），让故事听起来生动有趣。
                </div>
             </details>

             <!-- FAQ 3: Education -->
             <details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
                   可以设定特定的教育目标吗？比如"如果不爱吃蔬菜"？
                   <span class="transform group-open:rotate-180 transition-transform">▼</span>
                </summary>
                <div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
                   没问题！在创作故事时，您可以选择或者自定义"教育主题"。例如输入"教孩子为什么要吃蔬菜"或者"如何克服怕黑的心理"，AI 会巧妙地将这些道理融入有趣的剧情中，避免生硬的说教。
                </div>
             </details>

             <!-- FAQ 4: Download/Print -->
             <details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
                   生成的绘本可以下载打印吗？
                   <span class="transform group-open:rotate-180 transition-transform">▼</span>
                </summary>
                <div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
                   支持。对于会员用户，我们提供高清 PDF 导出功能。您可以将绘本下载并打印出来，装订成独一无二的实体书，成为孩子珍贵的成长纪念。
                </div>
             </details>

             <!-- FAQ 5: Safety -->
             <details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
                   故事内容对孩子安全吗？
                   <span class="transform group-open:rotate-180 transition-transform">▼</span>
                </summary>
                <div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
                   安全是我们最重视的原则。我们的 AI 模型经过严格训练和多重内容过滤，确保输出的内容阳光、积极，绝不包含恐怖、暴力或成人向内容，您可以放心给孩子使用。
                </div>
             </details>
          </div>
       </div>
    </section>

    <!-- Footer -->
    <footer class="bg-stone-50 border-t border-stone-200 py-12 mt-auto">
       <div class="max-w-7xl mx-auto px-4 text-center text-stone-500 text-sm">
          <p>&copy; 2024 DreamWeaver AI. 用爱编织每一个梦想。</p>
       </div>
    </footer>
    
    <LoginDialog v-model="showLoginDialog" />
  </div>
</template>

<style>
/* Custom animations if needed */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}
</style>
