<template>
  <section class="section section--warm">
    <div class="container">
      <CommonSectionTitle title="为什么选择呼籁" label="WHY HULAI" subtitle="不只是包车，是一套成熟的旅行服务体系" />
      <div class="diff-grid">
        <div
          v-for="(item, index) in items"
          :key="item.title"
          class="diff-item"
        >
          <div
            v-if="item.image"
            class="diff-bg"
            :style="{ backgroundImage: `url(${item.image})` }"
          />
          <div class="diff-content">
            <div class="diff-icon" v-html="icons[index % icons.length]" />
            <h3 class="diff-title">{{ item.title }}</h3>
            <p class="diff-desc">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  items: { type: Array, required: true },
})

// SVG icons for each differentiator
const icons = [
  // 营地
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l9-18 9 18"/><path d="M12 3v18"/><path d="M3 21h18"/></svg>',
  // 车队
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>',
  // 体验
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>',
  // 旅拍
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>',
  // 团队
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>',
  // 研学
  '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>',
]
</script>

<style lang="less" scoped>
.diff-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);
  });
}

.diff-item {
  position: relative;
  border-radius: @border-radius-lg;
  border: 1px solid @color-border;
  overflow: hidden;
  background: @color-bg-white;
  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);

    .diff-icon {
      color: @color-primary;
      background: @color-primary-bg;
    }

    .diff-bg {
      opacity: 0.45;
      transform: scale(1.05);
    }
  }
}

.diff-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  filter: saturate(0.5) brightness(1.1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diff-content {
  position: relative;
  z-index: 1;
  padding: @space-xl @space-lg;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97) 30%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.65) 100%);
}

.diff-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: @border-radius-lg;
  background: @color-bg-gray;
  color: @color-primary-light;
  margin-bottom: @space-lg;
  transition: color @transition-base, background @transition-base;
}

.diff-title {
  font-size: @font-size-lg;
  color: @color-text-primary;
  margin-bottom: @space-sm;
}

.diff-desc {
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-relaxed;
}
</style>
