<template>
  <div class="page">
    <!-- Hero -->
    <section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-green-950 to-emerald-900 text-white">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-1/2 -right-1/4 w-[700px] h-[700px] rounded-full bg-emerald-500/20 blur-3xl"></div>
        <div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-green-500/15 blur-3xl"></div>
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
        <div class="absolute top-16 left-16 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
        <div class="absolute top-36 right-32 w-3 h-3 rounded-full bg-emerald-300/40 animate-pulse" style="animation-delay: 0.7s"></div>
        <div class="absolute bottom-24 left-1/3 w-2 h-2 rounded-full bg-green-300/40 animate-pulse" style="animation-delay: 1.2s"></div>
        <div class="absolute top-1/2 right-1/5 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.8s"></div>
      </div>
      <div class="relative mx-auto max-w-screen-xl px-4 py-20 md:py-28">
        <div class="grid items-center gap-10 md:grid-cols-2">
          <div>
            <div class="mb-4 flex flex-wrap gap-2">
              <a-tag color="green" class="text-white border-white/30 bg-white/20">智能小程序</a-tag>
              <a-tag color="cyan" class="text-white border-white/30 bg-white/15">多端一码</a-tag>
            </div>
            <h1 class="mb-4 text-3xl font-bold md:text-5xl">
              小程序开发
            </h1>
            <p class="mb-6 text-lg text-slate-300">
              一键生成微信、抖音、支付宝等多平台小程序，无需代码基础，可视化搭建，快速上线运营。
            </p>
            <!-- 统计 -->
            <div class="mb-6 grid grid-cols-3 gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur">
              <div class="text-center">
                <div class="text-2xl font-bold text-white">10亿+</div>
                <div class="text-xs text-slate-400 mt-1">微信月活用户</div>
              </div>
              <div class="text-center border-x border-white/10">
                <div class="text-2xl font-bold text-white">4+</div>
                <div class="text-xs text-slate-400 mt-1">主流平台</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-white">3分钟</div>
                <div class="text-xs text-slate-400 mt-1">快速上线</div>
              </div>
            </div>
            <div class="flex flex-wrap gap-3">
              <a-button type="primary" size="large" class="bg-emerald-500 border-emerald-500 hover:bg-emerald-400" @click="navigateTo('/flow')">立即开通</a-button>
              <a-button ghost size="large" class="border-white text-white hover:bg-white/10" @click="navigateTo('/contact')">预约演示</a-button>
            </div>
          </div>
          <div class="relative">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur space-y-4">
              <div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
                <div class="h-10 w-10 rounded-xl bg-green-500/20 flex items-center justify-center">
                  <WechatOutlined class="text-xl text-green-400" />
                </div>
                <div class="flex-1">
                  <div class="font-medium">微信小程序</div>
                  <div class="text-sm text-slate-400">10亿+用户触达</div>
                </div>
                <CheckCircleOutlined class="text-green-400 text-lg" />
              </div>
              <div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
                <div class="h-10 w-10 rounded-xl bg-pink-500/20 flex items-center justify-center">
                  <VideoCameraOutlined class="text-xl text-pink-400" />
                </div>
                <div class="flex-1">
                  <div class="font-medium">抖音小程序</div>
                  <div class="text-sm text-slate-400">短视频流量入口</div>
                </div>
                <CheckCircleOutlined class="text-green-400 text-lg" />
              </div>
              <div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
                <div class="h-10 w-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
                  <AlipayCircleOutlined class="text-xl text-blue-400" />
                </div>
                <div class="flex-1">
                  <div class="font-medium">支付宝小程序</div>
                  <div class="text-sm text-slate-400">生活服务场景</div>
                </div>
                <CheckCircleOutlined class="text-green-400 text-lg" />
              </div>
              <div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
                <div class="h-10 w-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
                  <FireOutlined class="text-xl text-orange-400" />
                </div>
                <div class="flex-1">
                  <div class="font-medium">百度小程序</div>
                  <div class="text-sm text-slate-400">搜索流量直达</div>
                </div>
                <CheckCircleOutlined class="text-green-400 text-lg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- AI 赋能 Banner -->
    <section class="bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 py-8">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="flex flex-wrap items-center justify-between gap-4">
          <div class="flex items-center gap-4">
            <span class="text-3xl">🤖</span>
            <div class="text-white">
              <div class="font-bold text-lg">AI 智能生成小程序</div>
              <div class="text-white/80 text-sm">描述需求，AI 自动生成页面结构与交互逻辑，效率提升 10 倍</div>
            </div>
          </div>
          <a-button size="large" class="bg-white text-green-700 border-white font-semibold hover:bg-white/90" @click="navigateTo('/ai-agent')">
            了解 AI 能力
          </a-button>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">核心功能</h2>
          <p class="text-slate-500">一站式小程序开发与管理平台</p>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
          <a-card v-for="f in features" :key="f.title" class="h-full hover:shadow-lg transition-shadow">
            <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-600">
              <component :is="f.icon" class="text-xl" />
            </div>
            <h3 class="mb-2 text-lg font-semibold">{{ f.title }}</h3>
            <p class="text-slate-500">{{ f.desc }}</p>
          </a-card>
        </div>
      </div>
    </section>

    <!-- 开发流程 -->
    <section class="bg-slate-50 py-16 md:py-20">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">极速上线流程</h2>
          <p class="text-slate-500">最快 3 分钟，从零到上线</p>
        </div>
        <div class="grid gap-6 md:grid-cols-4">
          <div v-for="(step, i) in steps" :key="step.title" class="relative text-center">
            <!-- 连接线 -->
            <div v-if="i < steps.length - 1" class="absolute top-7 left-[calc(50%+28px)] right-0 h-0.5 bg-gradient-to-r from-green-300 to-transparent hidden md:block"></div>
            <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 text-white text-xl font-bold shadow-lg">
              {{ step.num }}
            </div>
            <h4 class="mb-2 font-semibold">{{ step.title }}</h4>
            <p class="text-sm text-slate-500">{{ step.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 适用场景 -->
    <section class="py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">适用场景</h2>
          <p class="text-slate-500">覆盖各行业小程序需求</p>
        </div>
        <div class="grid gap-6 md:grid-cols-4">
          <div v-for="s in scenarios" :key="s.title" class="rounded-xl bg-white border border-slate-100 p-6 text-center shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
            <div class="mb-4 flex justify-center">
              <div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-emerald-600 text-white text-2xl shadow-md">
                {{ s.emoji }}
              </div>
            </div>
            <h3 class="mb-2 font-semibold">{{ s.title }}</h3>
            <p class="text-sm text-slate-500">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 套餐 -->
    <section class="bg-slate-50 py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">套餐与价格</h2>
          <p class="text-slate-500">按需选择，灵活升级</p>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
          <a-card v-for="p in plans" :key="p.name" class="relative h-full" :class="p.recommended ? 'border-2 border-green-500 shadow-lg' : ''">
            <div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
              <a-tag color="green">推荐</a-tag>
            </div>
            <div class="mb-4 text-center">
              <h3 class="text-lg font-semibold">{{ p.name }}</h3>
              <div class="mt-2 text-3xl font-bold text-green-600">{{ p.price }}</div>
              <div class="text-sm text-slate-400">{{ p.period }}</div>
            </div>
            <a-divider />
            <ul class="space-y-3">
              <li v-for="feat in p.features" :key="feat" class="flex items-start gap-2">
                <CheckOutlined class="mt-0.5 text-green-500" />
                <span class="text-sm text-slate-600">{{ feat }}</span>
              </li>
            </ul>
            <a-button :type="p.recommended ? 'primary' : 'default'" block class="mt-6" @click="navigateTo('/flow')">
              立即开通
            </a-button>
          </a-card>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="bg-gradient-to-r from-green-600 to-emerald-600 py-16 text-white">
      <div class="mx-auto max-w-screen-xl px-4 text-center">
        <h2 class="mb-4 text-2xl font-bold md:text-3xl">开启您的小程序之旅</h2>
        <p class="mb-6 text-green-100">3 分钟创建，1 小时上线，触达亿万用户</p>
        <div class="flex justify-center gap-3">
          <a-button type="primary" size="large" ghost @click="navigateTo('/contact')">预约演示</a-button>
          <a-button size="large" class="bg-white text-green-700 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即开通</a-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  WechatOutlined,
  VideoCameraOutlined,
  AlipayCircleOutlined,
  FireOutlined,
  AppstoreOutlined,
  ToolOutlined,
  DatabaseOutlined,
  SafetyOutlined,
  LineChartOutlined,
  CustomerServiceOutlined,
  CheckOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue'

useHead({ title: '小程序开发 - 多平台一键生成' })

definePageMeta({ layout: 'default' })

const features = [
  { icon: AppstoreOutlined, title: '多平台适配', desc: '一套代码，同时发布微信、抖音、支付宝、百度等多平台小程序，维护成本降低 80%' },
  { icon: ToolOutlined, title: '可视化搭建', desc: '拖拽式组件编辑器，无需代码，像搭积木一样快速构建小程序页面，所见即所得' },
  { icon: DatabaseOutlined, title: '云端数据', desc: '内置云数据库和云函数，轻松实现数据存储和业务逻辑，零运维压力' },
  { icon: SafetyOutlined, title: '安全合规', desc: '自动适配各平台审核规范，提供隐私协议模板，快速过审，无需担心违规' },
  { icon: LineChartOutlined, title: '数据分析', desc: '实时统计访问量、用户行为、转化漏斗，助力精细化运营，数据驱动决策' },
  { icon: CustomerServiceOutlined, title: '客服系统', desc: '集成在线客服、消息推送、用户反馈，提升服务体验，留住每一位用户' }
]

const steps = [
  { num: '01', title: '选择模板', desc: '从行业模板库选择合适的起点，一键应用' },
  { num: '02', title: '可视化编辑', desc: '拖拽组件，调整内容，配置业务逻辑' },
  { num: '03', title: '提交审核', desc: '一键提交至各平台审核，自动填写资料' },
  { num: '04', title: '正式上线', desc: '审核通过即上线，开始接受用户访问' }
]

const scenarios = [
  { emoji: '🛒', title: '电商零售', desc: '商品展示、在线下单、会员管理' },
  { emoji: '☕', title: '餐饮外卖', desc: '点餐排队、外卖配送、预约订座' },
  { emoji: '🏥', title: '医疗健康', desc: '预约挂号、健康档案、在线问诊' },
  { emoji: '🚗', title: '生活服务', desc: '家政服务、美容美发、汽车养护' },
  { emoji: '📚', title: '在线教育', desc: '课程报名、视频学习、作业提交' },
  { emoji: '🏋️', title: '健身运动', desc: '课程预约、会员管理、打卡签到' },
  { emoji: '🏠', title: '房产中介', desc: '房源展示、在线看房、预约带看' },
  { emoji: '🎮', title: '娱乐休闲', desc: '活动报名、票务预定、积分玩法' }
]

const plans = [
  {
    name: '基础版',
    price: '¥599',
    period: '/年',
    recommended: false,
    features: ['1 个小程序', '微信 / 支付宝双平台', '基础组件库', '云存储 5GB', '标准客服支持']
  },
  {
    name: '专业版',
    price: '¥1,299',
    period: '/年',
    recommended: true,
    features: ['3 个小程序', '全平台支持', '高级组件 + 模板库', '云存储 50GB', '数据分析报表', 'AI 智能生成', '优先技术支持']
  },
  {
    name: '企业版',
    price: '¥3,999',
    period: '/年',
    recommended: false,
    features: ['10 个小程序', '全平台 + 独立部署', '定制开发支持', '云存储 200GB', '专属客户经理', 'SLA 保障']
  }
]
</script>

<style scoped>
.page {
  min-height: 100vh;
}
</style>
