<template>
  <div class="page-winter-camp">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="呼伦贝尔雪原亲子冬令营·7天6晚·每期8组家庭"
      :breadcrumbs="[{ text: '小蒙马冬季营' }]"
    />

    <!-- TL;DR -->
    <section class="page-tldr" aria-label="冬令营摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>小蒙马冬令营：7天6晚呼伦贝尔雪原亲子冬令营，每期仅限8组家庭。冰雪越野、雪地骑马、冬捕体验、蒙古包住宿，零下30度的童话世界。</p>
        </div>
      </div>
    </section>

    <!-- 风景大图 -->
    <div class="scenic-banner">
      <img src="/images/seasons/winter-yurt.jpg" alt="冬季呼伦贝尔雪原蒙古包" loading="eager" />
    </div>

    <!-- 核心定位 -->
    <section v-if="camp" class="section">
      <div class="container">
        <div class="camp-hero">
          <div class="camp-mascot">
            <img
              :src="images.mascot.xiaomengma"
              alt="小蒙马 - 冬季亲子营吉祥物"
              width="200"
              height="200"
              loading="lazy"
            />
          </div>
          <div class="camp-intro">
            <h2 class="camp-slogan">一片干净的雪原，一段只属于你们的记忆</h2>
            <p class="camp-positioning">{{ camp.positioning }}</p>
            <div class="camp-meta">
              <span class="camp-meta-item">{{ camp.days }}天{{ camp.nights }}晚</span>
              <span class="camp-meta-item">每期{{ camp.maxFamilies }}组家庭</span>
              <span class="camp-meta-item">今年仅{{ camp.totalSessions }}期</span>
              <span class="camp-meta-item">{{ camp.ageRange }}亲子</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 为什么选呼伦贝尔 -->
    <section v-if="camp" class="section section--ice reveal">
      <div class="container">
        <CommonSectionTitle title="为什么是呼伦贝尔？" subtitle="不是更冷，而是更纯粹" />
        <div class="why-block">
          <p>{{ camp.whyHulunbuir }}</p>
        </div>
      </div>
    </section>

    <!-- 亲子营优势 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="亲子营的优势" subtitle="和独立小包团相比" />
        <div class="advantages-grid">
          <div v-for="(adv, i) in camp.campAdvantages" :key="i" class="advantage-card">
            <span class="advantage-check">✓</span>
            <p>{{ adv }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 咨询 CTA -->
    <CommonSectionCTA
      title="想了解营期安排和费用？"
      description="添加微信客服，获取最新营期时间和报名方式"
      :links="[{ to: '/contact', text: '咨询小蒙马冬季营' }]"
    />

    <!-- 住宿保障 -->
    <section v-if="camp" class="section section--warm reveal">
      <div class="container">
        <CommonSectionTitle title="住宿安排" subtitle="住得舒服，玩得才能惬意" />
        <div class="hotels-grid">
          <div v-for="(hotel, i) in camp.hotels" :key="i" class="hotel-card">
            <div class="hotel-star">{{ hotel.star }}</div>
            <h3 class="hotel-name">{{ hotel.name }}</h3>
            <span class="hotel-nights">{{ hotel.nights }}</span>
            <p class="hotel-desc">{{ hotel.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 7天行程 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="7天行程概览" subtitle="不赶路、不折腾，每一天都有记忆点" />
        <div class="itinerary-list">
          <details v-for="day in camp.itinerary" :key="day.day" class="itinerary-item" :open="day.day <= 2">
            <summary class="itinerary-header">
              <span class="itinerary-day">D{{ day.day }}</span>
              <span class="itinerary-title">{{ day.title }}</span>
              <span v-if="day.hotel" class="itinerary-hotel">🏨 {{ day.hotel }}</span>
            </summary>
            <div class="itinerary-body">
              <p class="itinerary-summary">{{ day.summary }}</p>
              <ul class="itinerary-highlights">
                <li v-for="(h, j) in day.highlights" :key="j">{{ h }}</li>
              </ul>
            </div>
          </details>
        </div>
      </div>
    </section>

    <!-- 冬季风景 -->
    <div class="scenic-duo reveal">
      <img src="/images/seasons/winter-yurt.jpg" alt="冬季雪原蒙古包日落" loading="lazy" />
      <img src="/images/seasons/winter-frost.jpg" alt="大兴安岭雾凇森林" loading="lazy" />
    </div>

    <!-- 摄影师 -->
    <section v-if="camp" class="section section--ice reveal">
      <div class="container">
        <CommonSectionTitle title="随行摄影师" subtitle="不错过每一个自然的瞬间" />
        <div class="photographer-block">
          <h3>摄影师：{{ camp.photographer.name }}</h3>
          <p>{{ camp.photographer.description }}</p>
          <p class="photographer-special">📍 {{ camp.photographer.specialDay2 }}</p>
        </div>
      </div>
    </section>

    <!-- 穿衣指南 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="冬季穿衣指南" subtitle="穿对了，冷也是一种享受" />
        <div class="clothing-grid">
          <div class="clothing-card">
            <h4>👕 上身</h4>
            <p>{{ camp.winterClothing.upper }}</p>
          </div>
          <div class="clothing-card">
            <h4>👖 下身</h4>
            <p>{{ camp.winterClothing.lower }}</p>
          </div>
          <div class="clothing-card">
            <h4>👟 鞋子</h4>
            <p>{{ camp.winterClothing.shoes }}</p>
          </div>
          <div class="clothing-card">
            <h4>🧣 配件</h4>
            <p>{{ camp.winterClothing.accessories }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 随行服务 -->
    <section v-if="camp" class="section section--warm reveal">
      <div class="container">
        <CommonSectionTitle title="随行服务配置" subtitle="比夏季更谨慎、更细致" />
        <div class="service-grid">
          <div v-for="(s, i) in camp.serviceConfig" :key="i" class="service-item">
            <span class="service-icon">👤</span>
            <span>{{ s }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 家长FAQ -->
    <section v-if="camp?.faq" class="section section--gray">
      <div class="container">
        <CommonSectionTitle title="家长常见问题" />
        <div class="camp-faq">
          <FaqItem
            v-for="(item, i) in camp.faq"
            :key="item.question"
            :question="item.question"
            :answer="item.answer"
            :initial-open="i === 0"
          />
        </div>
      </div>
    </section>

    <!-- 结语 -->
    <section v-if="camp" class="section">
      <div class="container">
        <div class="closing-note">
          <p>{{ camp.closingNote }}</p>
        </div>
      </div>
    </section>

    <!-- 底部 CTA -->
    <CommonSectionCTA
      title="给孩子一次真正的冬天"
      description="小蒙马冬季亲子营，今年仅开3期，全力以赴"
      :links="[
        { to: '/contact', text: '咨询冬季营' },
        { to: '/summer-camp', text: '了解夏季小蒙马' },
      ]"
    />
  </div>
</template>

<script setup>
import { useBreadcrumbSchema } from '~/composables/useJsonLd'

const { data: camp } = await usePublicApi('winter-camp')
const { data: images } = await usePublicApi('images')

const seo = useSEO('winter-camp', {
  title: '小蒙马冬季亲子营 - 呼伦贝尔雪原冬令营·7天6晚·每期8组家庭 - 呼籁旅行',
  description: '呼籁旅行小蒙马冬季亲子营，7天6晚呼伦贝尔+阿尔山雪原冬令营。莫日格勒大雪原、冬季那达慕、狼园探秘、雪地骑马、阿尔山滑雪、不冻河漂流、私汤温泉。每期8组家庭，5-12岁亲子同行。',
  h1: '小蒙马冬季亲子营',
})
useScrollReveal()
useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '小蒙马冬季营' },
])
</script>

<style lang="less" scoped>
// Hero 区
.camp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: @space-xl;
  max-width: 800px;
  margin: 0 auto;

  .respond-md({
    flex-direction: row;
    text-align: left;
    gap: @space-2xl;
  });
}

