<script setup lang="ts">
const ends = [
  { title: '服务对象/家属端', desc: '申请服务、查看方案、签署确认、验收评价、支付结算', color: 'border-primary', bg: 'bg-primary-50', img: 'people' },
  { title: '服务人员 Delivery 端', desc: '接单确认、GPS签到、项目级执行、异常上报、证据上传', color: 'border-accent', bg: 'bg-accent-50', img: 'technology' },
  { title: '机构管理/监管端', desc: '受理派单、调度台、数据看板、质量监管、结算审核、合规审计', color: 'border-cta', bg: 'bg-orange-50', img: 'office' },
]
</script>

<template>
  <div class="grid md:grid-cols-3 gap-8">
    <div v-for="(e, i) in ends" :key="i"
      class="rounded-2xl border-2 p-8 text-center transition-all duration-300 hover:shadow-lg"
      :class="[e.color, e.bg]">
      <img src="/placeholders/platform-overview.svg"
        :alt="e.title + '（系统截图）'" class="w-full h-40 object-cover rounded-xl mb-6" width="240" height="160" loading="lazy" />
      <h3 class="font-bold text-xl mb-3">{{ e.title }}</h3>
      <p class="text-sm text-text-secondary leading-relaxed">{{ e.desc }}</p>
    </div>
  </div>
</template>
