<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight, Sparkles, BookOpen, GraduationCap, Lightbulb, Star, X, Phone } from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'

const { target, isVisible } = useScrollReveal()
const showDemoModal = ref(false)
</script>

<template>
  <section id="cta" class="relative py-24 lg:py-32 bg-white overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
    <div class="absolute top-20 left-1/4 w-[400px] h-[400px] rounded-full bg-primary/8 blur-3xl" />
    <div class="absolute bottom-10 right-1/4 w-[300px] h-[300px] rounded-full bg-accent/8 blur-3xl" />

    <!-- Floating decorative icons -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-16 left-[10%] animate-float-1">
        <div class="w-12 h-12 rounded-2xl bg-primary/8 flex items-center justify-center">
          <BookOpen class="w-6 h-6 text-primary/40" />
        </div>
      </div>
      <div class="absolute top-24 right-[12%] animate-float-2">
        <div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center">
          <Star class="w-5 h-5 text-accent/40" />
        </div>
      </div>
      <div class="absolute bottom-20 left-[8%] animate-float-3">
        <div class="w-11 h-11 rounded-2xl bg-amber-500/8 flex items-center justify-center">
          <Lightbulb class="w-5 h-5 text-amber-500/40" />
        </div>
      </div>
      <div class="absolute bottom-28 right-[10%] animate-float-1">
        <div class="w-10 h-10 rounded-xl bg-primary-light/10 flex items-center justify-center">
          <GraduationCap class="w-5 h-5 text-primary-light/40" />
        </div>
      </div>
      <div class="absolute top-1/2 left-[5%] animate-float-2 hidden lg:block">
        <div class="w-8 h-8 rounded-lg bg-rose-500/8 flex items-center justify-center">
          <Sparkles class="w-4 h-4 text-rose-400/40" />
        </div>
      </div>
      <div class="absolute top-1/3 right-[6%] animate-float-3 hidden lg:block">
        <div class="w-9 h-9 rounded-xl bg-cyan-500/8 flex items-center justify-center">
          <BookOpen class="w-4 h-4 text-cyan-500/40" />
        </div>
      </div>
    </div>

    <div
      ref="target"
      class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center 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-primary/8 border border-primary/15 mb-6">
        <Sparkles class="w-4 h-4 text-primary" />
        <span class="text-sm font-medium text-primary">免费开始使用</span>
      </div>

      <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 max-w-2xl mx-auto">
        无论您是想让学生爱上学习的教师，还是希望孩子高效进步的家长，灵犀学都能为您提供最佳方案。
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
        <a
          href="https://ai.xuexiaole.com/"
          target="_blank"
          rel="noopener noreferrer"
          class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 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-5 h-5 group-hover:translate-x-0.5 transition-transform duration-200" />
        </a>
        <button
          @click="showDemoModal = true"
          class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 cursor-pointer"
        >
          预约产品演示
        </button>
      </div>

      <p class="text-sm text-text-muted mt-6">
        无需信用卡 · 即刻开始 · 专属客服支持
      </p>
    </div>

    <!-- Demo modal -->
    <Teleport to="body">
      <Transition
        enter-active-class="transition-all duration-300 ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-all duration-200 ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div v-if="showDemoModal" class="fixed inset-0 z-[100] flex items-center justify-center p-4" @click.self="showDemoModal = false">
          <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" />
          <div class="relative bg-white rounded-3xl shadow-2xl max-w-sm w-full p-8 text-center">
            <button
              @click="showDemoModal = false"
              class="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200 cursor-pointer"
            >
              <X class="w-4 h-4 text-gray-500" />
            </button>
            <div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
              <Phone class="w-8 h-8 text-primary" />
            </div>
            <h3 class="text-xl font-bold text-text-heading mb-2">预约产品演示</h3>
            <p class="text-sm text-text-muted mb-6">请拨打以下电话联系我们，专属顾问将为您安排演示</p>
            <a
              href="tel:17670000000"
              class="inline-flex items-center gap-2.5 px-6 py-3.5 text-lg font-bold text-primary bg-primary/8 rounded-2xl hover:bg-primary/12 transition-colors duration-200"
            >
              <Phone class="w-5 h-5" />
              176 7000 0000
            </a>
            <p class="text-xs text-text-muted mt-4">工作时间：周一至周五 9:00 - 18:00</p>
          </div>
        </div>
      </Transition>
    </Teleport>
  </section>
</template>

<style scoped>
@keyframes float-1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-15px) rotate(5deg)} }
@keyframes float-2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-4deg)} }
@keyframes float-3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(3deg)} }
.animate-float-1 { animation: float-1 6s ease-in-out infinite; }
.animate-float-2 { animation: float-2 5s ease-in-out infinite 0.8s; }
.animate-float-3 { animation: float-3 7s ease-in-out infinite 1.5s; }
</style>