.camp-mascot {
  flex-shrink: 0;

  img {
    width: 160px;
    height: auto;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
  }
}

.camp-intro {
  flex: 1;
}

.camp-slogan {
  font-size: @font-size-2xl;
  color: #3B82F6;
  font-weight: @font-weight-bold;
  margin-bottom: @space-md;
}

.camp-positioning {
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  margin-bottom: @space-lg;
}

.camp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
}

.camp-meta-item {
  font-size: @font-size-sm;
  color: #3B82F6;
  background: #EFF6FF;
  padding: @space-xs @space-md;
  border-radius: @border-radius-full;
  font-weight: @font-weight-medium;
}

// 为什么呼伦贝尔
.section--ice {
  background: #F0F9FF;
}

.why-block {
  max-width: 800px;
  margin: 0 auto;
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  padding: @space-xl;
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  border-left: 4px solid #3B82F6;
}

// 亲子营优势
.advantages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;
  max-width: 800px;
  margin: 0 auto;

  .respond-md({
    grid-template-columns: repeat(2, 1fr);
  });
}

.advantage-card {
  display: flex;
  gap: @space-md;
  align-items: flex-start;
  padding: @space-lg;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  transition: box-shadow @transition-fast;

  &:hover {
    box-shadow: @shadow-md;
  }

  p {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
    margin: 0;
  }
}

