<script setup lang="ts">
import {
  FileCheck2, LayoutDashboard, Library, Users,
  Clock, CheckCircle2, TrendingUp, Eye
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
import DashboardMockup from '@/components/new/illustrations/DashboardMockup.vue'

const { target, isVisible } = useScrollReveal()

const features = [
  {
    icon: FileCheck2,
    title: '内容分发',
    desc: '海量资源一键组合，支持按类型、难度、标签灵活筛选',
  },
  {
    icon: LayoutDashboard,
    title: '数据看板',
    desc: '全局/分组/分类多维度数据，运营效果一目了然',
    tag: '管理者最爱',
  },
  {
    icon: Library,
    title: '自建资源库',
    desc: '支持自建专属资源库，积累沉淀数字化资产',
  },
  {
    icon: Users,
    title: '团队管理',
    desc: '成员分组、任务分配、进度追踪，高效管理每个团队',
  },
  {
    icon: Clock,
    title: '任务管理',
    desc: '一键发布任务，实时追踪完成进度和处理状态',
  },
  {
    icon: Eye,
    title: '人工复核',
    desc: '智能处理后人工复核，双重保障内容质量',
  },
  {
    icon: TrendingUp,
    title: '数据分析',
    desc: '每位用户的数据可视化，精准识别运营薄弱点',
  },
  {
    icon: CheckCircle2,
    title: '流程管理',
    desc: '批次管理、数据批量导入，工作流程一站式搞定',
  },
]
</script>

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

    <div class="absolute bottom-20 left-10 lg:left-20 opacity-[0.03]">
      <svg width="200" height="200" viewBox="0 0 200 200">
        <pattern id="crosses-new" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
          <line x1="10" y1="15" x2="20" y2="15" stroke="#22C55E" stroke-width="1.5" />
          <line x1="15" y1="10" x2="15" y2="20" stroke="#22C55E" stroke-width="1.5" />
        </pattern>
        <rect width="200" height="200" fill="url(#crosses-new)" />
      </svg>
    </div>

    <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-12 transition-all duration-700"
        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
      >
        <p class="text-sm font-semibold text-accent tracking-wider uppercase mb-3">管理端</p>
        <h2 class="text-3xl sm:text-4xl lg:text-[2.75rem] font-extrabold text-text-heading leading-tight">
          高效管理，<span class="bg-gradient-to-r from-accent to-emerald-400 bg-clip-text text-transparent">数据驱动运营</span>
        </h2>
        <p class="text-lg text-text-muted mt-5 leading-relaxed">
          从内容分发到数据分析，智能工具接管重复性工作，管理者把宝贵时间留给真正需要关注的事务
        </p>
      </div>

      <div
        class="mb-14 transition-all duration-700"
        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
        :style="{ transitionDelay: isVisible ? '200ms' : '0ms' }"
      >
        <div class="max-w-3xl mx-auto relative">
          <DashboardMockup />
          <div class="absolute -top-4 -right-4 lg:right-8 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-slow">
            <div class="flex items-center gap-2">
              <div class="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center">
                <CheckCircle2 class="w-4 h-4 text-accent" />
              </div>
              <div>
                <p class="text-xs font-semibold text-text-heading">全部处理完成</p>
                <p class="text-xs text-accent font-medium">节省 2.5 小时</p>
              </div>
            </div>
          </div>
          <div class="absolute bottom-8 -left-4 lg:left-0 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-medium hidden sm:block">
            <div class="flex items-center gap-2">
              <div class="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
                <TrendingUp class="w-4 h-4 text-primary" />
              </div>
              <div>
                <p class="text-xs font-semibold text-text-heading">本周效率</p>
                <p class="text-xs text-primary font-medium">提升 35%</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div
          v-for="(feat, i) in features"
          :key="feat.title"
          class="group relative p-5 rounded-2xl bg-white/90 backdrop-blur-sm border border-gray-100 hover:border-accent/20 hover:shadow-lg hover:shadow-accent/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 ? `${400 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
        >
          <div class="absolute -bottom-4 -right-4 w-16 h-16 rounded-full bg-accent/[0.03] group-hover:bg-accent/[0.08] 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-accent to-accent-light text-white shadow-sm z-10"
          >
            {{ feat.tag }}
          </span>
          <div class="relative">
            <div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center mb-3 group-hover:bg-accent/12 group-hover:scale-110 transition-all duration-300">
              <component :is="feat.icon" class="w-5 h-5 text-accent" />
            </div>
            <h4 class="text-base font-bold text-text-heading mb-1">{{ feat.title }}</h4>
            <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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