<script setup lang="ts">
import { useSeo } from '~/composables/useSeo'
import { painPoints } from '~/data/siteContent'
useSeo({ title: '解决方案', description: '一套平台打通居家服务全流程，解决申请受理难、派单调度难、过程监管难等核心痛点。' })
</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">
      <h2 class="section-title">行业痛点</h2>
      <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>
      <div class="grid md:grid-cols-2 gap-8 mt-12">
        <div v-for="s in solutions" :key="s.title" class="flex gap-4">
          <div class="w-12 h-12 rounded-xl bg-primary-50 text-primary flex items-center justify-center shrink-0">
            <AppIcon :name="s.icon" class="w-6 h-6" />
          </div>
          <div>
            <h3 class="font-bold text-xl mb-2">{{ s.title }}</h3>
            <p class="text-text-secondary">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <CtaSection />
</template>

<script lang="ts">
const solutions = [
  { icon: 'database', title: '全流程打通', desc: '从申请到归档，一套平台覆盖所有业务环节，消除信息孤岛。' },
  { icon: 'cog', title: '智能调度', desc: '算法匹配推荐，人工确认兜底，提升派单效率和公平性。' },
  { icon: 'phone', title: '移动端执行', desc: '服务人员通过 Delivery 端完成接单、签到、执行、异常上报。' },
  { icon: 'chart', title: '数据监管', desc: '实时看板、异常预警、质量分析，数据驱动管理决策。' },
]
</script>
