<script setup>
import { computed, ref } from "vue";
import PageHero from "../components/PageHero.vue";
import bannerUrl from "../assets/images/banner.jpg?url";
import bgUrl from "../assets/images/bg.jpg?url";
import Reveal from "../components/motion/Reveal.vue";

const industries = ["全部", "汽车", "化工", "装备", "电子", "能源", "园区"];
const active = ref("全部");

const allCases = [
  {
    industry: "汽车",
    title: "过程质量追溯与异常闭环",
    desc: "打通工序数据与质量规则，实现异常定位与闭环处理。",
    cover: bannerUrl,
    metrics: ["良率 +3.2%", "追溯时间 -80%", "异常闭环 T+1"],
  },
  {
    industry: "化工",
    title: "能效监测与对标优化",
    desc: "构建能耗指标体系与异常分析模型，实现持续能效提升。",
    cover: bgUrl,
    metrics: ["能耗 -6.8%", "对标覆盖 12 装置", "异常预警 7 类"],
  },
  {
    industry: "装备",
    title: "预测性维护与停机治理",
    desc: "多源数据融合评估健康度，提前预警故障风险。",
    cover: bannerUrl,
    metrics: ["停机 -20%", "维修成本 -12%", "告警准确率 +15%"],
  },
  {
    industry: "电子",
    title: "设备接入与 OEE 提升",
    desc: "统一采集与运行监控，驱动 OEE 分析与产线瓶颈改善。",
    cover: bgUrl,
    metrics: ["OEE +5.5%", "采集点位 6,000+", "停机原因 100% 标准化"],
  },
  {
    industry: "能源",
    title: "设备巡检与工单联动",
    desc: "巡检计划、移动端执行与工单闭环，形成运维知识沉淀。",
    cover: bannerUrl,
    metrics: ["工单闭环率 98%", "巡检漏检 0", "知识库 300+"],
  },
  {
    industry: "园区",
    title: "园区运营可视化",
    desc: "统一态势大屏与多系统联动，实现事件快速响应。",
    cover: bgUrl,
    metrics: ["事件响应 -35%", "系统对接 10+", "指标 200+"],
  },
];

const filtered = computed(() => {
  if (active.value === "全部") return allCases;
  return allCases.filter((c) => c.industry === active.value);
});
</script>

<template>
  <div>
    <PageHero
      kicker="客户案例"
      title="以指标呈现价值"
      subtitle="从设备接入、数据治理到应用运营，沉淀可复用的行业实践。"
    >
      <template #actions>
        <RouterLink class="btn btn-primary" to="/contact"
          >获取案例集</RouterLink
        >
        <RouterLink class="btn btn-ghost" to="/solutions">匹配方案</RouterLink>
      </template>
    </PageHero>

    <section class="section">
      <div class="container">
        <Reveal as="div" class="filters" :delay="0">
          <button
            v-for="i in industries"
            :key="i"
            type="button"
            class="filter"
            :data-active="active === i ? 'true' : 'false'"
            @click="active = i"
          >
            {{ i }}
          </button>
        </Reveal>

        <div class="grid grid-3">
          <Reveal
            v-for="(c, idx) in filtered"
            :key="c.title"
            as="div"
            class="card caseCard hover-lift"
            :delay="60 + idx * 70"
          >
            <img
              class="caseCover"
              :src="c.cover"
              :alt="c.title"
              loading="lazy"
            />
            <div class="casePad">
              <div class="caseTop">
                <span class="pill">{{ c.industry }}</span>
                <RouterLink class="btn btn-link" to="/contact"
                  >对接同类项目 →</RouterLink
                >
              </div>
              <div class="caseTitle">{{ c.title }}</div>
              <div class="muted">{{ c.desc }}</div>
              <div class="caseMetrics">
                <span v-for="m in c.metrics" :key="m" class="metric">{{
                  m
                }}</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filter {
  height: 38px;
  padding: 0 14px;
  /* border-radius: 999px; */
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: var(--slate-700);
  transition: 160ms ease;
}

.filter:hover {
  background: rgba(15, 23, 42, 0.02);
}

.filter[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-700);
}

.caseTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.caseCover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}

.casePad {
  padding: 18px;
}

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

.caseMetrics {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.metric {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  /* border-radius: 12px; */
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--slate-700);
  font-size: 12px;
}
</style>
