<template>
  <div class="page-about">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="一个只做呼伦贝尔的旅行品牌"
      :breadcrumbs="[{ text: '关于我们' }]"
    />

    <!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
    <section class="page-tldr" aria-label="关于我们摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>呼籁旅行创立于2015年，是内蒙古呼伦贝尔本地旅行品牌，11年专注呼伦贝尔一个目的地。旗下持有三重旅行社经营许可证，购买1000万旅游责任险，已服务超10000个家庭。集团旗下涵盖旅行社、牧场商贸、研学教育等多家主体。</p>
        </div>
      </div>
    </section>

    <!-- 品牌故事 -->
    <AboutBrandStory :story="about.story" class="reveal" />

    <!-- 集团实力 -->
    <AboutSubsidiaryGrid :subsidiaries="about.subsidiaries" class="reveal" />

    <!-- 资质认证 & 服务保障 -->
    <AboutQualificationList :certifications="about.certifications" :guarantees="about.guarantees" class="reveal" />

    <!-- 小红书 -->
    <AboutXiaohongshuShowcase :xhs="about.xiaohongshu" class="reveal" />

    <!-- 知识产权 -->
    <AboutCopyrightList :copyrights="about.copyrights" :trademark="about.trademark" class="reveal" />

    <!-- 品牌IP -->
    <AboutMascotShowcase class="reveal" />

    <!-- 团队介绍 -->
    <AboutTeamIntro :team="about.team" class="reveal" />

    <!-- 8个温度时刻 -->
    <section class="section section--gray reveal" aria-label="服务旅程">
      <div class="container">
        <CommonSectionTitle :title="about.serviceJourney.title" :subtitle="about.serviceJourney.subtitle" />
        <ol class="journey-list">
          <li v-for="m in about.serviceJourney.moments" :key="m.step" class="journey-item">
            <span class="journey-step">{{ m.step }}</span>
            <div class="journey-body">
              <strong class="journey-name">{{ m.name }}</strong>
              <p class="journey-detail">{{ m.detail }}</p>
            </div>
          </li>
        </ol>
      </div>
    </section>

    <!-- 企业文化 -->
    <AboutCultureValues :culture="about.culture" class="reveal" />

    <!-- 内链 -->
    <CommonSectionCTA
      title="想了解我们的产品？"
      description="查看额吉的故乡V9系列和小蒙马夏令营"
      :links="[{ to: '/products', text: '查看呼伦贝尔定制游产品' }]"
    />
  </div>
</template>

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

const seo = useSEO('about')
useScrollReveal()
useOrganizationSchema(brand, contact)
usePersonSchema(about.founder)
useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '关于我们' },
])
</script>

<style lang="less" scoped>
.journey-list {
  list-style: none;
  padding: 0;
  margin: @space-xl 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

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

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

.journey-item {
  display: flex;
  gap: @space-md;
  align-items: flex-start;
}

.journey-step {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: @color-primary;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
}

.journey-body {
  flex: 1;
}

.journey-name {
  display: block;
  font-size: @font-size-base;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

.journey-detail {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin: 0;
}
</style>