.advantage-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3B82F6;
  color: #fff;
  border-radius: 50%;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
}

// 酒店
.hotels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

  .respond-md({
    grid-template-columns: repeat(3, 1fr);
  });
}

.hotel-card {
  padding: @space-xl;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  text-align: center;
  transition: box-shadow @transition-base, transform @transition-base;

  &:hover {
    box-shadow: @shadow-md;
    transform: translateY(-2px);
  }
}

.hotel-star {
  display: inline-block;
  padding: @space-xs @space-md;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  color: #B45309;
  background: #FEF3C7;
  border-radius: @border-radius-full;
  margin-bottom: @space-sm;
}

.hotel-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

.hotel-nights {
  display: block;
  font-size: @font-size-sm;
  color: #3B82F6;
  font-weight: @font-weight-medium;
  margin-bottom: @space-md;
}

.hotel-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  text-align: left;
}

// 行程
.itinerary-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: @space-sm;
}

.itinerary-item {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  overflow: hidden;
  transition: box-shadow @transition-fast;

  &[open] {
    box-shadow: @shadow-md;
    border-color: #93C5FD;
  }
}

.itinerary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: @space-sm;
  padding: @space-md @space-lg;
  cursor: pointer;
  transition: background @transition-fast;

  &:hover {
    background: #F0F9FF;
  }
}

.itinerary-day {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: #3B82F6;
  min-width: 36px;
}

.itinerary-title {
  flex: 1;
  font-size: @font-size-base;
  font-weight: @font-weight-medium;
  color: @color-text-primary;
}

.itinerary-hotel {
  font-size: @font-size-xs;
  color: @color-text-muted;
}

.itinerary-body {
  padding: 0 @space-lg @space-lg;
  padding-left: calc(@space-lg + 36px + @space-sm);
}

.itinerary-summary {
  font-size: @font-size-sm;
  color: #3B82F6;
  font-weight: @font-weight-medium;
  margin-bottom: @space-md;
}

.itinerary-highlights {
  display: flex;
  flex-direction: column;
  gap: @space-sm;

  li {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
    padding-left: @space-md;
    position: relative;

    &::before {
      content: '❄';
      position: absolute;
      left: 0;
      color: #3B82F6;
      font-size: 10px;
    }
  }
}

// 摄影师
.photographer-block {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;

  h3 {
    font-size: @font-size-xl;
    color: @color-text-primary;
    margin-bottom: @space-md;
  }

  p {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-loose;
    margin-bottom: @space-md;
  }
}

.photographer-special {
  padding: @space-md @space-lg;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  border-left: 3px solid #3B82F6;
  text-align: left;
}

// 穿衣指南
.clothing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;

  .respond-md({
    grid-template-columns: repeat(2, 1fr);
  });

  .respond-lg({
    grid-template-columns: repeat(4, 1fr);
  });
}

.clothing-card {
  padding: @space-lg;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;

  h4 {
    font-size: @font-size-base;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin-bottom: @space-sm;
  }

  p {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }
}

// 服务配置
.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: @space-md;
  max-width: 800px;
  margin: 0 auto;
}

.service-item {
  display: flex;
  align-items: center;
  gap: @space-sm;
  padding: @space-sm @space-lg;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-full;
  font-size: @font-size-sm;
  color: @color-text-secondary;
}

.service-icon {
  font-size: @font-size-base;
}

// 结语
.closing-note {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  font-size: @font-size-lg;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  font-style: italic;
  padding: @space-xl;
  border-top: 1px solid @color-border;
  border-bottom: 1px solid @color-border;
}

// FAQ
.camp-faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: @space-md;
}

// 风景图
.scenic-banner {
  width: 100%;
  overflow: hidden;
  max-height: 480px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.scenic-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 360px;
  overflow: hidden;

  .respond-md({
    grid-template-columns: 1fr 1fr;
  });

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 360px;
  }
}
</style>
