<template>
  <section class="motion-section editorial-muted">
    <div class="container mx-auto px-4">
      <div class="section-intro">
        <span class="eyebrow">落地场景</span>
        <h2>把复杂系统，拆成诊所能立刻理解的三种场景。</h2>
      </div>
      <div class="scenario-grid">
        <article v-for="item in scenarios" :key="item.title" class="scenario-card" data-aos="fade-up">
          <img :src="item.image" :alt="item.title" />
          <div>
            <span>{{ item.tag }}</span>
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </article>
      </div>
    </div>
  </section>
</template>

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

const scenarios = [
  { tag: '单店起步', title: '先把预约和线索管起来', description: '把官网咨询、电话到店、推广码都沉淀到同一条跟进线。', image: company2 },
  { tag: '增长运营', title: '让推广和复诊产生回路', description: '推广员知道线索归属，医生知道随访任务，老板知道转化结果。', image: company3 },
  { tag: '连锁预留', title: '为多门店和权限准备秩序', description: '后台菜单、角色和订阅结构提前为门店扩展留好位置。', image: company5 }
]
</script>
