<script setup lang="ts">
import {
  Cpu, Workflow, ShieldCheck, Layers,
  Sparkles, ArrowRight,
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'

const { target, isVisible } = useScrollReveal()

const techPoints = [
  {
    icon: Layers,
    title: '深度内容理解',
    desc: '强大的内容处理能力，准确理解各类内容的核心信息与逻辑结构。',
  },
  {
    icon: Cpu,
    title: '多维分析引擎',
    desc: '关键信息提取、逻辑分析、完整度评估，多维度综合智能评判。',
  },
  {
    icon: Workflow,
    title: '个性化推荐',
    desc: '动态规划内容路径，精准推荐每位用户的最优内容组合。',
  },
  {
    icon: ShieldCheck,
    title: '双重保障机制',
    desc: '系统处理 + 人工复核双保险模式，确保结果的准确性与可靠性。',
  },
]

const flow = [
  { step: '01', label: '发布任务', desc: '一键组合发布' },
  { step: '02', label: '用户参与', desc: '在线完成互动' },
  { step: '03', label: '智能处理', desc: '秒级自动处理' },
  { step: '04', label: '人工复核', desc: '关键内容审查' },
  { step: '05', label: '数据报告', desc: '多维报告生成' },
]
</script>

<template>
  <section id="tech" class="relative py-24 lg:py-32 bg-gradient-to-b from-[#0F0D2E] to-[#1A1744] text-white overflow-hidden">
    <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-light/30 to-transparent" />
    <div class="absolute top-20 -right-40 w-[600px] h-[600px] rounded-full bg-primary/10 blur-3xl" />
    <div class="absolute bottom-20 -left-40 w-[500px] h-[500px] rounded-full bg-accent/8 blur-3xl" />

    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(129,140,248,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,0.3) 1px, transparent 1px); background-size: 60px 60px;" />

    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <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'"
      >
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/8 border border-white/10 mb-6">
          <Sparkles class="w-4 h-4 text-primary-light" />
          <span class="text-sm font-medium text-primary-light">核心技术</span>
        </div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight">
          不止是工具，
          <span class="bg-gradient-to-r from-primary-light via-indigo-300 to-accent bg-clip-text text-transparent">
            更是智慧服务的引擎
          </span>
        </h2>
        <p class="text-lg text-indigo-200/70 mt-5 leading-relaxed">
          融合先进算法与自适应技术，灵犀学为每一位用户提供个性化的智能服务体验
        </p>
      </div>

      <!-- Tech points -->
      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-16 lg:mb-20">
        <div
          v-for="(tech, i) in techPoints"
          :key="tech.title"
          class="group p-6 rounded-2xl bg-white/5 border border-white/8 hover:bg-white/8 hover:border-white/15 transition-all duration-300 cursor-pointer overflow-hidden relative"
          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
          :style="{ transitionDelay: isVisible ? `${400 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
        >
          <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-primary-light/0 group-hover:bg-primary-light/10 transition-all duration-500 blur-2xl" />

          <div class="relative">
            <div class="w-12 h-12 rounded-xl bg-primary-light/15 flex items-center justify-center mb-4 group-hover:bg-primary-light/20 group-hover:scale-110 transition-all duration-300">
              <component :is="tech.icon" class="w-6 h-6 text-primary-light" />
            </div>
            <h4 class="text-base font-bold text-white mb-2">{{ tech.title }}</h4>
            <p class="text-sm text-indigo-200/60 leading-relaxed">{{ tech.desc }}</p>
          </div>
        </div>
      </div>

      <!-- Flow -->
      <div
        class="transition-all duration-700"
        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
        :style="{ transitionDelay: isVisible ? '800ms' : '0ms' }"
      >
        <h3 class="text-xl font-bold text-center text-white mb-10">服务全流程</h3>
        <div class="flex flex-col lg:flex-row items-center lg:items-start gap-3 lg:gap-0">
          <template v-for="(item, i) in flow" :key="item.step">
            <div class="flex-1 text-center group">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/30 to-primary-light/20 border border-primary-light/20 flex items-center justify-center mx-auto mb-3 group-hover:from-primary/50 group-hover:to-primary-light/30 group-hover:scale-110 transition-all duration-300">
                <span class="text-lg font-bold text-primary-light">{{ item.step }}</span>
              </div>
              <p class="text-sm font-semibold text-white">{{ item.label }}</p>
              <p class="text-xs text-indigo-200/50 mt-1">{{ item.desc }}</p>
            </div>
            <div
              v-if="i < flow.length - 1"
              class="hidden lg:flex items-center pt-6"
            >
              <div class="w-12 flex items-center">
                <div class="flex-1 h-px bg-gradient-to-r from-primary-light/30 to-primary-light/10" />
                <ArrowRight class="w-4 h-4 text-primary-light/30 -ml-1" />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </section>
</template>
