<template>
  <div class="page-shell rich-home">
    <HeroCinematic />

    <section class="motion-section home-brief">
      <div class="container mx-auto px-4">
        <div class="home-brief__grid">
          <div data-aos="fade-right">
            <span class="eyebrow">官网首页</span>
            <h2>不重复讲功能，先让经营者看见系统进入诊所的方式。</h2>
            <p>首页负责建立第一层判断：萧康云医能把获客、服务、复诊和经营复盘连起来。具体模块、阶段方案和价格，交给各自页面展开。</p>
          </div>
          <div class="home-brief__metrics">
            <MetricArtCard v-for="metric in metrics" :key="metric.label" v-bind="metric" />
          </div>
        </div>
      </div>
    </section>

    <ClinicJourney />
    <RoleConstellation />
    <DataCurrent />
    <ScenarioShowcase />

    <section class="motion-section">
      <div class="container mx-auto px-4">
        <div class="section-intro" data-aos="fade-up">
          <span class="eyebrow">首页分工</span>
          <h2>把信息拆到正确的位置，用户才不会在首页迷路。</h2>
        </div>
        <div class="editorial-card-grid">
          <EditorialCard
            v-for="card in pageGuides"
            :key="card.title"
            v-bind="card"
          >
            <router-link :to="card.link" class="text-sm font-bold text-[var(--gold)]">进入页面</router-link>
          </EditorialCard>
        </div>
      </div>
    </section>

    <section class="motion-section editorial-muted">
      <div class="container mx-auto px-4">
        <div class="home-flow">
          <div data-aos="fade-right">
            <span class="eyebrow">上线路径</span>
            <h2>从一张官网线索，到一套可运营的系统。</h2>
            <p>按真实门店节奏落地，而不是一次性把所有功能塞给团队。</p>
          </div>
          <ol>
            <li v-for="item in rollout" :key="item.title" data-aos="fade-up">
              <span>{{ item.index }}</span>
              <div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </section>

    <section class="motion-section">
      <div class="container mx-auto px-4">
        <div class="faq-composer">
          <div data-aos="fade-right">
            <span class="eyebrow">常见问题</span>
            <h2>先回答经营者真正会问的事。</h2>
          </div>
          <div class="faq-list" data-aos="fade-left">
            <details v-for="faq in faqs" :key="faq.question" open>
              <summary>{{ faq.question }}</summary>
              <p>{{ faq.answer }}</p>
            </details>
          </div>
        </div>
      </div>
    </section>

    <section class="motion-section final-cta">
      <div class="container mx-auto px-4">
        <div class="final-cta__inner" data-aos="zoom-in">
          <div>
            <span class="eyebrow">下一步</span>
            <h2>先看一次真实流程，再决定萧康云医如何进入你的诊所。</h2>
          </div>
          <div class="flex flex-col gap-3 sm:flex-row">
            <router-link to="/pricing" class="primary-button justify-center">预约演示</router-link>
            <router-link to="/solutions" class="secondary-button justify-center">查看方案</router-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import HeroCinematic from '@/components/home/HeroCinematic.vue'
import ClinicJourney from '@/components/home/ClinicJourney.vue'
import RoleConstellation from '@/components/home/RoleConstellation.vue'
import DataCurrent from '@/components/home/DataCurrent.vue'
import ScenarioShowcase from '@/components/home/ScenarioShowcase.vue'
import EditorialCard from '@/components/ui/EditorialCard.vue'
import MetricArtCard from '@/components/ui/MetricArtCard.vue'

const metrics = [
  { label: '第一层', value: '入口', description: '官网只负责让诊所愿意开始对话。' },
  { label: '第二层', value: '流程', description: '把线索、预约、接诊和复诊串起来。' },
  { label: '第三层', value: '判断', description: '让老板看到经营动作背后的结果。' }
]

const pageGuides = [
  { index: '01', eyebrow: '产品能力', title: '看模块如何协同', description: '适合已经理解需求、想确认系统边界的人。', link: '/features', tone: 'paper' },
  { index: '02', eyebrow: '解决方案', title: '看阶段如何落地', description: '适合单店起步、增长运营和连锁预留的不同诊所。', link: '/solutions', tone: 'line' },
  { index: '03', eyebrow: '价格', title: '看投入如何选择', description: '适合需要比较月付、年付和套餐权益的人。', link: '/pricing', tone: 'warm' }
]

const rollout = [
  { index: '01', title: '梳理经营入口', description: '确认官网、推广码、电话咨询和到店登记如何进入同一套线索池。' },
  { index: '02', title: '配置角色端口', description: '按诊所团队结构启用患者端、医生端、老板端、推广员端和 PC 后台。' },
  { index: '03', title: '跑通服务闭环', description: '让预约、接诊、随访和复诊提醒先在真实门店流程里顺起来。' },
  { index: '04', title: '沉淀经营判断', description: '用线索来源、转化、复购和订单数据帮助老板做每周经营复盘。' }
]

const faqs = [
  { question: '首页为什么不把所有功能一次讲完？', answer: '首页负责建立理解和信任，具体模块能力、阶段方案和价格分别进入产品能力页、解决方案页和定价页。' },
  { question: '后台是否已经有前端入口？', answer: '后台使用 /admin 分组路由，登录后进入仪表盘，并从后端菜单接口渲染多级菜单。' },
  { question: '动效会影响移动端性能吗？', answer: '动效以 CSS、SVG、AOS 和 ECharts 轻量实现，并提供 reduced-motion 降级。' }
]
</script>
