<script setup>
import PageHero from '../components/PageHero.vue'
import solutionsBgUrl from '../assets/images/bg.jpg?url'
import Reveal from '../components/motion/Reveal.vue'

const solutions = [
  {
    title: '离散制造 · 质量与效率提升',
    desc: '聚焦工序追溯、质量闭环与设备稳定性，提升良率与交付稳定性。',
    scenes: ['工序追溯与过程控制', 'OEE 与停机分析', '质量异常闭环与 8D'],
  },
  {
    title: '流程工业 · 能效与安全协同',
    desc: '围绕工艺优化与运行安全，形成指标体系与异常分析闭环。',
    scenes: ['能耗监测与对标', '工艺参数波动预警', '装置运行监控与告警'],
  },
  {
    title: '园区与能源 · 运营可视化',
    desc: '统一园区数据与应用入口，联动安环、能耗、资产与运维。',
    scenes: ['园区综合态势大屏', '能源计量与分摊', '设备巡检与工单'],
  },
  {
    title: '供应链协同 · 透明与协同',
    desc: '打通订单、库存与交付状态，提升响应速度与协同效率。',
    scenes: ['订单跟踪与交付预警', '库存可视化与周转分析', '供应商协同门户'],
  },
  {
    title: '碳管理 · 合规披露与减排',
    desc: '以数据治理为基础，构建碳核算、减排评估与合规披露。',
    scenes: ['组织/产品碳核算', '减排项目评估', '合规披露与审计留痕'],
  },
  {
    title: '设备运维 · 预测维护',
    desc: '多源数据融合，落地预测性维护，降低停机与维护成本。',
    scenes: ['多指标健康度', '故障预测与诊断', '备件与工单联动'],
  },
]

const approach = [
  { step: '01', title: '梳理现状', desc: '明确目标与关键指标，识别可快速见效的试点场景。' },
  { step: '02', title: '快速接入', desc: '优先打通关键设备与系统，形成可用数据最小闭环。' },
  { step: '03', title: '治理沉淀', desc: '统一资产、口径与质量规则，沉淀可复用的数据资产。' },
  { step: '04', title: '应用运营', desc: '以看板与流程闭环驱动持续改进，形成规模化复制能力。' },
]
</script>

<template>
  <div>
    <PageHero
      kicker="解决方案"
      title="面向行业场景的可复制实践"
      subtitle="围绕制造、流程、园区、供应链、碳管理与运维等场景，提供“平台能力 + 行业模板 + 交付方法”的一体化方案。"
    >
      <template #actions>
        <RouterLink class="btn btn-primary" to="/contact">获取方案白皮书</RouterLink>
        <RouterLink class="btn btn-ghost" to="/cases">参考案例</RouterLink>
      </template>
    </PageHero>

    <section class="section">
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div>
            <div class="section-kicker">方案清单</div>
            <h2 class="h2">从试点到复制的交付体系</h2>
          </div>
        </Reveal>

        <div class="grid grid-3">
          <Reveal
            v-for="(s, idx) in solutions"
            :key="s.title"
            as="div"
            class="card card-pad solutionCard hover-lift"
            :delay="60 + idx * 70"
          >
            <div class="solutionTitle">{{ s.title }}</div>
            <div class="muted">{{ s.desc }}</div>
            <div class="solutionScenes">
              <div v-for="sc in s.scenes" :key="sc" class="scene">
                <span class="dot" aria-hidden="true"></span>
                <span>{{ sc }}</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    <section class="section section--soft solutionsBg" :style="{ '--solutions-bg': `url(${solutionsBgUrl})` }">
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div>
            <div class="section-kicker">落地方法</div>
            <h2 class="h2">以数据闭环驱动持续改进</h2>
          </div>
        </Reveal>

        <div class="grid grid-4">
          <Reveal
            v-for="(a, idx) in approach"
            :key="a.step"
            as="div"
            class="card card-pad approachCard hover-lift"
            :delay="60 + idx * 70"
          >
            <div class="approachStep">{{ a.step }}</div>
            <div class="approachTitle">{{ a.title }}</div>
            <div class="muted">{{ a.desc }}</div>
          </Reveal>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.solutionTitle {
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.solutionScenes {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.scene {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-700);
  font-weight: 600;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-600);
}

.approachStep {
  color: var(--brand-700);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.approachTitle {
  margin-top: 4px;
  font-weight: 900;
  margin-bottom: 6px;
}

.solutionsBg {
  position: relative;
  overflow: hidden;
}

.solutionsBg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--solutions-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: saturate(0.95);
}

.solutionsBg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.92));
}

.solutionsBg > .container {
  position: relative;
  z-index: 1;
}
</style>
