<script setup lang="ts">
import { useSeo } from '~/composables/useSeo'
import { painPoints, capabilities, scenarios } from '~/data/siteContent'

useSeo({ title: '首页', description: '智慧医养居家上门服务闭环管理平台，覆盖申请、评估、方案、派单、执行、监管、验收、结算全流程。' })
</script>

<template>
  <HeroSection />

  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">居家上门服务，为什么这么难管？</h2>
      <p class="section-subtitle">申请流程乱、评估标准不一、派单靠经验、上门难监管、质量难追溯、结算不规范</p>
      <div class="grid md:grid-cols-3 gap-8 mt-12">
        <PainPointCard v-for="p in painPoints" :key="p.title" v-bind="p" />
      </div>
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">一套平台，打通居家服务全流程</h2>
      <p class="section-subtitle">从服务申请到结算归档，每个环节都可监管、可追溯、可评价</p>
      <img src="/placeholders/platform-overview.svg" alt="平台概览示意图（系统截图，上线前替换）"
        class="mt-12 rounded-2xl shadow-lg w-full" width="1024" height="400" loading="lazy" />
    </div>
  </section>

  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">完整服务闭环</h2>
      <p class="section-subtitle">8 个阶段无缝衔接，每个节点都可监管、可追溯</p>
      <ServiceLoopFlow class="mt-12" />
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">八大核心能力</h2>
      <p class="section-subtitle">覆盖居家上门服务完整业务链路</p>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
        <CapabilityCard v-for="c in capabilities" :key="c.title" v-bind="c" />
      </div>
    </div>
  </section>

  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">三端协同，角色分明</h2>
      <p class="section-subtitle">家属端、服务端、管理端各司其职</p>
      <TriEndDisplay class="mt-12" />
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">覆盖五大应用场景</h2>
      <p class="section-subtitle">适配不同机构类型的业务需求</p>
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
        <ScenarioCard v-for="s in scenarios" :key="s.title" v-bind="s" />
      </div>
    </div>
  </section>

  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">实时监管，数据驱动</h2>
      <p class="section-subtitle">运营数据一目了然，异常预警即时通知</p>
      <DataDashboard class="mt-12" />
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">医疗级安全合规</h2>
      <p class="section-subtitle">数据安全与合规体系，满足政企医疗行业标准</p>
      <SecurityGrid class="mt-12" />
    </div>
  </section>

  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">平台建设价值</h2>
      <ValueMetrics class="mt-12" />
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="section-container text-center">
      <h2 class="section-title">获取完整方案</h2>
      <p class="section-subtitle">下载解决方案 PDF、白皮书和产品介绍资料</p>
      <DownloadForm class="mt-8" />
    </div>
  </section>

  <CtaSection />
  <MobileBottomCTA />
</template>
