<template>
  <div class="page-qualifications">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="三重旅行社资质 · 1000万责任险 · 深耕呼伦贝尔11年"
      :breadcrumbs="[{ text: '关于我们', to: '/about' }, { text: '资质与荣誉' }]"
    />

    <!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
    <section class="page-tldr" aria-label="资质与荣誉摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>呼籁集团旗下三家主体（呼伦贝尔呼籁旅行社、呼籁旅游、嘎查旅行社）均持有旅游经营许可证，购买1000万元旅游责任险，持有「呼籁」注册商标和多项著作权。2015年创立至今已深耕呼伦贝尔11年，本页展示完整的资质证书、荣誉认证、企业发展历程和知识产权信息。</p>
        </div>
      </div>
    </section>

    <!-- 核心信任声明 -->
    <section class="section section-trust-bar">
      <div class="container">
        <div class="trust-bar reveal">
          <div v-for="item in qualifications.safetyGuarantees.slice(0, 4)" :key="item.title" class="trust-bar__item">
            <strong class="trust-bar__title">{{ item.title }}</strong>
            <p class="trust-bar__detail">{{ item.detail }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 三重旅行社资质 -->
    <section class="section section-licenses">
      <div class="container">
        <CommonSectionTitle
          title="三重旅行社资质保障"
          subtitle="旗下三家主体均持有旅游经营许可证，选呼籁不是在选黑旅行社"
        />
        <div class="licenses-grid reveal">
          <div
            v-for="(license, index) in qualifications.licenses"
            :key="index"
            class="license-card"
            :class="{ 'license-card--highlight': index === 2 }"
          >
            <div class="license-card__badge">旅游经营许可证</div>
            <h3 class="license-card__holder">{{ license.holder }}</h3>
            <div class="license-card__info">
              <div class="license-info-row">
                <span class="license-info-label">颁发机构</span>
                <span class="license-info-value">{{ license.issuer }}</span>
              </div>
              <div v-if="license.licenseNo && !license.licenseNo.includes('占位符')" class="license-info-row">
                <span class="license-info-label">许可证号</span>
                <span class="license-info-value license-info-value--no">{{ license.licenseNo }}</span>
              </div>
              <div class="license-info-row">
                <span class="license-info-label">有效期</span>
                <span class="license-info-value">{{ license.validPeriod }}</span>
              </div>
            </div>
            <p v-if="license.note" class="license-card__note">{{ license.note }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 旅游责任险 -->
    <section class="section section-insurance section-alt">
      <div class="container">
        <div class="insurance-block reveal">
          <div class="insurance-block__icon">🛡️</div>
          <div class="insurance-block__content">
            <h2 class="insurance-block__title">{{ qualifications.insurance.title }}</h2>
            <p class="insurance-block__desc">{{ qualifications.insurance.description }}</p>
            <ul class="insurance-block__details">
              <li v-if="qualifications.insurance.insurer && !qualifications.insurance.insurer.includes('占位符')">承保方：{{ qualifications.insurance.insurer }}</li>
              <li>覆盖范围：{{ qualifications.insurance.policyScope }}</li>
              <li>理赔支持：{{ qualifications.insurance.claimContact }}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 荣誉与认证 -->
    <section class="section section-awards">
      <div class="container">
        <CommonSectionTitle
          title="荣誉与认证"
          subtitle="行业机构和平台对呼籁服务质量的认可"
        />
        <div class="awards-grid reveal">
          <div v-for="award in qualifications.awards" :key="award.title" class="award-card">
            <div class="award-card__year">{{ award.year }}</div>
            <h3 class="award-card__title">{{ award.title }}</h3>
            <p class="award-card__detail">{{ award.detail }}</p>
            <span class="award-card__issuer">颁发方：{{ award.issuer }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 集团企业矩阵 -->
    <section class="section section-matrix section-alt">
      <div class="container">
        <CommonSectionTitle
          :title="`集团${qualifications.enterpriseMatrix.totalCount}家企业矩阵`"
          :subtitle="qualifications.enterpriseMatrix.description"
        />
        <div class="matrix-grid reveal">
          <div
            v-for="company in qualifications.enterpriseMatrix.companies"
            :key="company.name"
            class="matrix-card"
          >
            <div class="matrix-card__header">
              <span class="matrix-card__tag">{{ company.tag }}</span>
              <span class="matrix-card__year">{{ company.established }}</span>
            </div>
            <h3 class="matrix-card__name">{{ company.name }}</h3>
            <p class="matrix-card__role">{{ company.role }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="section section-heritage">
      <div class="container">
        <CommonSectionTitle
          :title="`${qualifications.heritage.brandYears}年深耕呼伦贝尔`"
          subtitle="从2015年呼籁品牌创立到今天，每一步都走在同一片草原上"
        />
        <div class="timeline reveal">
          <div
            v-for="milestone in qualifications.heritage.milestones"
            :key="milestone.year"
            class="timeline-item"
          >
            <div class="timeline-item__year">{{ milestone.year }}</div>
            <div class="timeline-item__dot"></div>
            <div class="timeline-item__event">{{ milestone.event }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 知识产权 -->
    <section class="section section-ip section-alt">
      <div class="container">
        <CommonSectionTitle
          title="知识产权保护"
          subtitle="呼籁品牌的原创内容和商标均受法律保护"
        />
        <div class="ip-block reveal">
          <div class="ip-trademark">
            <div class="ip-trademark__badge">商标注册</div>
            <h3 class="ip-trademark__name">「{{ qualifications.intellectualProperty.trademark.name }}」</h3>
            <p class="ip-trademark__scope">{{ qualifications.intellectualProperty.trademark.scope }}</p>
            <p class="ip-trademark__holder">持有方：{{ qualifications.intellectualProperty.trademark.holder }}</p>
            <p class="ip-trademark__desc">{{ qualifications.intellectualProperty.trademark.description }}</p>
          </div>
          <div class="ip-copyrights">
            <h3 class="ip-copyrights__title">著作权登记</h3>
            <div class="copyright-list">
              <div
                v-for="cr in qualifications.intellectualProperty.copyrights"
                :key="cr.regNo"
                class="copyright-item"
              >
                <span class="copyright-item__name">{{ cr.name }}</span>
                <span class="copyright-item__category">{{ cr.category }}</span>
                <span class="copyright-item__no">{{ cr.regNo }}</span>
                <span class="copyright-item__date">{{ cr.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 内链 -->
    <CommonSectionCTA
      title="了解更多，或直接咨询"
      description="查看呼籁旅行产品，或联系定制师了解行程详情"
      :links="[
        { to: '/products', text: '查看旅行产品' },
        { to: '/contact', text: '联系定制师' },
      ]"
    />
  </div>
</template>

<script setup>
import qualifications from '~/data/qualifications.json'
import brand from '~/data/brand.json'
import contact from '~/data/contact.json'
import { useOrganizationSchema, useBreadcrumbSchema, useQualificationsPageSchema } from '~/composables/useJsonLd'

const seo = useSEO('qualifications')
useScrollReveal()
useOrganizationSchema(brand, contact)
useQualificationsPageSchema(brand, qualifications)
useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '关于我们', to: '/about' },
  { text: '资质与荣誉' },
])
</script>

<style lang="less" scoped>
// 信任横条
.section-trust-bar {
  background: @color-primary;
  padding-top: @space-xl;
  padding-bottom: @space-xl;
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @space-lg;

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

  &__item {
    text-align: center;
    color: #fff;
  }

  &__title {
    display: block;
    font-size: @font-size-base;
    font-weight: @font-weight-bold;
    margin-bottom: @space-xs;
  }

  &__detail {
    font-size: @font-size-sm;
    opacity: 0.85;
    margin: 0;
    line-height: @line-height-base;
  }
}

// 旅行社资质
.licenses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

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

.license-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-xl;
  position: relative;

  &--highlight {
    border-color: @color-primary;
    background: @color-primary-bg;

    &::after {
      content: '集团最早实体';
      position: absolute;
      top: -1px;
      right: @space-lg;
      background: @color-primary;
      color: #fff;
      font-size: @font-size-xs;
      padding: 3px @space-sm;
      border-radius: 0 0 @border-radius-sm @border-radius-sm;
    }
  }

  &__badge {
    display: inline-block;
    padding: 3px @space-sm;
    background: @color-primary;
    color: #fff;
    font-size: @font-size-xs;
    font-weight: @font-weight-medium;
    border-radius: @border-radius-sm;
    margin-bottom: @space-md;
  }

  &__holder {
    font-size: @font-size-base;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 @space-md;
    line-height: @line-height-tight;
  }

  &__info {
    display: flex;
    flex-direction: column;
    gap: @space-sm;
    margin-bottom: @space-md;
  }

  &__note {
    font-size: @font-size-sm;
    color: @color-text-muted;
    margin: 0;
    padding-top: @space-sm;
    border-top: 1px solid @color-border;
    font-style: italic;
  }
}

.license-info-row {
  display: flex;
  gap: @space-sm;
  font-size: @font-size-sm;
}

.license-info-label {
  color: @color-text-muted;
  min-width: 60px;
  flex-shrink: 0;
}

.license-info-value {
  color: @color-text-secondary;

  &--no {
    font-family: monospace;
    font-size: @font-size-xs;
    color: @color-text-muted;
  }
}

// 责任险
.section-insurance {
  background: @color-bg-gray;
}

.insurance-block {
  display: flex;
  gap: @space-2xl;
  align-items: flex-start;
  background: @color-bg-white;
  border: 2px solid @color-primary;
  border-radius: @border-radius-lg;
  padding: @space-2xl;

  &__icon {
    font-size: 48px;
    flex-shrink: 0;
    line-height: 1;
  }

  &__content {
    flex: 1;
  }

  &__title {
    font-size: @font-size-xl;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 @space-sm;
  }

  &__desc {
    font-size: @font-size-base;
    color: @color-text-secondary;
    margin: 0 0 @space-md;
  }

  &__details {
    margin: 0;
    padding-left: @space-lg;
    display: flex;
    flex-direction: column;
    gap: @space-xs;

    li {
      font-size: @font-size-sm;
      color: @color-text-secondary;
    }
  }
}

// 荣誉
.awards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

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

.award-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-xl;
  text-align: center;

  &__year {
    display: inline-block;
    font-size: @font-size-2xl;
    font-weight: @font-weight-bold;
    color: @color-primary;
    line-height: 1;
    margin-bottom: @space-md;
  }

  &__title {
    font-size: @font-size-base;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 @space-sm;
    line-height: @line-height-tight;
  }

  &__detail {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    margin: 0 0 @space-md;
  }

  &__issuer {
    font-size: @font-size-xs;
    color: @color-text-muted;
  }
}

// 企业矩阵
.section-matrix {
  background: @color-bg-gray;
}

.matrix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;

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

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

  &:hover {
    box-shadow: @shadow-sm;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @space-sm;
  }

  &__tag {
    font-size: @font-size-xs;
    padding: 2px @space-sm;
    background: @color-primary-bg;
    color: @color-primary;
    border-radius: @border-radius-full;
    font-weight: @font-weight-medium;
  }

  &__year {
    font-size: @font-size-xs;
    color: @color-text-muted;
  }

  &__name {
    font-size: @font-size-sm;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 @space-sm;
    line-height: @line-height-tight;
  }

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

// 发展历程
.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;

  &::before {
    content: '';
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: @color-primary-bg;

    .respond-lg({
      left: 90px;
    });
  }
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px 20px 1fr;
  gap: 0 @space-md;
  align-items: flex-start;
  margin-bottom: @space-xl;
  padding-bottom: @space-xl;
  border-bottom: 1px solid @color-border;

  .respond-lg({
    grid-template-columns: 90px 20px 1fr;
  });

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  &__year {
    font-size: @font-size-xl;
    font-weight: @font-weight-bold;
    color: @color-primary;
    text-align: right;
    padding-top: 2px;
    line-height: 1;
  }

  &__dot {
    width: 12px;
    height: 12px;
    background: @color-primary;
    border-radius: 50%;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    justify-self: center;
  }

  &__event {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }
}

