<script setup>
import PageHero from '../components/PageHero.vue'
import jiaohuIconUrl from '../assets/images/jiaohu.png?url'
import planIconUrl from '../assets/images/方案.png?url'
import caseIconUrl from '../assets/images/案例.png?url'
import Reveal from '../components/motion/Reveal.vue'

const values = [
  { title: '专业', desc: '以工业现场为第一原则，强调稳定、可控与可落地。' },
  { title: '开放', desc: '开放接口与生态合作，让能力可复用、可扩展、可持续。' },
  { title: '可信', desc: '安全合规、可审计、可追溯，构建企业级信任体系。' },
  { title: '高效', desc: '通过组件化与模板化交付，加速试点与规模化复制。' },
]

const milestones = [
  { year: '2024', title: '平台底座完善', desc: '完成 IIoT、数据治理与权限体系建设。' },
  { year: '2025', title: '行业方案沉淀', desc: '形成离散、流程、园区等可复制交付模板。' },
  { year: '2026', title: '门户能力升级', desc: '统一产品、方案与案例展示，提升对外服务效率。' },
]

const honors = [
  { id: 1, title: '生态伙伴合作', src: jiaohuIconUrl },
  { id: 2, title: '行业方案沉淀', src: planIconUrl },
  { id: 3, title: '客户案例实践', src: caseIconUrl },
  { id: 4, title: '安全与合规', src: planIconUrl },
  { id: 5, title: '开放接口能力', src: jiaohuIconUrl },
  { id: 6, title: '交付体系认证', src: caseIconUrl },
]
</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">
        <div class="grid aboutGrid">
          <Reveal as="div" class="card card-pad aboutCard hover-lift" :delay="0">
            <div class="aboutTitle">我们做什么</div>
            <div class="muted">
              通过工业互联网平台能力，打通设备、数据与业务流程，提供从连接、治理到应用运营的全链路服务，覆盖制造、能源、园区与供应链等场景。
            </div>
          </Reveal>
          <Reveal as="div" class="card card-pad aboutCard hover-lift" :delay="80">
            <div class="aboutTitle">我们如何交付</div>
            <div class="muted">
              以“快速接入 + 数据治理 + 应用闭环”为方法论，先试点、再复制；以组件化与模板化交付，保障周期、质量与可运营性。
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    <section class="section section--soft">
      <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="(v, idx) in values"
            :key="v.title"
            as="div"
            class="card card-pad hover-lift"
            :delay="60 + idx * 70"
          >
            <div class="valueTitle">{{ v.title }}</div>
            <div class="muted">{{ v.desc }}</div>
          </Reveal>
        </div>
      </div>
    </section>

    <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="(m, idx) in milestones"
            :key="m.year"
            as="div"
            class="card card-pad milestone hover-lift"
            :delay="60 + idx * 80"
          >
            <div class="year">{{ m.year }}</div>
            <div class="milestoneTitle">{{ m.title }}</div>
            <div class="muted">{{ m.desc }}</div>
          </Reveal>
        </div>
      </div>
    </section>

    <section class="section section--soft">
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div>
            <div class="section-kicker">资质与生态</div>
            <h2 class="h2">能力认证与合作伙伴</h2>
            <div class="muted">示例占位图，可替换为你的真实资质证书与合作 Logo。</div>
          </div>
        </Reveal>

        <div class="grid honorGrid">
          <Reveal v-for="(h, idx) in honors" :key="h.id" as="div" class="honor hover-lift" :delay="60 + idx * 60">
            <img :src="h.src" :alt="h.title" loading="lazy" />
            <div class="honorTitle">{{ h.title }}</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;
}

.aboutGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.valueTitle {
  font-weight: 900;
  margin-bottom: 6px;
}

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

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

.honorGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.honor {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.honor img {
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.honorTitle {
  font-weight: 850;
  color: var(--slate-700);
}

@media (max-width: 960px) {
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .honorGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .honorGrid {
    grid-template-columns: 1fr;
  }
}
</style>
