<script setup lang="ts">
import {
  Gamepad2, BrainCircuit, BookOpen, Trophy,
  ScanLine, BarChart3,
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'

const { target, isVisible } = useScrollReveal()

const features = [
  {
    icon: Gamepad2,
    title: '游戏化闯关学习',
    desc: '将枯燥知识变成闯关冒险，激发孩子内在驱动力，越学越想学。',
    color: 'primary',
    illustration: 'gamepad',
  },
  {
    icon: BrainCircuit,
    title: 'AI 智能批改',
    desc: '主观题秒级批改，关键词高亮解析，准确率媲美资深教师。',
    color: 'accent',
    illustration: 'brain',
  },
  {
    icon: BookOpen,
    title: '沉浸式阅读体系',
    desc: '从自然拼读到名著精读，科学分级阅读路径，培养终身阅读力。',
    color: 'amber',
    illustration: 'book',
  },
  {
    icon: Trophy,
    title: '成就激励系统',
    desc: '乐贝奖励、排行榜、成就勋章，让每一步进步都被看见和鼓励。',
    color: 'rose',
    illustration: 'trophy',
  },
  {
    icon: ScanLine,
    title: 'AI 精准诊断',
    desc: '智能分析知识薄弱点，定向推送练习题，告别盲目刷题。',
    color: 'cyan',
    illustration: 'scan',
  },
  {
    icon: BarChart3,
    title: '可视化学情报告',
    desc: '多维度数据看板，班级/学科/个人一目了然，数据驱动因材施教。',
    color: 'violet',
    illustration: 'chart',
  },
]

const colorMap: Record<string, { bg: string; iconBg: string; text: string; border: string; gradFrom: string; gradTo: string }> = {
  primary: { bg: 'bg-primary/5', iconBg: 'bg-primary/12', text: 'text-primary', border: 'border-primary/10', gradFrom: '#4F46E5', gradTo: '#818CF8' },
  accent: { bg: 'bg-accent/5', iconBg: 'bg-accent/12', text: 'text-accent', border: 'border-accent/10', gradFrom: '#22C55E', gradTo: '#4ADE80' },
  amber: { bg: 'bg-amber-500/5', iconBg: 'bg-amber-500/12', text: 'text-amber-600', border: 'border-amber-500/10', gradFrom: '#F59E0B', gradTo: '#FBBF24' },
  rose: { bg: 'bg-rose-500/5', iconBg: 'bg-rose-500/12', text: 'text-rose-600', border: 'border-rose-500/10', gradFrom: '#F43F5E', gradTo: '#FB7185' },
  cyan: { bg: 'bg-cyan-500/5', iconBg: 'bg-cyan-500/12', text: 'text-cyan-600', border: 'border-cyan-500/10', gradFrom: '#06B6D4', gradTo: '#22D3EE' },
  violet: { bg: 'bg-violet-500/5', iconBg: 'bg-violet-500/12', text: 'text-violet-600', border: 'border-violet-500/10', gradFrom: '#8B5CF6', gradTo: '#A78BFA' },
}
</script>

<template>
  <section id="features" class="relative py-24 lg:py-32 bg-white overflow-hidden">
    <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />

    <!-- Decorative background shapes -->
    <div class="absolute top-32 -right-20 w-64 h-64 rounded-full bg-primary/3 blur-3xl" />
    <div class="absolute bottom-20 -left-20 w-48 h-48 rounded-full bg-accent/3 blur-3xl" />

    <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-16 lg:mb-20 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>
        <p class="text-lg text-text-muted mt-5 leading-relaxed">
          从课前预习到课后巩固，从作业布置到智能批改，灵犀学为教育的每个环节注入智慧力量
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
        <div
          v-for="(feat, i) in features"
          :key="feat.title"
          class="group relative p-6 lg:p-8 rounded-2xl border bg-white transition-all duration-500 cursor-pointer hover:-translate-y-1 hover:shadow-xl hover:shadow-gray-200/50 overflow-hidden"
          :class="[
            colorMap[feat.color].border,
            isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
          ]"
          :style="{ transitionDelay: isVisible ? `${i * 100}ms` : '0ms' }"
        >
          <!-- Background illustration shape -->
          <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full opacity-[0.06] group-hover:opacity-[0.12] transition-opacity duration-500">
            <svg viewBox="0 0 100 100" class="w-full h-full">
              <circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradFrom" />
            </svg>
          </div>
          <div class="absolute -top-3 -right-3 w-16 h-16 rounded-full opacity-[0.04] group-hover:opacity-[0.08] transition-opacity duration-500">
            <svg viewBox="0 0 100 100" class="w-full h-full">
              <circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradTo" />
            </svg>
          </div>

          <div class="relative">
            <div
              class="w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110 shadow-sm"
              :class="colorMap[feat.color].iconBg"
            >
              <component :is="feat.icon" class="w-7 h-7" :class="colorMap[feat.color].text" />
            </div>
            <h3 class="text-lg font-bold text-text-heading mb-2.5">{{ feat.title }}</h3>
            <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>

            <!-- Mini decorative bar -->
            <div class="mt-5 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <div class="h-0.5 w-8 rounded-full" :class="colorMap[feat.color].iconBg" />
              <span class="text-xs font-medium" :class="colorMap[feat.color].text">了解更多</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
