<template>
  <div class="page">
    <!-- Hero -->
    <section class="relative overflow-hidden bg-gradient-to-br from-orange-600 via-red-500 to-pink-600 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-orange-300/20 blur-3xl"></div>
        <div class="absolute -bottom-1/3 -left-1/4 w-[600px] h-[600px] rounded-full bg-red-300/20 blur-3xl"></div>
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_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-40 right-40 w-3 h-3 rounded-full bg-orange-200/50 animate-pulse" style="animation-delay: 0.5s"></div>
        <div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-pink-200/50 animate-pulse" style="animation-delay: 1s"></div>
        <div class="absolute top-1/3 right-1/4 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.5s"></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="orange" class="text-white border-white/30 bg-white/20">电商解决方案</a-tag>
              <a-tag color="red" class="text-white border-white/30 bg-white/15">AI 智能导购</a-tag>
            </div>
            <h1 class="mb-4 text-3xl font-bold md:text-5xl">
              小程序商城
            </h1>
            <p class="mb-6 text-lg text-white/90">
              全功能电商系统，支持商品管理、订单处理、支付结算、会员营销，助力商家快速搭建私域流量池，AI 赋能每个销售环节。
            </p>
            <div class="flex flex-wrap gap-3">
              <a-button type="primary" size="large" class="bg-white text-orange-600 border-white hover:bg-white/90" @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/20 bg-white/10 p-6 backdrop-blur">
              <div class="mb-4 flex items-center justify-between">
                <span class="text-sm text-white/70">今日订单</span>
                <span class="text-2xl font-bold">1,286</span>
              </div>
              <div class="mb-1 h-2 w-full rounded-full bg-white/20">
                <div class="h-2 rounded-full bg-white/70 w-[72%]"></div>
              </div>
              <div class="mb-4 text-xs text-white/50">日目标完成率 72%</div>
              <div class="mb-4 flex items-center justify-between">
                <span class="text-sm text-white/70">今日销售额</span>
                <span class="text-2xl font-bold">¥28,560</span>
              </div>
              <div class="mb-4 flex items-center justify-between">
                <span class="text-sm text-white/70">会员数量</span>
                <span class="text-2xl font-bold">5,832</span>
              </div>
              <a-divider class="border-white/20 !my-3" />
              <div class="flex flex-wrap gap-2">
                <a-tag class="bg-white/20 text-white border-0">满减优惠</a-tag>
                <a-tag class="bg-white/20 text-white border-0">积分抵扣</a-tag>
                <a-tag class="bg-white/20 text-white border-0">分销返利</a-tag>
                <a-tag class="bg-white/20 text-white border-0">AI 推荐</a-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- AI 智能导购 section -->
    <section class="py-16 md:py-20 bg-gradient-to-br from-rose-50 via-orange-50 to-white overflow-hidden">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="grid items-center gap-12 md:grid-cols-2">
          <!-- 左侧：特性卡片 -->
          <div class="grid gap-4 grid-cols-2">
            <div v-for="item in aiShopFeatures" :key="item.title"
              class="rounded-2xl border border-orange-100 bg-white p-5 shadow-sm hover:shadow-md transition-shadow">
              <div class="mb-3 text-2xl">{{ item.emoji }}</div>
              <h4 class="mb-1 font-semibold text-slate-800">{{ item.title }}</h4>
              <p class="text-xs text-slate-500 leading-relaxed">{{ item.desc }}</p>
            </div>
            <!-- 底部数据条 -->
            <div class="col-span-2 rounded-2xl bg-gradient-to-r from-orange-500 to-red-500 p-5 text-white">
              <div class="flex items-center justify-between flex-wrap gap-4">
                <div v-for="stat in aiShopStats" :key="stat.label" class="text-center">
                  <div class="text-2xl font-bold">{{ stat.value }}</div>
                  <div class="text-xs text-white/80 mt-1">{{ stat.label }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧：文字介绍 -->
          <div>
            <div class="mb-3 flex items-center gap-2">
              <span class="text-3xl">🤖</span>
              <a-tag color="red" class="text-sm font-medium">AI 驱动商城新体验</a-tag>
            </div>
            <h2 class="mb-4 text-2xl font-bold md:text-3xl">
              AI 智能导购，让每次推荐都精准
            </h2>
            <p class="mb-4 text-slate-600 leading-relaxed">
              借助大语言模型，商城内置 AI 导购助手，能理解用户自然语言需求，精准匹配商品，像真人导购一样主动沟通。
            </p>
            <p class="mb-4 text-slate-600 leading-relaxed">
              AI 实时分析用户浏览行为、购买偏好，自动生成个性化首页推荐流，让每位用户看到最感兴趣的商品，转化率显著提升。
            </p>
            <p class="mb-6 text-slate-600 leading-relaxed">
              售后环节，AI 客服 7×24 小时自动处理退换货、物流查询等常见问题，释放人工客服压力。
            </p>
            <div class="flex flex-wrap gap-3">
              <div v-for="tag in aiShopTags" :key="tag" class="rounded-full bg-orange-100 px-4 py-1.5 text-sm font-medium text-orange-700">
                {{ tag }}
              </div>
            </div>
          </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-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-orange-50 text-orange-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-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-4 md:grid-cols-4">
          <div v-for="m in marketing" :key="m.title" class="rounded-xl bg-white p-5 shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
            <div class="mb-3 text-2xl">{{ m.emoji }}</div>
            <h3 class="mb-1 font-semibold">{{ m.title }}</h3>
            <p class="text-sm text-slate-500">{{ m.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-3">
          <a-card v-for="p in plans" :key="p.name" class="relative h-full" :class="p.recommended ? 'border-2 border-orange-500 shadow-lg' : ''">
            <div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
              <a-tag color="orange">推荐</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-orange-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-orange-500 to-red-500 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-white/90">0 佣金、0 抽成，所有利润归您所有</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-orange-600 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即开通</a-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  ShoppingOutlined,
  ShoppingCartOutlined,
  PayCircleOutlined,
  TeamOutlined,
  GiftOutlined,
  BarChartOutlined,
  CarOutlined,
  MessageOutlined,
  CheckOutlined
} from '@ant-design/icons-vue'

useHead({ title: '小程序商城 - 私域电商解决方案' })

definePageMeta({ layout: 'default' })

// AI 智能导购特性
const aiShopFeatures = [
  { emoji: '💬', title: 'AI 导购对话', desc: '自然语言沟通，理解用户意图，精准推荐商品' },
  { emoji: '🎯', title: '个性化推荐', desc: '实时分析行为数据，首页千人千面，提升点击率' },
  { emoji: '🤖', title: 'AI 客服', desc: '7×24 小时自动回复，智能处理退换货与售后' },
  { emoji: '📈', title: '智能定价', desc: '竞品价格监控，动态调价建议，最大化利润' },
]

const aiShopStats = [
  { value: '↑35%', label: '转化率提升' },
  { value: '↑28%', label: '客单价提升' },
  { value: '↓60%', label: '客服成本降低' },
  { value: '7×24h', label: '全天候服务' },
]

const aiShopTags = ['AI 导购', '个性推荐', '智能定价', '自动客服', '行为分析']

const features = [
  { icon: ShoppingOutlined, title: '商品管理', desc: '支持多规格、多分类、库存预警、批量导入，轻松管理上万 SKU' },
  { icon: ShoppingCartOutlined, title: '订单系统', desc: '订单自动处理、物流跟踪、售后管理，全流程自动化' },
  { icon: PayCircleOutlined, title: '支付结算', desc: '微信支付、支付宝、银行卡，T+1 自动结算到对公账户' },
  { icon: TeamOutlined, title: '会员体系', desc: '等级会员、积分系统、储值卡、付费会员，提升用户 LTV' },
  { icon: GiftOutlined, title: '营销工具', desc: '优惠券、满减、秒杀、拼团、分销，多种玩法促进转化' },
  { icon: BarChartOutlined, title: '经营报表', desc: '销售分析、用户画像、商品热度，数据驱动决策' },
  { icon: CarOutlined, title: '物流对接', desc: '对接主流快递公司，电子面单、运费模板一键配置' },
  { icon: MessageOutlined, title: '客服系统', desc: '智能客服、工单系统、评价管理，提升服务效率' }
]

const marketing = [
  { 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: '¥999',
    period: '/年',
    recommended: false,
    features: ['1,000 个商品', '基础营销工具', '微信支付', '标准模板', '邮件客服支持']
  },
  {
    name: '成长版',
    price: '¥2,999',
    period: '/年',
    recommended: true,
    features: ['10,000 个商品', '全功能营销', '多渠道支付', '高级模板', 'AI 智能导购', '分销系统', '专属客服']
  },
  {
    name: '旗舰版',
    price: '¥9,999',
    period: '/年',
    recommended: false,
    features: ['无限商品', 'AI 全功能', '定制开发', '独立部署', '私有化数据', 'API 开放', '1 对 1 技术顾问']
  }
]
</script>

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