<template>
  <div class="our-plan-page">
    <ihead></ihead>

    <section class="page-banner">
      <div class="gif-banner" aria-hidden="true">
        <img src="/foundry_1.gif" alt="" class="banner-gif">
      </div>
      <div class="container banner-content">
        <h1 class="banner-title">解决方案</h1>
        <p class="banner-subtitle">覆盖 AI、App、小程序与 Web 产品交付，面向真实业务场景落地。</p>
      </div>
    </section>

    <section class="main-content">
      <div class="container">
        <h2 class="section-title">核心服务</h2>
        <div class="services-grid">
          <article class="service-card" v-for="item in services" :key="item.title">
            <div class="service-icon" v-html="item.icon"></div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <router-link :to="item.url" class="service-link">查看方案</router-link>
          </article>
        </div>
      </div>
    </section>

    <section class="main-content muted">
      <div class="container">
        <h2 class="section-title">交付方式</h2>
        <div class="features">
          <div class="feature-item" v-for="feature in features" :key="feature.title">
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <ifooter></ifooter>
  </div>
</template>

<script>
import ihead from '@/components/ihead.vue'
import ifooter from '@/components/ifooter.vue'

const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`

export default {
  name: 'ourPlan',
  components: { ihead, ifooter },
  data() {
    return {
      services: [
        {
          title: 'AI 集成',
          description: '将智能能力接入知识库、客服、工单和运营流程，形成可验收业务结果。',
          url: '/ourPlan/aiSolutions',
          icon: icon('<path d="M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"/><path d="M9 9h6v6H9zM12 2v2M12 20v2M2 12h2M20 12h2"/>')
        },
        {
          title: '智能建筑',
          description: '整合空间、设备与巡检数据，支持告警联动和建筑运营看板。',
          url: '/ourPlan/estateManagement',
          icon: icon('<path d="M4 21V5.8C4 4.8 4.8 4 5.8 4h7.4c1 0 1.8.8 1.8 1.8V21"/><path d="M15 9h3.2c1 0 1.8.8 1.8 1.8V21"/><path d="M8 8h3M8 12h3M8 16h3M3 21h18"/>')
        },
        {
          title: '物联网',
          description: '连接设备与边缘数据，建设实时状态感知和运维调度能力。',
          url: '/ourPlan/iot',
          icon: icon('<circle cx="12" cy="12" r="3"/><path d="M3 9a9 9 0 0 1 18 0M6 12a6 6 0 0 1 12 0M9 15a3 3 0 0 1 6 0"/><path d="M12 15v6"/>')
        },
        {
          title: '设施管理',
          description: '围绕工单、保养、备件和验收搭建标准化设施运营流程。',
          url: '/ourPlan/facilityManagement',
          icon: icon('<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>')
        },
        {
          title: '系统集成',
          description: '打通业务系统、数据平台和权限体系，减少重复建设成本。',
          url: '/ourPlan/technologyIntegration',
          icon: icon('<path d="M4 7h6v4H4zM14 13h6v4h-6z"/><path d="M10 9h4v2h-4zM10 14h4v2h-4z"/>')
        },
        {
          title: 'App 交付',
          description: '覆盖 iOS / Android 的业务应用设计、开发、联调和版本迭代。',
          url: '/ourPlan/appDelivery',
          icon: icon('<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10 5h4M11 18h2"/>')
        },
        {
          title: '小程序方案',
          description: '提供小程序从场景定义、功能开发到上线运营的全流程支持。',
          url: '/ourPlan/miniProgram',
          icon: icon('<rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/>')
        }
      ],
      features: [
        {
          title: '先评估再实施',
          description: '先确认数据质量、系统边界与业务目标，再定义交付优先级。'
        },
        {
          title: '跨端协同开发',
          description: '同一业务场景可同步规划 Web、App、小程序和后台管理能力。'
        },
        {
          title: '结果可验收',
          description: '围绕效率、时效、稳定性等指标跟踪上线效果，支持持续迭代。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.our-plan-page {
  min-height: 100vh;
  background: #f8fafc;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-banner {
  position: relative;
  height: 440px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.banner-content {
  position: relative;
  z-index: 2;
}

.gif-banner {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.banner-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) brightness(0.7);
}

.banner-title {
  margin: 0 0 16px;
  font-size: 44px;
  letter-spacing: -0.02em;
}

.banner-subtitle {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.85;
}

.main-content {
  padding: 88px 0;
}

.main-content.muted {
  background: #f1f5f9;
}

.section-title {
  margin: 0 0 34px;
  text-align: center;
  color: #101828;
  font-size: 34px;
  letter-spacing: -0.015em;
}

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

.service-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.service-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: #2563eb;
}

.service-icon /deep/ svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  margin: 0 0 10px;
  color: #101828;
  font-size: 21px;
}

.service-card p {
  margin: 0 0 16px;
  color: #667085;
  line-height: 1.75;
}

.service-link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 700;
}

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

.feature-item {
  border: 1px solid #dbe5f1;
  border-radius: 12px;
  background: #fff;
  padding: 26px;
}

.feature-item h3 {
  margin: 0 0 10px;
  color: #101828;
  font-size: 20px;
}

.feature-item p {
  margin: 0;
  color: #667085;
  line-height: 1.75;
}

@media (max-width: 992px) {
  .page-banner {
    height: 360px;
  }

  .services-grid,
  .features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 52px 0;
  }

  .section-title {
    margin-bottom: 22px;
    font-size: 28px;
  }

  .service-card {
    padding: 20px;
  }

  .feature-item {
    padding: 18px;
  }
}
</style>
