<template>
  <div class="page-shell">
    <section class="art-hero min-h-[620px]">
      <img class="art-hero-media" src="@/assets/images/company0005.jpeg" alt="萧康云医解决方案" />
      <div class="art-hero-content">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl" data-aos="fade-up">
            <div class="art-kicker">CLINIC GROWTH PATH</div>
            <h1 class="mt-6 text-4xl font-bold leading-tight md:text-6xl">不同阶段的诊所，需要不同的系统进入方式。</h1>
            <p class="mt-6 max-w-2xl text-lg leading-9 text-stone-100">解决方案页只讲落地阶段：先线上化，再做增长运营，最后为连锁和权限扩展预留秩序。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="solution-path">
          <ScenarioImageCard
            v-for="(solution, index) in solutions"
            :key="solution.title"
            :reverse="index % 2 === 1"
            v-bind="solution"
          >
            <div class="mt-6 flex flex-wrap gap-2">
              <span v-for="item in solution.items" :key="item" class="rounded-full border border-[var(--line)] px-3 py-1 text-xs text-[var(--text-muted)]">{{ item }}</span>
            </div>
          </ScenarioImageCard>
        </div>
      </div>
    </section>

    <section class="editorial-section editorial-muted">
      <div class="container mx-auto px-4">
        <div class="stage-note" data-aos="zoom-in">
          <span class="eyebrow">阶段选择</span>
          <h2>不是每家诊所都要一步到位，但每一步都要能接住下一步。</h2>
          <router-link to="/pricing" class="primary-button justify-center">查看对应套餐</router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import ScenarioImageCard from '@/components/ui/ScenarioImageCard.vue'
import company2 from '@/assets/images/company0002.jpeg'
import company3 from '@/assets/images/company0003.jpeg'
import company5 from '@/assets/images/company0005.jpeg'

const solutions = [
  { label: '起步期', title: '单店诊所线上化', description: '快速搭建预约、线索和基础后台，让诊所从手工登记切换到线上承接。', items: ['患者端预约入口', 'PC 线索管理', '基础套餐订购'], image: company2 },
  { label: '增长期', title: '推广获客与复诊运营', description: '为推广员、医生和老板建立协同流程，提升线索转化和复诊效率。', items: ['推广员线索归属', '医生随访任务', '老板经营看板'], image: company3 },
  { label: '扩展期', title: '连锁门店管理预留', description: '为多门店、更多角色和深度权限管理预留后台数据结构与菜单能力。', items: ['多级菜单权限', '订阅和订单闭环', '租户主体扩展'], image: company5 }
]
</script>
