<template>
  <section id="summer-camp" class="section section--green">
    <div class="container">
      <CommonSectionTitle :title="camp.name" :subtitle="`适合${camp.ageRange}青少年`" />

      <!-- 团宠+简介 -->
      <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">
          <p class="camp-positioning">{{ camp.positioning }}</p>
        </div>
      </div>

      <div class="camp-content">
        <div v-if="camp.coreActivities.length" class="camp-activities">
          <h3>核心活动</h3>
          <ul>
            <li v-for="(a, i) in camp.coreActivities" :key="i">{{ a }}</li>
          </ul>
        </div>
        <p class="camp-diff">{{ camp.differenceFromV9 }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import images from '~/data/images.json'
defineProps({ camp: { type: Object, required: true } })
</script>

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

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

.camp-mascot {
  flex-shrink: 0;
  text-align: center;

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

.camp-intro {
  flex: 1;
}

.camp-content { max-width: 800px; margin: 0 auto; }
.camp-positioning { font-size: @font-size-base; color: @color-text-secondary; line-height: @line-height-loose; }
.camp-activities { margin-bottom: @space-lg;
  h3 { font-size: @font-size-md; margin-bottom: @space-md; }
  ul { display: flex; flex-direction: column; gap: @space-sm; }
  li { font-size: @font-size-base; color: @color-text-secondary; padding-left: @space-md; position: relative;
    &::before { content: '·'; position: absolute; left: 0; color: @color-primary; }
  }
}
.camp-diff { font-size: @font-size-base; color: @color-text-muted; padding: @space-md; background: @color-bg-white; border-radius: @border-radius-md; }
</style>
