<script setup lang="ts">
import { useSeo } from '~/composables/useSeo'
useSeo({ title: '服务闭环', description: '8 个阶段无缝衔接：需求受理→能力评估→方案制定→智能派单→上门执行→过程监管→验收评价→结算归档。' })
</script>

<template>
  <section class="py-20 bg-gradient-to-br from-primary-700 to-primary-900 text-white">
    <div class="section-container text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">服务闭环</h1>
      <p class="text-xl text-blue-100 max-w-2xl mx-auto">从申请到归档，每个环节都可监管、可追溯、可评价</p>
    </div>
  </section>

  <section class="py-20 bg-surface">
    <div class="section-container">
      <ServiceLoopFlow />
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">数据完整性保障</h2>
      <div class="grid md:grid-cols-3 gap-6 mt-12 text-center">
        <div class="p-6"><div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-primary-50 text-primary flex items-center justify-center"><AppIcon name="database" class="w-6 h-6"/></div><h3 class="font-bold mb-2">环节联动</h3><p class="text-sm text-text-secondary">上游数据自动驱动下游，评估结果 → 方案制定，签署生效 → 服务计划</p></div>
        <div class="p-6"><div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-accent-50 text-accent flex items-center justify-center"><AppIcon name="check" class="w-6 h-6"/></div><h3 class="font-bold mb-2">状态校验</h3><p class="text-sm text-text-secondary">每步流转必须满足前置条件，未签署方案不能生成工单，未验收工单不能结算</p></div>
        <div class="p-6"><div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-cta/10 text-cta flex items-center justify-center"><AppIcon name="clipboard" class="w-6 h-6"/></div><h3 class="font-bold mb-2">版本可追溯</h3><p class="text-sm text-text-secondary">评估报告、方案快照、价格规则、签署记录全部版本化管理，不可覆盖</p></div>
      </div>
    </div>
  </section>

  <CtaSection />
</template>
