<template>
  <div class="page">
    <!-- Hero -->
    <section class="relative overflow-hidden bg-gradient-to-br from-gray-950 via-slate-900 to-blue-950 text-white">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-1/2 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full bg-blue-500/20 blur-3xl"></div>
        <div class="absolute -bottom-1/3 -right-1/4 w-[600px] h-[600px] rounded-full bg-indigo-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-20 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
        <div class="absolute top-40 right-32 w-3 h-3 rounded-full bg-blue-300/40 animate-pulse" style="animation-delay: 0.5s"></div>
        <div class="absolute bottom-28 left-1/3 w-2 h-2 rounded-full bg-indigo-300/40 animate-pulse" style="animation-delay: 1s"></div>
        <div class="absolute top-1/3 right-1/5 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="blue" class="text-white border-white/30 bg-white/20">云官网</a-tag>
              <a-tag color="cyan" class="text-white border-white/30 bg-white/15">AI 建站</a-tag>
            </div>
            <h1 class="mb-4 text-3xl font-bold md:text-5xl leading-tight">
              企业云官网<br />
              <span class="text-blue-400">品牌展示 · 获客转化</span>
            </h1>
            <p class="mb-6 text-lg text-gray-300">
              专为中小企业设计的 SaaS 官网系统，支持多模板、多语言、SEO 优化与可视化内容管理；下单即开通，快速搭建品牌展示与在线获客阵地。
            </p>
            <div class="flex flex-wrap gap-3">
              <a-button type="primary" size="large" class="bg-blue-500 border-blue-500 hover:bg-blue-400" @click="go('https://site.websoft.top/register')">立即开通</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="grid grid-cols-2 gap-4">
            <div v-for="stat in stats" :key="stat.label"
              class="rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur text-center hover:bg-white/10 transition-colors">
              <div class="text-3xl font-bold text-white mb-1">{{ stat.value }}</div>
              <div class="text-sm text-gray-400">{{ stat.label }}</div>
              <div v-if="stat.sub" class="text-xs text-blue-400 mt-1">{{ stat.sub }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- AI 建站 Banner -->
    <section class="bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-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 自动生成页面结构、文案与配色，5 分钟搭建专业官网</div>
            </div>
          </div>
          <a-button size="large" class="bg-white text-blue-600 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-5 md:grid-cols-3">
          <div v-for="feat in features" :key="feat.title"
            class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
            <div class="flex items-start gap-4">
              <span class="text-3xl">{{ feat.icon }}</span>
              <div>
                <div class="font-semibold text-base mb-1">{{ feat.title }}</div>
                <div class="text-slate-500 text-sm leading-relaxed">{{ feat.desc }}</div>
              </div>
            </div>
          </div>
        </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">覆盖各类企业品牌展示与在线营销需求</p>
        </div>
        <div class="grid gap-6 md:grid-cols-4">
          <div v-for="scene in scenes" :key="scene.title"
            class="rounded-xl bg-white p-6 text-center shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200 cursor-default">
            <div class="text-4xl mb-4">{{ scene.icon }}</div>
            <div class="font-semibold mb-2">{{ scene.title }}</div>
            <div class="text-slate-500 text-sm">{{ scene.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 开通流程 -->
    <section class="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">3 步完成开通</h2>
          <p class="text-slate-500">支付即开通，无需等待，极速上线</p>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
          <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-blue-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-blue-500 to-indigo-600 text-white text-xl font-bold shadow-lg">
              {{ i + 1 }}
            </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="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="plan in plans"
            :key="plan.name"
            class="h-full text-center"
            :class="plan.recommend ? 'border-2 border-blue-500 shadow-xl' : ''"
          >
            <template v-if="plan.recommend" #extra>
              <a-tag color="blue">推荐</a-tag>
            </template>
            <div class="text-lg font-bold mb-1">{{ plan.name }}</div>
            <div class="text-3xl font-bold text-blue-600 my-3">
              {{ plan.price }}
              <span class="text-sm text-slate-400 font-normal">{{ plan.period }}</span>
            </div>
            <div class="text-slate-500 text-sm mb-4">{{ plan.desc }}</div>
            <a-divider />
            <ul class="text-left text-sm space-y-2 mb-6">
              <li v-for="item in plan.features" :key="item" class="flex items-center gap-2">
                <span class="text-green-500 font-bold">✓</span>
                <span class="text-slate-600">{{ item }}</span>
              </li>
            </ul>
            <a-button
              :type="plan.recommend ? 'primary' : 'default'"
              block
              size="large"
              @click="go('https://site.websoft.top/register')"
            >
              立即开通
            </a-button>
          </a-card>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="bg-gradient-to-r from-blue-600 to-indigo-700 py-16 text-white">
      <div class="mx-auto max-w-screen-xl px-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div class="text-2xl font-bold mb-2">立即搭建你的企业云官网</div>
          <div class="text-blue-200">下单支付即开通，数分钟完成部署与初始化</div>
        </div>
        <div class="flex gap-3">
          <a-button size="large" ghost @click="navigateTo('/contact')">预约演示</a-button>
          <a-button size="large" class="bg-white text-blue-700 border-white hover:bg-white/90" @click="go('https://site.websoft.top/register')">
            立即开通
          </a-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '云官网 - 企业品牌展示与在线获客一体化解决方案',
  description:
    '专为中小企业设计的 SaaS 云官网系统，支持多模板、多语言、SEO 优化与可视化内容管理，下单即开通，快速搭建品牌展示与在线获客阵地。',
  path: '/website'
})

definePageMeta({ layout: 'default' })

const go = (url: string) => {
  if (/^https?:\/\//i.test(url)) {
    if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
    return
  }
  return navigateTo(url)
}

const stats = [
  { value: '10+', label: '行业精品模板', sub: '持续更新' },
  { value: '多语言', label: '国际化支持', sub: '覆盖海外市场' },
  { value: '99.9%', label: 'SLA 可用性', sub: '全年稳定运行' },
  { value: '5分钟', label: '极速开通', sub: '支付即用' }
]

const features = [
  {
    icon: '✨',
    title: 'AI 一句话建站',
    desc: '描述您的业务，AI 自动生成页面结构、文案与配色，告别空白页面焦虑。'
  },
  {
    icon: '🎨',
    title: '多模板一键套用',
    desc: '覆盖企业、品牌、服务等多种行业风格，可视化编辑，无需代码即可上线。'
  },
  {
    icon: '🔍',
    title: 'SEO 深度优化',
    desc: '内置 TDK 配置、结构化数据、Sitemap 自动生成，助力搜索引擎收录与排名提升。'
  },
  {
    icon: '🌐',
    title: '多语言国际化',
    desc: '支持中英文及多语言站点，自动切换，轻松拓展海外市场。'
  },
  {
    icon: '📝',
    title: '内容管理系统',
    desc: '文章、案例、产品、团队等内容板块灵活配置，支持富文本与 Markdown。'
  },
  {
    icon: '📊',
    title: '访客数据分析',
    desc: '集成 PV/UV 统计、来源分析与转化漏斗，量化营销效果。'
  },
  {
    icon: '📱',
    title: '全端响应式适配',
    desc: '桌面、平板、手机全端适配，保证任意设备下的品牌一致性。'
  },
  {
    icon: '🔗',
    title: '自定义域名绑定',
    desc: '支持绑定企业专属域名，一键配置 HTTPS，品牌形象更专业。'
  },
  {
    icon: '📬',
    title: '在线表单与获客',
    desc: '内置联系表单、询盘收集与线索管理，帮助企业高效跟进客户。'
  }
]

const scenes = [
  { icon: '🏢', title: '企业品牌官网', desc: '展示公司实力、产品与团队，提升品牌信任度。' },
  { icon: '🛍️', title: '产品与服务展示', desc: '清晰呈现产品特性与优势，驱动在线询盘转化。' },
  { icon: '📣', title: '营销落地页', desc: '快速搭建活动、推广专题页，配合广告投放高效获客。' },
  { icon: '🌍', title: '跨境外贸官网', desc: '多语言站点支持，帮助企业开拓海外市场与客户。' }
]

const steps = [
  {
    title: '选择套餐',
    desc: '按业务需求选择合适的套餐，支持随时升级。'
  },
  {
    title: '完成支付',
    desc: '支付成功后系统自动触发开通流程，无需人工干预。'
  },
  {
    title: '即刻上线',
    desc: '自动完成站点初始化与模板安装，登录管理后台开始运营。'
  }
]

const plans = [
  {
    name: '基础版',
    price: '¥399',
    period: '/年',
    recommend: false,
    desc: '适合初创企业快速建站',
    features: ['5 个内容页面', '3 套基础模板', 'SSL + 自定义域名', '访客统计', '在线表单']
  },
  {
    name: '专业版',
    price: '¥999',
    period: '/年',
    recommend: true,
    desc: '适合品牌塑造与持续运营',
    features: [
      '不限页面数量',
      '全部模板解锁',
      'AI 一句话建站',
      'SEO 深度优化',
      '多语言支持',
      '数据分析报表',
      '插件市场加购',
      '优先客服支持'
    ]
  },
  {
    name: '私有化版',
    price: '面议',
    period: '',
    recommend: false,
    desc: '适合有私有化需求的企业',
    features: [
      '专业版全部功能',
      'AI 建站全功能',
      '源码交付',
      '私有化部署',
      '二次开发支持',
      '专属售后服务',
      '定制功能开发'
    ]
  }
]
</script>

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