<script setup lang="ts">
import {
  Swords, BookOpenCheck, Star, Zap,
  MessageCircle, Target, Smile, ShieldCheck,
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
import tabletImg from '@/assets/xuesheng.png'

const { target, isVisible } = useScrollReveal()

const features = [
  {
    icon: Swords,
    title: '内容闯关',
    desc: '关卡式互动体验，普通/困难双模式，每通一关都有满满成就感',
    tag: '最受欢迎',
  },
  {
    icon: BookOpenCheck,
    title: '精品内容体系',
    desc: '从入门到进阶，科学分级内容路径，持续提升核心能力',
  },
  {
    icon: Star,
    title: '积分激励',
    desc: '完成任务赚积分和钻石，兑换奖励，参与变成收获的过程',
  },
  {
    icon: Zap,
    title: '自由探索模式',
    desc: '按分类自主选择内容，灵活掌握节奏和方向',
  },
  {
    icon: MessageCircle,
    title: '智能助手',
    desc: '智能陪伴，随时答疑解惑，像拥有一位24小时私人顾问',
  },
  {
    icon: Target,
    title: '精准推荐',
    desc: '智能分析薄弱环节，定向推送相关内容，告别无效重复',
  },
  {
    icon: Smile,
    title: '积极心态',
    desc: '「3 件好事」与微笑打卡，关注心理健康，培养积极心态',
  },
  {
    icon: ShieldCheck,
    title: '进度助手',
    desc: '个性化计划 + 进度追踪，帮助养成自律好习惯',
  },
]
</script>

<template>
  <section id="app" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
    <div class="absolute top-40 -right-60 w-[500px] h-[500px] rounded-full bg-primary/5 blur-3xl" />
    <div class="absolute bottom-20 -left-40 w-[400px] h-[400px] rounded-full bg-accent/5 blur-3xl" />

    <div class="absolute top-20 right-10 lg:right-20 opacity-[0.04]" style="background-image: radial-gradient(circle, #4F46E5 1.5px, transparent 1.5px); background-size: 24px 24px; width: 200px; height: 200px;" />

    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid lg:grid-cols-12 gap-12 lg:gap-8 items-start">

        <div
          class="lg:col-span-5 lg:sticky lg:top-28 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-[2.75rem] font-extrabold text-text-heading leading-tight">
            趣味互动，<br />
            <span class="gradient-text">探索不止</span>
          </h2>
          <p class="text-lg text-text-muted mt-5 leading-relaxed">
            告别枯燥模式，灵犀学用趣味化机制点燃参与热情。排行榜、成就徽章、虚拟奖励——让用户主动投入其中。
          </p>

          <div class="mt-10 flex justify-center">
            <div class="relative w-full max-w-md">
              <div class="rounded-2xl bg-gradient-to-br from-[#1E1B4B] to-[#312E81] p-2.5 shadow-2xl">
                <div class="rounded-xl overflow-hidden bg-[#0F0D2E] aspect-[16/10]">
                  <img :src="tabletImg" alt="灵犀学体验端界面" class="w-full h-full object-cover" />
                </div>
              </div>
              <div class="absolute -right-6 top-6 glass-card rounded-xl px-3 py-2 shadow-lg animate-float-slow hidden sm:block">
                <div class="flex items-center gap-1.5">
                  <svg class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                  <span class="text-xs font-bold text-amber-600">+100 积分</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="lg:col-span-7 grid sm:grid-cols-2 gap-4">
          <div
            v-for="(feat, i) in features"
            :key="feat.title"
            class="group relative p-5 rounded-2xl bg-white border border-gray-100 hover:border-primary/20 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer"
            :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
            :style="{ transitionDelay: isVisible ? `${200 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
          >
            <div class="absolute -bottom-4 -right-4 w-20 h-20 rounded-full bg-primary/[0.03] group-hover:bg-primary/[0.06] transition-colors duration-500" />

            <span
              v-if="feat.tag"
              class="absolute -top-3 right-4 text-xs font-semibold px-2.5 py-0.5 rounded-full bg-gradient-to-r from-primary to-primary-light text-white shadow-sm z-10"
            >
              {{ feat.tag }}
            </span>
            <div class="relative">
              <div class="w-11 h-11 rounded-xl bg-primary/8 flex items-center justify-center mb-3.5 group-hover:bg-primary/12 group-hover:scale-110 transition-all duration-300">
                <component :is="feat.icon" class="w-5.5 h-5.5 text-primary" />
              </div>
              <h4 class="text-base font-bold text-text-heading mb-1.5">{{ feat.title }}</h4>
              <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
</style>
