<template>
  <section class="wechat-cta" :class="`wechat-cta--${bg}`">
    <div class="container">
      <div class="wechat-cta-inner">
        <div class="wechat-cta-text">
          <h2 class="wechat-cta-title">{{ title }}</h2>
          <p class="wechat-cta-desc">{{ description }}</p>
          <div v-if="links && links.length" class="wechat-cta-links">
            <NuxtLink
              v-for="link in links"
              :key="link.to"
              :to="link.to"
              class="wechat-cta-link"
            >
              {{ link.text }} →
            </NuxtLink>
          </div>
        </div>
        <div class="wechat-cta-qr">
          <img src="/images/contact/qrcode-wechat.jpg" alt="定制师微信二维码" class="wechat-cta-qrimg" />
          <span class="wechat-cta-qrlabel">扫码添加定制师微信</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  title: { type: String, default: '想聊聊行程？扫码找定制师' },
  description: { type: String, default: '添加微信，定制师根据你的家庭情况和假期安排，1对1推荐合适的行程方案。' },
  links: { type: Array, default: () => [] },
  bg: { type: String, default: 'light' },
})
</script>

<style lang="less" scoped>
.wechat-cta {
  .section-padding();
}

.wechat-cta--light {
  background: @color-bg-gray;
}

.wechat-cta--white {
  background: #fff;
}

.wechat-cta--green {
  background: linear-gradient(135deg, @color-primary-dark 0%, @color-primary 100%);

  .wechat-cta-title {
    color: #fff;
    &::after { display: none; }
  }
  .wechat-cta-desc { color: rgba(255, 255, 255, 0.85); }
  .wechat-cta-link { color: rgba(255, 255, 255, 0.9); &:hover { color: #fff; } }
  .wechat-cta-qrlabel { color: rgba(255, 255, 255, 0.8); }
}

.wechat-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: @space-2xl;
  max-width: 720px;
  margin: 0 auto;

  @media (max-width: 640px) {
    flex-direction: column;
    text-align: center;
    gap: @space-lg;
  }
}

.wechat-cta-text {
  flex: 1;
}

.wechat-cta-title {
  font-size: @font-size-xl;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-sm;

  &::after { display: none; }
}

.wechat-cta-desc {
  font-size: @font-size-base;
  line-height: @line-height-relaxed;
  color: @color-text-secondary;
}

.wechat-cta-links {
  margin-top: @space-md;
  display: flex;
  gap: @space-md;

  @media (max-width: 640px) {
    justify-content: center;
  }
}

.wechat-cta-link {
  font-size: @font-size-sm;
  color: @color-primary;
  text-decoration: none;
  font-weight: @font-weight-medium;

  &:hover {
    color: @color-primary-dark;
  }
}

.wechat-cta-qr {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: @space-xs;
}

.wechat-cta-qrimg {
  width: 140px;
  height: 140px;
  border-radius: @border-radius-sm;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wechat-cta-qrlabel {
  font-size: @font-size-xs;
  color: @color-text-muted;
}
</style>
