<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="V8 → V9 升级对比" subtitle="7项关键升级一目了然" />
      <div class="compare-wrapper">
        <div class="compare-table">
          <div class="compare-head">
            <span class="compare-head-old">{{ compare.headers[0] }}</span>
            <span class="compare-head-new">{{ compare.headers[1] }}</span>
          </div>
          <div v-for="(row, i) in compare.rows" :key="i" class="compare-row">
            <span class="compare-old">{{ row[0] }}</span>
            <span class="compare-new">{{ row[1] }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  compare: { type: Object, required: true }
})
</script>

<style lang="less" scoped>
.compare-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.compare-table {
  border-radius: @border-radius-md;
  overflow: hidden;
  border: 1px solid @color-border;
}

.compare-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.compare-head-old {
  font-weight: @font-weight-medium;
  text-align: center;
  background: @color-bg-gray;
  color: @color-text-muted;
}

.compare-head-new {
  font-weight: @font-weight-medium;
  text-align: center;
  background: @color-primary;
  color: #fff;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid @color-border;
  line-height: @line-height-base;
}

.compare-old {
  color: @color-text-muted;
  background: @color-bg-white;
}

.compare-new {
  color: @color-text-primary;
  background: @color-primary-bg;
  font-weight: @font-weight-medium;
}

// mobile-first: 小屏紧凑，md 以上舒适
.compare-row, .compare-head {
  font-size: @font-size-xs;

  .respond-md({
    font-size: @font-size-sm;
  });
}

.compare-old, .compare-new,
.compare-head-old, .compare-head-new {
  padding: @space-sm @space-md;

  .respond-md({
    padding: @space-md @space-lg;
  });
}
</style>
