<template>
  <div class="page-calendar">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="呼伦贝尔什么时候去最好？基于11年带队数据，为您提供每月详细出行参考"
      :breadcrumbs="[{ text: '行程日历' }]"
    />

    <!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
    <section class="page-tldr" aria-label="行程日历摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>呼伦贝尔全年均可出行，最佳旅游时间为6-9月。其中6-8月草原翠绿、那达慕节庆热闹，是亲子出行的旺季；9月白桦林金黄，是摄影爱好者公认的圣地；5月和10月适合错峰出行，游客少价格更优；12月至次年2月适合追求冰雪极寒体验的家庭。本页含逐月温度、景色特征、推荐指数和适合产品。</p>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">

        <!-- Quick recommendation summary -->
        <div class="cal-summary">
          <h2 class="cal-summary-title">呼伦贝尔最佳出行时间一览</h2>
          <div class="summary-grid">
            <div
              v-for="rec in calData.meta.quickRecommendations"
              :key="rec.label"
              class="summary-card"
            >
              <div class="summary-label">{{ rec.label }}</div>
              <div class="summary-months">{{ rec.months }}</div>
              <div class="summary-reason">{{ rec.reason }}</div>
            </div>
          </div>
        </div>

        <!-- Month grid -->
        <h2 class="months-heading">逐月出行指南</h2>
        <div class="months-grid">
          <div
            v-for="m in calData.months"
            :key="m.month"
            :class="['month-card', `month-card--${m.season}`, { 'month-card--peak': m.isPeakSeason }]"
          >
            <!-- Header -->
            <div class="month-header">
              <div class="month-name-area">
                <span class="month-number">{{ m.month }}</span>
                <span class="month-unit">月</span>
                <span class="month-name">{{ m.name }}</span>
              </div>
              <span v-if="m.isPeakSeason" class="peak-badge">旺季</span>
            </div>

            <!-- Star rating -->
            <div class="month-stars" :aria-label="`推荐指数 ${m.ratingStars} 星`">
              <span
                v-for="i in 5"
                :key="i"
                :class="['star', { 'star--active': i <= m.ratingStars }]"
                aria-hidden="true"
              >★</span>
              <span class="stars-label">推荐指数</span>
            </div>

            <!-- Temperature -->
            <div class="month-temp">{{ m.tempRange }}</div>

            <!-- Weather -->
            <p class="month-weather">{{ m.weatherFeature }}</p>

            <!-- Highlights -->
            <ul class="month-highlights">
              <li v-for="(h, i) in m.highlights.slice(0, 3)" :key="i">{{ h }}</li>
            </ul>

            <!-- Clothing -->
            <div class="month-clothing">
              <span class="clothing-label">穿搭</span>
              <span class="clothing-tip">{{ m.clothingTips }}</span>
            </div>

            <!-- Recommended products -->
            <div v-if="m.recommendedProducts.length" class="month-products">
              <span
                v-for="prod in m.recommendedProducts"
                :key="prod"
                class="product-tag"
              >{{ prod }}</span>
            </div>

            <!-- Tagline -->
            <p class="month-tagline">{{ m.tagline }}</p>
          </div>
        </div>

        <!-- SEO text answer section -->
        <div class="cal-answer">
          <h2>呼伦贝尔几月份去最好？详细解答</h2>
          <p>
            呼伦贝尔全年皆可出行，但不同季节体验差异显著。<strong>6月至9月</strong>是最受欢迎的黄金时段：6-8月草原翠绿，那达慕节庆热闹，骑马、露营、亲子出行体验最佳；9月白桦林金黄，草原秋色无双，是摄影爱好者公认的圣地。<strong>5月和10月</strong>是错峰出行的好时机，游客较少、价格相对优惠，同样有独特景观。<strong>冬季（12月至次年2月）</strong>适合追求极寒体验的家庭，冰雪那达慕、冰钓、驯鹿部落是别处难寻的冬日记忆。
          </p>
          <div class="cal-links">
            <CommonInternalLink to="/guides" text="出行指南（穿搭 · 行李清单）" />
            <CommonInternalLink to="/products" text="夏季产品：额吉的故乡V9" />
            <CommonInternalLink to="/products/autumn" text="秋季产品：游牧的森林" />
            <CommonInternalLink to="/products/winter" text="冬季产品：嗨冰雪" />
            <CommonInternalLink to="/contact" text="咨询最佳出行方案" />
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script setup>
import calData from '~/data/calendar.json'
import { useBreadcrumbSchema } from '~/composables/useJsonLd'

