<template>
  <div class="page-summer-camp">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="呼伦贝尔草原亲子游学营·6天5晚·每期7-9组家庭·5-12岁"
      :breadcrumbs="[{ text: '小蒙马亲子游学营' }]"
      background-image="/images/summer-camp/river-banner.jpg"
    />

    <!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
    <section class="page-tldr" aria-label="夏令营摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>小蒙马亲子游学营：呼伦贝尔草原亲子游学营2.0，6天5晚，每期7-9组家庭，5-12岁亲子同行。草原音乐会、写生创作、白桦林非遗研学、亲子马术、做列巴、1200米滑草畅玩，双领队+全程摄影师+餐食全含。2025年11期期期满员，2026年开设30期。</p>
        </div>
      </div>
    </section>

    <!-- 核心定位 -->
    <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">每期7-9组家庭</span>
              <span class="camp-meta-item">亲子同行</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 实拍照片 + 期数数据 -->
    <section v-if="camp && images" class="section section--warm reveal">
      <div class="container">
        <div class="camp-gallery">
          <div class="camp-photo">
            <img
              :src="images.summerCamp.river"
              alt="小蒙马亲子游学营在莫日格勒河旁举旗合影，背景是蜿蜒的草原河流"
              width="1600"
              height="1067"
              loading="lazy"
            />
            <span class="camp-photo-tag">莫日格勒河</span>
          </div>
          <div class="camp-photo">
            <img
              :src="images.summerCamp.grassland"
              alt="小蒙马亲子游学营亲子家庭在呼伦贝尔草原上合影，手持小蒙马标志牌"
              width="1600"
              height="1067"
              loading="lazy"
            />
            <span class="camp-photo-tag">草原合影</span>
          </div>
          <div class="camp-photo">
            <img
              :src="images.summerCamp.birch"
              alt="小蒙马亲子游学营亲子家庭在白桦林合影，家长和孩子们一起开心比耶"
              width="1600"
              height="1067"
              loading="lazy"
            />
            <span class="camp-photo-tag">白桦林研学</span>
          </div>
          <div class="camp-photo">
            <img
              :src="images.summerCamp.graduation"
              alt="小蒙马亲子游学营结营仪式，家长和孩子们手持结营证书在营地合影"
              width="1600"
              height="1067"
              loading="lazy"
            />
            <span class="camp-photo-tag">结营仪式</span>
          </div>
        </div>
        <div class="camp-stats">
          <div class="camp-stat-item">
            <span class="camp-stat-value">{{ camp.sessions['2025'] }}</span>
            <span class="camp-stat-label">2025年成功举办期数</span>
          </div>
          <div class="camp-stat-item">
            <span class="camp-stat-value">{{ camp.sessions['2026'] }}</span>
            <span class="camp-stat-label">2026年计划开营期数</span>
          </div>
          <div class="camp-stat-item">
            <span class="camp-stat-value">7-9</span>
            <span class="camp-stat-label">每期家庭数</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 中间 CTA：看完照片后的转化入口 -->
    <CommonSectionCTA
      title="想了解营期安排和费用？"
      description="添加微信客服，获取最新营期时间和报名方式"
      :links="[{ to: '/contact', text: '咨询小蒙马亲子游学营' }]"
    />

    <!-- 四大原则 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="行程设计四大原则" subtitle="每一处安排都经过精心考量" />
        <div class="principles-grid">
          <div v-for="(p, i) in camp.principles" :key="i" class="principle-card">
            <div class="principle-index">{{ String(i + 1).padStart(2, '0') }}</div>
            <template v-if="p && typeof p === 'object'">
              <h3 class="principle-name">{{ p.title }}</h3>
              <p v-if="p.desc" class="principle-desc">{{ p.desc }}</p>
            </template>
            <h3 v-else class="principle-name">{{ p }}</h3>
          </div>
        </div>
      </div>
    </section>

    <!-- 行程概览 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="6天行程概览" subtitle="不赶路、不折腾，每一天都有记忆点" />
        <div class="itinerary-list">
          <div v-for="(day, i) in camp.itinerary" :key="i" class="itinerary-item">
            <div class="itinerary-day">D{{ day.day || i + 1 }}</div>
            <div class="itinerary-content">
              <p class="itinerary-title">{{ day.title }}</p>
              <p v-if="day.summary" class="itinerary-text">{{ day.summary }}</p>
              <p v-if="day.distance" class="itinerary-distance">{{ day.distance }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心体验 -->
    <section v-if="camp" class="section section--warm reveal">
      <div class="container">
        <CommonSectionTitle title="行程核心体验" subtitle="草原写生·非遗研学·民俗体验，每一天都有收获" />
        <div class="activities-grid">
          <div v-for="(activity, i) in camp.coreActivities" :key="i" class="activity-card">
            <div class="activity-index">{{ String(i + 1).padStart(2, '0') }}</div>
            <p class="activity-text">{{ activity }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 与V9的区别 -->
    <section v-if="camp" class="section reveal">
      <div class="container">
        <CommonSectionTitle title="小蒙马亲子游学营 vs 额吉的故乡" subtitle="两种产品，两种精彩" />
        <div class="compare-cards">
          <div class="compare-card compare-card--camp">
            <h3>小蒙马亲子游学营</h3>
            <ul>
              <li>7-9组家庭拼团出发，孩子有同龄玩伴</li>
              <li>两位亲子领队全程带队，家长可以当甩手掌柜</li>
              <li>每天都有设计好的研学课程和亲子活动</li>
              <li>全程跟拍摄影师，每天精修照片发群</li>
              <li>餐食全含，不用操心吃什么</li>
              <li>6天5晚，节奏舒缓不赶路</li>
            </ul>
          </div>
          <div class="compare-card compare-card--v9">
            <h3>额吉的故乡·亲子版</h3>
            <ul>
              <li>一单一团，你的家庭独享一辆车、一位领队</li>
              <li>路线更远，含满洲里，覆盖草原+森林+边境+城市</li>
              <li>正餐不含，可以自己探索当地美食</li>
              <li>累计10000+家庭选择，国家版权局版权认证产品</li>
              <li>行程灵活自由，按自己节奏走</li>
              <li>4-7天多版本可选</li>
            </ul>
            <NuxtLink to="/products" class="compare-link">查看V9系列 →</NuxtLink>
          </div>
        </div>
        <p class="compare-detail">{{ camp.differenceFromV9 }}</p>
      </div>
    </section>

    <!-- 家长常见问题（可折叠） -->
    <section class="section section--gray">
      <div class="container">
        <CommonSectionTitle title="家长常见问题" />
        <div class="camp-faq">
          <FaqItem
            v-for="(item, i) in campFAQ"
            :key="item.question || item.q"
            :question="item.question || item.q"
            :answer="item.answer || item.a"
            :initial-open="i === 0"
          />
        </div>
      </div>
    </section>

    <!-- 底部 CTA：双入口 -->
    <CommonSectionCTA
      title="想了解家庭一起出行的产品？"
      description="额吉的故乡V9系列，一家一单一车，全家共享草原时光"
      :links="[
        { to: '/contact', text: '咨询小蒙马亲子游学营' },
        { to: '/products', text: '查看额吉的故乡V9系列' },
      ]"
    />
  </div>
</template>

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

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

const seo = useSEO('summer-camp')
useScrollReveal()

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '小蒙马亲子游学营' },
])
useSummerCampSchema(camp.value)

