<template>
  <div class="page-shell refined-page features-refined">
    <section class="subpage-hero">
      <div class="container mx-auto px-4">
        <div class="subpage-hero__grid">
          <div data-aos="fade-up">
            <span class="subpage-kicker">PRODUCT CAPABILITY</span>
            <h1>把诊所的每个角色，放进同一套工作秩序。</h1>
            <p>产品能力页专注说明模块边界：患者端、医生端、老板端、推广员端和 PC 后台如何协作，而不是重复首页叙事。</p>
          </div>
          <div class="capability-map" data-aos="fade-left">
            <div v-for="node in capabilityNodes" :key="node.title" :class="node.class">
              <span>{{ node.label }}</span>
              <strong>{{ node.title }}</strong>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="feature-split">
          <aside data-aos="fade-right">
            <span class="eyebrow">能力地图</span>
            <h2>先定义角色，再定义数据如何流动。</h2>
            <p>诊所经营的混乱，往往来自角色之间的断点。萧康云医用端口拆分工作，用后台统一沉淀。</p>
          </aside>
          <div class="role-matrix">
            <article v-for="role in roles" :key="role.title" data-aos="fade-up">
              <span>{{ role.index }}</span>
              <h3>{{ role.title }}</h3>
              <p>{{ role.description }}</p>
              <ul><li v-for="item in role.items" :key="item">{{ item }}</li></ul>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section editorial-muted">
      <div class="container mx-auto px-4">
        <div class="process-slice">
          <div data-aos="fade-up">
            <span class="eyebrow">流程切片</span>
            <h2>从线索到复诊，每一步都有明确承接人。</h2>
          </div>
          <div class="process-slice__rail">
            <article v-for="step in steps" :key="step.title" data-aos="fade-up">
              <span>{{ step.index }}</span>
              <h3>{{ step.title }}</h3>
              <p>{{ step.description }}</p>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="backend-panel" data-aos="zoom-in">
          <div>
            <span class="eyebrow">PC 后台</span>
            <h2>后台不是菜单集合，而是权限、内容和商业化的控制面。</h2>
            <p>页面模块、素材、招聘、套餐、订单、角色菜单都由后台管理，为后续数据库驱动和运营迭代留出空间。</p>
          </div>
          <div class="backend-panel__preview">
            <div v-for="item in backendItems" :key="item.title"><strong>{{ item.title }}</strong><span>{{ item.desc }}</span></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
const capabilityNodes = [
  { label: '入口', title: '患者端', class: 'node-a' },
  { label: '服务', title: '医生端', class: 'node-b' },
  { label: '增长', title: '推广员端', class: 'node-c' },
  { label: '判断', title: '老板端', class: 'node-d' },
  { label: '秩序', title: 'PC后台', class: 'node-core' }
]
const roles = [
  { index: '01', title: '患者端小程序', description: '让预约、提醒和服务记录留在患者触手可及的位置。', items: ['在线预约', '复诊提醒', '服务记录'] },
  { index: '02', title: '医生端小程序', description: '围绕接诊、随访和患者管理提升医生执行效率。', items: ['接诊记录', '患者管理', '随访任务'] },
  { index: '03', title: '门店老板端', description: '把线索、收入、转化和团队执行转为经营判断。', items: ['经营看板', '收入分析', '团队绩效'] },
  { index: '04', title: '推广员端', description: '让推广码、线索归属和成交转化可追踪。', items: ['推广码', '线索归属', '转化统计'] }
]
const steps = [
  { index: 'A', title: '获客', description: '官网、推广码和活动入口进入同一线索池。' },
  { index: 'B', title: '预约', description: '前台和医生看到待承接任务，减少遗漏。' },
  { index: 'C', title: '接诊', description: '服务过程沉淀为患者记录和后续动作。' },
  { index: 'D', title: '复诊', description: '提醒和随访任务把关系延续到离店之后。' },
  { index: 'E', title: '复盘', description: '老板端用数据看清获客和服务质量。' }
]
const backendItems = [
  { title: '内容 CMS', desc: '页面模块、图片、SEO/GSO' },
  { title: '商业化', desc: '套餐、订单、支付流水' },
  { title: '权限菜单', desc: '角色、多级菜单、布局偏好' }
]
</script>