const seo = useSEO('calendar')

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '行程日历' },
])

// TouristDestination JSON-LD
useHead({
  script: [{
    key: 'tourist-destination-hulunbuir',
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'TouristDestination',
      name: '呼伦贝尔大草原',
      description: '呼伦贝尔是中国最美草原之一，位于内蒙古自治区东北部，拥有莫日格勒河、额尔古纳湿地、白桦林、呼伦湖等核心景观。最佳旅游时节为6-9月，夏季草原翠绿，秋季白桦金黄。',
      url: 'https://1814.love/calendar',
      image: 'https://1814.love/images/team/hero-grassland.jpg',
      geo: {
        '@type': 'GeoCoordinates',
        latitude: 49.2143,
        longitude: 119.7674,
      },
      address: {
        '@type': 'PostalAddress',
        addressLocality: '呼伦贝尔市',
        addressRegion: '内蒙古自治区',
        addressCountry: 'CN',
      },
      touristType: ['家庭游客', '亲子家庭', '摄影爱好者', '自然爱好者'],
      includesAttraction: [
        { '@type': 'TouristAttraction', name: '莫日格勒河（额吉的故乡）', description: '呼伦贝尔最美河湾，夏季翠绿如画，是呼籁旅行夏季核心景点' },
        { '@type': 'TouristAttraction', name: '额尔古纳湿地', description: '中国最大湿地之一，鸟类天堂，秋季倒影绝美' },
        { '@type': 'TouristAttraction', name: '白桦林', description: '九月金黄，摄影圣地，游牧的森林秋季产品核心景点' },
        { '@type': 'TouristAttraction', name: '呼伦湖', description: '中国北方第一大湖，冬季冰钓胜地，夏季湖畔骑马' },
        { '@type': 'TouristAttraction', name: '中俄边境公路', description: '室韦至黑山头沿线，风景壮阔，国境线骑行体验独特' },
      ],
    }),
  }],
})

// Seasonal Event JSON-LD
const seasonalEvents = [
  {
    key: 'event-summer',
    name: '呼伦贝尔夏季旅游最佳期（6-8月）',
    description: '呼伦贝尔草原夏季旅游高峰，绿草如茵，那达慕传统节庆，骑马、露营、亲子出行最佳时段。呼籁旅行提供额吉的故乡V9系列定制游及小蒙马亲子夏令营。',
    startDate: '2026-06-01',
    endDate: '2026-08-31',
  },
  {
    key: 'event-autumn',
    name: '呼伦贝尔秋季白桦林观赏期（9月）',
    description: '呼伦贝尔草原秋季白桦林金黄，草原转秋色，是摄影爱好者公认的好时节。呼籁旅行提供游牧的森林秋季定制游产品。',
    startDate: '2026-09-01',
    endDate: '2026-09-30',
  },
  {
    key: 'event-winter',
    name: '呼伦贝尔冬季冰雪体验期（12-2月）',
    description: '呼伦贝尔冬季冰雪奇观，冰雪那达慕、冰钓、驯鹿部落探访，零下30度的极寒体验。呼籁旅行提供嗨冰雪及小蒙马冬季营产品。',
    startDate: '2026-12-01',
    endDate: '2027-02-28',
  },
]

seasonalEvents.forEach((event) => {
  useHead({
    script: [{
      key: event.key,
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Event',
        name: event.name,
        description: event.description,
        startDate: event.startDate,
        endDate: event.endDate,
        location: {
          '@type': 'Place',
          name: '呼伦贝尔大草原',
          address: {
            '@type': 'PostalAddress',
            addressLocality: '呼伦贝尔市',
            addressRegion: '内蒙古自治区',
            addressCountry: 'CN',
          },
          geo: { '@type': 'GeoCoordinates', latitude: 49.2143, longitude: 119.7674 },
        },
        organizer: { '@id': 'https://1814.love/#organization' },
        eventStatus: 'https://schema.org/EventScheduled',
        eventAttendanceMode: 'https://schema.org/OfflineEventAttendanceMode',
        url: 'https://1814.love/calendar',
        offers: {
          '@type': 'Offer',
          priceCurrency: 'CNY',
          availability: 'https://schema.org/InStock',
          seller: { '@id': 'https://1814.love/#organization' },
        },
      }),
    }],
  })
})
</script>

