<script setup lang="ts">
import { Sparkles, ArrowRight, Play, Monitor } from 'lucide-vue-next'
import HeroIllustrationNew from '@/components/new/illustrations/HeroIllustrationNew.vue'

function scrollToSection(href: string) {
  const el = document.querySelector(href)
  el?.scrollIntoView({ behavior: 'smooth' })
}
</script>

<template>
  <section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-bg-soft via-white to-indigo-50/80" />
    <div class="absolute top-20 -left-32 w-[500px] h-[500px] rounded-full bg-primary/8 blur-3xl" />
    <div class="absolute bottom-10 -right-40 w-[600px] h-[600px] rounded-full bg-accent/6 blur-3xl" />
    <div class="absolute top-1/3 right-1/4 w-[300px] h-[300px] rounded-full bg-primary-light/10 blur-3xl" />

    <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, #4F46E5 1px, transparent 1px); background-size: 40px 40px;" />

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-20 lg:pt-40 lg:pb-32">
      <div class="grid lg:grid-cols-2 gap-16 lg:gap-12 items-center">
        <div class="space-y-10">
          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/8 border border-primary/15">
            <Sparkles class="w-4 h-4 text-primary" />
            <span class="text-sm font-medium text-primary">一站式互动内容服务平台</span>
          </div>

          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
            <span class="gradient-text-hero">让每一步成长</span>
            <br />
            <span class="gradient-text">都被看见</span>
          </h1>

          <p class="text-lg sm:text-xl text-text-muted leading-relaxed max-w-lg">
            趣味化互动体验激发内驱力，智能工具提升管理效率。
            <span class="text-text-body font-medium">一个平台，连接服务的每一个环节。</span>
          </p>

          <div class="flex flex-wrap gap-3 sm:gap-4">
            <a
              href="https://ai.lingxixue.com/"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center gap-2 px-6 sm:px-7 py-3.5 sm:py-4 text-sm sm:text-base font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-2xl hover:shadow-xl hover:shadow-primary/25 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
            >
              <span>体验入口</span>
              <ArrowRight class="w-4 h-4 sm:w-4.5 sm:h-4.5 group-hover:translate-x-0.5 transition-transform duration-200" />
            </a>
            <a
              href="https://tiku.lingxixue.com/"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center gap-2 px-6 sm:px-7 py-3.5 sm:py-4 text-sm sm:text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
            >
              <Play class="w-4 h-4 sm:w-4.5 sm:h-4.5" />
              <span>管理入口</span>
            </a>
            <a
              href="#classroom-monitor"
              class="inline-flex items-center gap-2 px-6 sm:px-7 py-3.5 sm:py-4 text-sm sm:text-base font-semibold text-cyan-800 bg-gradient-to-r from-cyan-50 to-teal-50 border-2 border-cyan-500/25 rounded-2xl hover:border-cyan-500/45 hover:shadow-lg hover:shadow-cyan-500/10 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
              @click.prevent="scrollToSection('#classroom-monitor')"
            >
              <Monitor class="w-4 h-4 sm:w-4.5 sm:h-4.5 text-cyan-600" />
              <span>教师端</span>
            </a>
          </div>

          <div class="flex items-center gap-6 pt-2">
            <div class="flex -space-x-2">
              <div v-for="i in 4" :key="i" class="w-9 h-9 rounded-full border-2 border-white bg-gradient-to-br from-primary/60 to-primary-light/80 flex items-center justify-center text-xs font-bold text-white shadow-sm">
                {{ ['张', '李', '王', '陈'][i - 1] }}
              </div>
            </div>
            <div>
              <p class="text-sm font-semibold text-text-heading">10,000+ 用户已加入</p>
              <p class="text-xs text-text-muted">来自全国 200+ 机构</p>
            </div>
          </div>
        </div>

        <div class="relative lg:pl-4">
          <HeroIllustrationNew class="w-full max-w-[520px] mx-auto" />

          <div class="absolute top-6 right-0 lg:-right-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-slow">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-lg bg-accent/15 flex items-center justify-center">
                <Sparkles class="w-4 h-4 text-accent" />
              </div>
              <div>
                <p class="text-xs font-semibold text-text-heading">连续打卡 7 天</p>
                <p class="text-xs text-accent font-medium">+50 积分奖励</p>
              </div>
            </div>
          </div>

          <div class="absolute bottom-16 left-0 lg:-left-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-medium">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-lg bg-primary/15 flex items-center justify-center">
                <Play 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">准确率 92%</p>
              </div>
            </div>
          </div>

          <div class="absolute top-1/2 -right-4 lg:right-2 glass-card rounded-2xl px-3 py-2.5 shadow-lg animate-float-fast hidden sm:block">
            <div class="flex items-center gap-2">
              <div class="w-7 h-7 rounded-lg bg-amber-500/15 flex items-center justify-center">
                <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>
              </div>
              <div>
                <p class="text-xs font-semibold text-text-heading">排行榜 #3</p>
                <p class="text-xs text-amber-600 font-medium">超越 89%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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