<script setup lang="ts">
import { ref } from 'vue'
import { Star, ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'

const { target, isVisible } = useScrollReveal()

const testimonials = [
  {
    name: '刘女士',
    role: '运营主管 · 杭州',
    content: '以前每次处理数据至少花 3 个小时，现在工具 10 分钟就搞定了，而且质量非常高。我终于有时间专注于更重要的事务了。',
    rating: 5,
    initials: '刘',
  },
  {
    name: '王先生',
    role: '资深用户 · 南京',
    content: '以前一提到任务就头疼，现在每天抢着玩闯关挑战，不知不觉已经连续打卡 30 多天了。积分奖励机制真的太棒了！',
    rating: 5,
    initials: '王',
  },
  {
    name: '张先生',
    role: '机构负责人 · 成都',
    content: '引入灵犀学半年后，团队整体效率提升了 70%。数据看板让运营管理变得透明高效，强烈推荐给同行。',
    rating: 5,
    initials: '张',
  },
  {
    name: '陈女士',
    role: '核心用户 · 上海',
    content: '我最喜欢闯关的困难模式，拿到满星特别有成就感！排行榜上我已经是第二名了，马上就要超过第一名。',
    rating: 5,
    initials: '陈',
  },
]

const current = ref(0)

function next() {
  current.value = (current.value + 1) % testimonials.length
}
function prev() {
  current.value = (current.value - 1 + testimonials.length) % testimonials.length
}
</script>

<template>
  <section id="about" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div
        class="text-center max-w-3xl mx-auto mb-14 transition-all duration-700"
        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
      >
        <p class="text-sm font-semibold text-primary tracking-wider uppercase mb-3">用户心声</p>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-heading leading-tight">
          他们都在用<span class="gradient-text">灵犀学</span>
        </h2>
      </div>

      <div class="hidden lg:grid grid-cols-2 gap-6">
        <div
          v-for="(t, i) in testimonials"
          :key="t.name"
          class="p-7 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
          :style="{ transitionDelay: isVisible ? `${200 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
        >
          <div class="flex gap-0.5 mb-4">
            <Star v-for="s in t.rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
          </div>
          <p class="text-text-body leading-relaxed mb-5">{{ t.content }}</p>
          <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
              {{ t.initials }}
            </div>
            <div>
              <p class="text-sm font-semibold text-text-heading">{{ t.name }}</p>
              <p class="text-xs text-text-muted">{{ t.role }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="lg:hidden">
        <div class="relative overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-lg p-7">
          <TransitionGroup
            enter-active-class="transition-all duration-400"
            enter-from-class="opacity-0 translate-x-8"
            enter-to-class="opacity-100 translate-x-0"
            leave-active-class="transition-all duration-200 absolute"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0 -translate-x-8"
          >
            <div :key="current">
              <div class="flex gap-0.5 mb-4">
                <Star v-for="s in testimonials[current].rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
              </div>
              <p class="text-text-body leading-relaxed mb-5">{{ testimonials[current].content }}</p>
              <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
                  {{ testimonials[current].initials }}
                </div>
                <div>
                  <p class="text-sm font-semibold text-text-heading">{{ testimonials[current].name }}</p>
                  <p class="text-xs text-text-muted">{{ testimonials[current].role }}</p>
                </div>
              </div>
            </div>
          </TransitionGroup>
        </div>
        <div class="flex items-center justify-center gap-4 mt-6">
          <button
            class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
            @click="prev"
            aria-label="上一条"
          >
            <ChevronLeft class="w-5 h-5 text-text-body" />
          </button>
          <div class="flex gap-2">
            <div
              v-for="(_, i) in testimonials"
              :key="i"
              class="w-2 h-2 rounded-full transition-colors duration-300 cursor-pointer"
              :class="i === current ? 'bg-primary' : 'bg-gray-300'"
              @click="current = i"
            />
          </div>
          <button
            class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
            @click="next"
            aria-label="下一条"
          >
            <ChevronRight class="w-5 h-5 text-text-body" />
          </button>
        </div>
      </div>
    </div>
  </section>
</template>
