<script setup lang="ts">
type InfoItem = {
  title: string
  description: string
}

defineProps<{
  title: string
  description: string
  overview: string[]
  capabilityItems: InfoItem[]
  featureItems: InfoItem[]
  architectureImage: string
  architectureImageAlt: string
  caseImages?: string[]
}>()
</script>

<template>
  <div>
    <section class="page-title">
      <div class="container">
        <div class="row">
          <div class="col col-xs-12">
            <h2>{{ title }}</h2>
            <p>{{ description }}</p>
          </div>
        </div>
      </div>
    </section>

    <section class="features-section-s2 section-padding">
      <div class="container">
        <div class="main_pro col col-xs-12">
          <div class="feature-grids clearfix">
            <div class="part_1 col col-xs-12">
              <div>
                <h1>系统概述</h1>
                <p v-for="paragraph in overview" :key="paragraph">{{ paragraph }}</p>
              </div>
            </div>
          </div>

          <div class="feature-grids2 clearfix">
            <div class="part_5 col">
              <h1>系统功能</h1>
              <div class="gongneng">
                <ul>
                  <li v-for="(item, index) in capabilityItems" :key="item.title" class="grid" style="background: #fff;">
                    <i class="service-pill">{{ String(index + 1).padStart(2, '0') }}</i>
                    <p>
                      <span>{{ item.title }}</span>
                      {{ item.description }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="bg_hui feature-grids clearfix">
            <div class="part_6">
              <h1>系统特性</h1>
              <div class="case1">
                <dl v-for="item in featureItems" :key="item.title" class="grid service-feature-card">
                  <dd><span class="service-feature-mark">•</span></dd>
                  <dt class="tit_2">{{ item.title }}</dt>
                  <p>{{ item.description }}</p>
                </dl>
              </div>
            </div>
          </div>

          <div class="bg_white feature-grids clearfix">
            <div class="part_3 col col-xs-12">
              <h1>系统架构</h1>
              <div class="jiagou_box">
                <div class="jiagou_main" style="display: block;">
                  <img :src="architectureImage" :alt="architectureImageAlt" class="service-architecture-image">
                </div>
              </div>
            </div>
          </div>

          <div v-if="caseImages?.length" class="bg_white feature-grids clearfix">
            <div class="part_3 col col-xs-12">
              <h1>成功案例</h1>
              <div class="service-logo-grid">
                <div v-for="item in caseImages" :key="item" class="service-logo-card">
                  <img :src="item" alt="成功案例标识" class="service-logo-image">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.service-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f3e71, #1481ff);
  color: #fff;
  font-style: normal;
  font-weight: 700;
}

.service-feature-card {
  min-height: 260px;
}

.service-feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20, 129, 255, 0.1), rgba(20, 129, 255, 0.18));
  color: #1481ff;
  font-size: 28px;
  line-height: 1;
}

.service-architecture-image {
  width: 100%;
  display: block;
}

.service-logo-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.service-logo-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
  padding: 18px;
}

.service-logo-image {
  width: 100%;
  height: 96px;
  object-fit: contain;
}
</style>