// 家长关心的问题（从数据文件读取）
const campFAQ = computed(() => camp.value?.faq || [])
</script>

<style lang="less" scoped>
.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: @color-primary;
  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: @color-primary;
  background: @color-primary-bg;
  padding: @space-xs @space-md;
  border-radius: @border-radius-full;
  font-weight: @font-weight-medium;
}

// 实拍照片
.camp-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;
  margin-bottom: @space-xl;

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

.camp-photo {
  position: relative;
  border-radius: @border-radius-lg;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform @transition-slow;
  }

  &:hover img {
    transform: scale(1.03);
  }
}

.camp-photo-tag {
  position: absolute;
  bottom: @space-sm;
  left: @space-sm;
  font-size: @font-size-xs;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: @space-xs @space-sm;
  border-radius: @border-radius-full;
}

.camp-stats {
  display: flex;
  justify-content: center;
  gap: @space-xl;
  flex-wrap: wrap;
}

.camp-stat-item {
  text-align: center;
}

.camp-stat-value {
  display: block;
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  color: @color-primary;
  line-height: 1.2;
}

.camp-stat-label {
  display: block;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  margin-top: @space-xs;
}

// 四大原则
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @space-md;

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

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

  &:hover {
    border-color: @color-primary-lighter;
    box-shadow: @shadow-md;
  }
}

.principle-index {
  font-size: 28px;
  font-weight: @font-weight-bold;
  color: @color-primary-lighter;
  line-height: 1;
  margin-bottom: @space-sm;
}

.principle-name {
  font-size: @font-size-md;
  color: @color-text-primary;
  font-weight: @font-weight-medium;
}

.principle-desc {
  margin-top: @space-xs;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: 1.6;
}

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

.itinerary-item {
  display: flex;
  gap: @space-md;
  align-items: flex-start;
  padding: @space-md @space-lg;
  background: @color-bg-gray;
  border-radius: @border-radius-md;
  border-left: 3px solid @color-primary;
  transition: background @transition-fast, border-color @transition-fast;

  &:hover {
    background: @color-primary-bg;
  }
}

.itinerary-day {
  flex-shrink: 0;
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-primary;
  min-width: 32px;
}

.itinerary-content {
  flex: 1;
}

.itinerary-title {
  font-size: @font-size-base;
  font-weight: @font-weight-medium;
  color: @color-text-primary;
  margin: 0 0 @space-xs;
}

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

.itinerary-distance {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin: @space-xs 0 0;
}

// 核心活动
.activities-grid {
  .grid-responsive();
}

.activity-card {
  padding: @space-xl;
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  border: 1px solid @color-border;
  transition: border-color @transition-fast, box-shadow @transition-fast;

  &:hover {
    border-color: @color-primary-lighter;
    box-shadow: @shadow-md;
  }
}

.activity-index {
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  margin-bottom: @space-sm;
  line-height: 1;
  color: @color-primary-lighter;
}

.activity-text {
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  margin: 0;
}

// 对比卡片
.compare-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;
  max-width: 800px;
  margin: 0 auto @space-xl;

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

.compare-card {
  padding: @space-xl;
  border-radius: @border-radius-lg;
  border: 1px solid @color-border;

  h3 {
    font-size: @font-size-lg;
    font-weight: @font-weight-bold;
    margin-bottom: @space-md;
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: @space-sm;
  }

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

    &::before {
      content: '·';
      position: absolute;
      left: 0;
      color: @color-primary;
      font-weight: bold;
    }
  }
}

.compare-card--camp {
  background: @color-primary-bg;
  border-color: fadeout(@color-primary, 80%);

  h3 {
    color: @color-primary;
  }
}

.compare-card--v9 {
  background: @color-bg-white;
}

.compare-link {
  display: inline-block;
  margin-top: @space-md;
  font-size: @font-size-sm;
  color: @color-primary;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.compare-detail {
  max-width: 800px;
  margin: 0 auto;
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  padding: @space-lg;
  background: @color-bg-gray;
  border-radius: @border-radius-md;
}

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