<template>
  <section class="section section--gray">
    <div class="container">
      <CommonSectionTitle :title="st('home.reviewHighlights', '客户怎么说')" :label="st('home.reviewHighlights', 'REVIEWS', 'label')" :subtitle="st('home.reviewHighlights', '来自真实家庭的旅行评价', 'subtitle')" />
      <div class="review-grid">
        <div v-for="r in reviews" :key="r.id" class="review-card">
          <div class="review-quote-mark">"</div>
          <blockquote class="review-text">{{ r.content }}</blockquote>
          <div class="review-footer">
            <div class="review-avatar">{{ r.nickname.charAt(0) }}</div>
            <div class="review-info">
              <span class="review-name">{{ r.nickname }}</span>
              <span class="review-date">{{ r.travelDate }}</span>
            </div>
          </div>
          <p class="review-product">{{ r.productVersion }}</p>
        </div>
      </div>
      <div class="review-more">
        <CommonInternalLink to="/reviews" text="查看更多客户评价" />
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  reviews: { type: Array, required: true },
})
const st = await useSectionTitles()
</script>

<style lang="less" scoped>
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

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

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

.review-card {
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  padding: @space-xl;
  border: 1px solid @color-border;
  border-left: 3px solid @color-primary-lighter;
  position: relative;
  transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);

  &:hover {
    box-shadow: @shadow-md;
    transform: translateY(-3px);
    border-left-color: @color-primary;
  }
}

.review-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
  color: @color-primary-lighter;
  margin-bottom: -@space-md;
  user-select: none;
}

.review-text {
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-relaxed;
  margin-bottom: @space-lg;
  .text-clamp(4);
}

.review-footer {
  display: flex;
  align-items: center;
  gap: @space-md;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, @color-primary-bg, @color-primary-lighter);
  color: @color-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  flex-shrink: 0;
}

.review-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-name {
  font-size: @font-size-sm;
  color: @color-text-primary;
  font-weight: @font-weight-medium;
}

.review-date {
  font-size: @font-size-xs;
  color: @color-text-muted;
}

.review-product {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin-top: @space-sm;
  padding-top: @space-sm;
  border-top: 1px solid @color-divider;
}

.review-more {
  text-align: center;
  margin-top: @space-2xl;
}
</style>