<style lang="less" scoped>
// Summary section
.cal-summary {
  margin-bottom: @space-3xl;
}

.cal-summary-title {
  font-size: @font-size-xl;
  text-align: center;
  color: @color-primary;
  margin-bottom: @space-xl;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @space-md;

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

.summary-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-top: 3px solid @color-primary;
  border-radius: @border-radius-md;
  padding: @space-lg;
  text-align: center;
}

.summary-label {
  font-size: @font-size-xs;
  color: @color-text-muted;
  font-weight: @font-weight-medium;
  margin-bottom: @space-xs;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-months {
  font-size: @font-size-xl;
  font-weight: @font-weight-bold;
  color: @color-primary;
  margin-bottom: @space-xs;
}

.summary-reason {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
}

// Month heading
.months-heading {
  font-size: @font-size-xl;
  color: @color-text-primary;
  margin-bottom: @space-xl;
  text-align: center;
}

// Month grid
.months-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;
  margin-bottom: @space-3xl;

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

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

// Month card
.month-card {
  border-radius: @border-radius-lg;
  padding: @space-lg;
  border: 1px solid @color-border;

  &--summer {
    background: @color-primary-bg;
    border-color: rgba(45, 106, 79, 0.2);
  }

  &--autumn {
    background: #FFF8F0;
    border-color: rgba(212, 136, 58, 0.2);
  }

  &--winter {
    background: #EFF4F8;
    border-color: rgba(91, 141, 184, 0.2);
  }

  &--spring {
    background: #F4FAF4;
    border-color: rgba(82, 163, 106, 0.2);
  }

  &--peak {
    box-shadow: @shadow-md;
  }
}

.month-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: @space-sm;
}

.month-name-area {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.month-number {
  font-size: @font-size-2xl;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  line-height: 1;
}

.month-unit {
  font-size: @font-size-base;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
}

.month-name {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-left: @space-xs;
}

.peak-badge {
  display: inline-block;
  padding: 2px @space-sm;
  background: @color-accent;
  color: white;
  border-radius: @border-radius-full;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
}

.month-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: @space-sm;
}

.star {
  font-size: 14px;
  color: @color-border;

  &--active {
    color: @color-accent;
  }
}

.stars-label {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin-left: @space-xs;
}

.month-temp {
  display: inline-block;
  padding: 2px @space-sm;
  background: rgba(255, 255, 255, 0.8);
  border-radius: @border-radius-sm;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  color: @color-text-primary;
  margin-bottom: @space-sm;
}

.month-weather {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin-bottom: @space-md;
}

.month-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 @space-md;

  li {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
    padding-left: @space-md;
    position: relative;
    margin-bottom: 2px;

    &::before {
      content: '·';
      position: absolute;
      left: 0;
      color: @color-primary;
      font-weight: @font-weight-bold;
    }
  }
}

.month-clothing {
  display: flex;
  gap: @space-sm;
  align-items: flex-start;
  margin-bottom: @space-md;
  padding: @space-sm @space-md;
  background: rgba(255, 255, 255, 0.6);
  border-radius: @border-radius-sm;
}

.clothing-label {
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  color: @color-primary;
  flex-shrink: 0;
  padding-top: 1px;
}

.clothing-tip {
  font-size: @font-size-xs;
  color: @color-text-secondary;
  line-height: @line-height-base;
}

.month-products {
  display: flex;
  flex-wrap: wrap;
  gap: @space-xs;
  margin-bottom: @space-sm;
}

.product-tag {
  display: inline-block;
  padding: 2px 6px;
  background: @color-primary;
  color: white;
  border-radius: @border-radius-sm;
  font-size: 11px;
}

.month-tagline {
  font-size: @font-size-xs;
  color: @color-text-muted;
  font-style: italic;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: @space-sm;
}

// SEO answer section
.cal-answer {
  background: @color-bg-gray;
  border-radius: @border-radius-lg;
  padding: @space-2xl;

  h2 {
    font-size: @font-size-xl;
    color: @color-primary;
    margin-bottom: @space-md;
  }

  p {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-base;
    margin-bottom: @space-xl;

    strong {
      color: @color-text-primary;
    }
  }
}

.cal-links {
  display: flex;
  flex-wrap: wrap;
  gap: @space-lg;
}
</style>