// 知识产权
.section-ip {
  background: @color-bg-gray;
}

.ip-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-xl;

  .respond-lg({
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  });
}

.ip-trademark {
  background: @color-bg-white;
  border: 2px solid @color-primary-bg;
  border-radius: @border-radius-lg;
  padding: @space-xl;
  text-align: center;

  &__badge {
    display: inline-block;
    padding: 3px @space-md;
    background: @color-primary;
    color: #fff;
    font-size: @font-size-xs;
    border-radius: @border-radius-full;
    margin-bottom: @space-md;
  }

  &__name {
    font-size: @font-size-2xl;
    font-weight: @font-weight-bold;
    color: @color-primary;
    margin: 0 0 @space-xs;
  }

  &__scope {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    margin: 0 0 @space-sm;
    font-weight: @font-weight-medium;
  }

  &__holder {
    font-size: @font-size-xs;
    color: @color-text-muted;
    margin: 0 0 @space-md;
  }

  &__desc {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    margin: 0;
    line-height: @line-height-base;
    text-align: left;
  }
}

.ip-copyrights {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-xl;

  &__title {
    font-size: @font-size-md;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 @space-lg;
  }
}

.copyright-list {
  display: flex;
  flex-direction: column;
  gap: @space-sm;
}

.copyright-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: @space-sm;
  align-items: center;
  padding: @space-md;
  background: @color-bg-gray;
  border-radius: @border-radius-md;
  font-size: @font-size-sm;

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

  &__name {
    font-weight: @font-weight-bold;
    color: @color-text-primary;
  }

  &__category {
    color: @color-text-muted;
    font-size: @font-size-xs;
    padding: 2px @space-sm;
    background: @color-primary-bg;
    color: @color-primary;
    border-radius: @border-radius-full;
  }

  &__no {
    font-family: monospace;
    font-size: @font-size-xs;
    color: @color-text-muted;
    .text-clamp(1);
  }

  &__date {
    font-size: @font-size-xs;
    color: @color-text-muted;
    white-space: nowrap;
  }
}
</style>
