<template>
  <div class="mx-auto max-w-screen-xl px-4 py-12">
    <a-typography-title :level="1" class="!mb-2">模板 / 插件市场</a-typography-title>
    <a-typography-paragraph class="!text-gray-600 !mb-8">
      用模板加速交付，用插件扩展能力。支持购买、授权、更新与版本管理，形成可持续的生态与增值体系。
    </a-typography-paragraph>

    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :md="12">
        <a-card title="模板：标准化交付">
          <a-list :data-source="templates" size="small">
            <template #renderItem="{ item }">
              <a-list-item>{{ item }}</a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12">
        <a-card title="插件：按需扩展与变现">
          <a-list :data-source="plugins" size="small">
            <template #renderItem="{ item }">
              <a-list-item>{{ item }}</a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>

    <a-row class="mt-10" :gutter="[16, 16]">
      <a-col :xs="24" :md="12">
        <a-card title="购买与授权流程">
          <a-steps direction="vertical" :current="-1" size="small">
            <a-step title="选择模板/插件" description="支持套餐内置 + 加购" />
            <a-step title="下单支付" description="支付成功生成授权与交付记录" />
            <a-step title="自动启用" description="为租户装配模板/插件与默认配置" />
            <a-step title="更新升级" description="支持版本更新、到期续费与兼容性提示" />
          </a-steps>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12">
        <a-card title="生态合作（示例）">
          <a-collapse>
            <a-collapse-panel key="1" header="插件开发">
              <div class="text-gray-600">提供扩展点与规范，支持第三方开发并上架。</div>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="模板共建">
              <div class="text-gray-600">按行业/场景沉淀模板资产，形成标准化交付能力。</div>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="授权与结算">
              <div class="text-gray-600">支持授权校验、版本管理与结算规则扩展。</div>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>
    </a-row>

    <div class="mt-10">
      <a-space>
        <a-button @click="navigateTo('/products')">看产品矩阵</a-button>
        <a-button type="primary" @click="navigateTo('/contact')">咨询合作/上架</a-button>
      </a-space>
    </div>
  </div>
</template>

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

usePageSeo({
  title: '模板/插件市场 - 购买/授权/更新/生态合作',
  description: '模板加速交付，插件按需扩展；支持购买、授权、更新与版本管理，构建可持续生态与增值体系。',
  path: '/market'
})

const templates = [
  '行业模板：官网/电商/门户/活动页等',
  '一键套用：默认页面 + 配置 + 初始化脚本',
  '多版本管理：预览、回滚、迁移与二次编辑'
]

const plugins = [
  '能力插件：支付/会员/营销/工单/统计等',
  '授权与更新：版本升级、到期续费、兼容性提示',
  '生态变现：第三方能力沉淀为可售卖插件'
]
</script>

