<template>
  <section class="section">
    <div class="container">
      <!-- 资质认证 -->
      <CommonSectionTitle title="资质认证" />
      <div class="qual-list">
        <div v-for="c in certifications" :key="c.title" class="qual-item qual-item--cert">
          <div class="qual-icon">🏆</div>
          <div class="qual-body">
            <h3 class="qual-title">{{ c.title }}</h3>
            <p class="qual-detail">{{ c.detail }}</p>
          </div>
        </div>
      </div>

      <!-- 小红书WILL大会获奖照片 -->
      <div class="award-gallery">
        <div class="award-gallery-grid">
          <img src="/images/awards/will-award-person.jpg" alt="呼籁旅行创始人在2026小红书WILL商业大会领取年度成长型品牌奖" class="award-img award-img--main" loading="lazy" />
          <img src="/images/awards/will-award-trophy.jpg" alt="2026小红书WILL商业大会年度成长型品牌奖杯" class="award-img" loading="lazy" />
          <img src="/images/awards/will-award-stage.jpg" alt="2026小红书WILL商业大会年度成长型品牌颁奖典礼" class="award-img" loading="lazy" />
        </div>
        <p class="award-caption">2026小红书WILL商业大会 · 年度成长型品牌 · 文旅行业仅6家获此殊荣</p>
      </div>

      <!-- 服务保障 -->
      <CommonSectionTitle title="服务保障" style="margin-top: 48px;" />
      <div class="qual-list qual-list--grid">
        <div v-for="g in guarantees" :key="g.title" class="qual-item qual-item--guarantee">
          <div class="qual-icon">✅</div>
          <div class="qual-body">
            <h3 class="qual-title">{{ g.title }}</h3>
            <p class="qual-detail">{{ g.detail }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  certifications: { type: Array, required: true },
  guarantees: { type: Array, required: true }
})
</script>

<style lang="less" scoped>
.qual-list {
  display: flex;
  flex-direction: column;
  gap: @space-md;
  max-width: 800px;
  margin: 0 auto;
}
.qual-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: @space-md;
  .respond-md({
    grid-template-columns: 1fr;
  });
}
.qual-item {
  display: flex;
  align-items: flex-start;
  gap: @space-sm;
  padding: @space-lg;
  border-radius: @border-radius-md;
  transition: transform 0.2s ease;
  &:hover { transform: translateY(-2px); }
}
.qual-item--cert {
  background: @color-primary-bg;
  border-left: 3px solid @color-primary;
}
.qual-item--guarantee {
  background: #f8faf5;
  border-left: 3px solid @color-primary;
}
.qual-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.qual-body { flex: 1; }
.qual-title {
  font-size: @font-size-md;
  color: @color-text-primary;
  margin-bottom: @space-xs;
  font-weight: @font-weight-bold;
}
.qual-detail {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
}

.award-gallery {
  max-width: 800px;
  margin: @space-xl auto 0;
}

.award-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: @space-sm;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.award-img {
  width: 100%;
  border-radius: @border-radius-md;
  object-fit: cover;
  aspect-ratio: 3 / 4;

  @media (max-width: 768px) {
    aspect-ratio: 4 / 3;
  }
}

.award-caption {
  text-align: center;
  margin-top: @space-md;
  font-size: @font-size-xs;
  color: @color-text-muted;
}
</style>
