<template>
  <section id="guide" class="section section--gray">
    <div class="container">
      <CommonSectionTitle :title="st('products.selectionGuide', '不知道选哪个？')" :subtitle="st('products.selectionGuide', '按您的情况推荐', 'subtitle')" />
      <div class="guide-groups">
        <div v-for="group in guideGroups" :key="group.title" class="guide-group">
          <h3 class="guide-group-title">{{ group.title }}</h3>
          <div class="guide-items">
            <div v-for="item in group.items" :key="item.condition" class="guide-item">
              <div class="guide-item-top">
                <span class="guide-condition">{{ item.condition }}</span>
                <span class="guide-arrow">→</span>
                <span class="guide-rec">{{ getProductName(item.recommendation) }}</span>
              </div>
              <p class="guide-reason">{{ item.reason }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  guide: { type: Object, required: true },
  versions: { type: Array, required: true },
})
const st = await useSectionTitles()

const guideGroups = computed(() => [
  { title: '按假期长度', items: props.guide.byVacationLength },
  { title: '按孩子年龄', items: props.guide.byChildAge },
  { title: '按旅行偏好', items: props.guide.byPreference },
])

function getProductName(id) {
  if (id === 'summer-camp') return '小蒙马亲子游学营'
  const v = props.versions.find(v => v.id === id)
  return v ? v.name : id
}
</script>

<style lang="less" scoped>
.guide-groups {
  display: flex;
  flex-direction: column;
  gap: @space-2xl;
  max-width: 800px;
  margin: 0 auto;
}

.guide-group-title {
  font-size: @font-size-lg;
  color: @color-primary;
  margin-bottom: @space-md;
  padding-left: @space-md;
  border-left: 3px solid @color-primary;
}

.guide-items {
  display: flex;
  flex-direction: column;
  gap: @space-md;
}

.guide-item {
  padding: @space-lg;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  border: 1px solid @color-border;
  transition: border-color @transition-fast, box-shadow @transition-fast;

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

.guide-item-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: @space-sm;
  margin-bottom: @space-xs;
}

.guide-condition {
  font-weight: @font-weight-medium;
  color: @color-text-primary;
  background: @color-bg-gray;
  padding: @space-xs @space-sm;
  border-radius: @border-radius-sm;
  font-size: @font-size-sm;
}

.guide-arrow {
  color: @color-primary;
  font-weight: @font-weight-bold;
}

.guide-rec {
  color: @color-primary;
  font-weight: @font-weight-bold;
  font-size: @font-size-base;
}

.guide-reason {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin: 0;
  line-height: @line-height-base;
}
</style>
