<script setup>
import {ref, onMounted} from 'vue'

const loading = ref(true)

// 公司介绍
const companyInfo = {
  name: '燃谷科技',
  fullName: '燃谷科技（南京）有限公司',
  founded: '2023年',
  location: '南京鼓楼万谷硅巷',
  introduction:
    '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。',
}

// 核心优势
const advantages = [
  {
    icon: 'DataAnalysis',
    title: '低空大数据',
    desc: '海量数据采集与分析能力',
    color: '#1890ff',
  },
  {
    icon: 'Connection',
    title: '低空物联网',
    desc: '全方位设备连接与管理',
    color: '#52c41a',
  },
  {
    icon: 'Cpu',
    title: '智能算法引擎',
    desc: 'AI驱动的智能决策系统',
    color: '#fa8c16',
  },
  {
    icon: 'Monitor',
    title: '空间计算模型',
    desc: '高精度空间数据处理',
    color: '#722ed1',
  },
]

// 资质证书
const certificates = [
  {id: 1, name: '营业执照', image: '/static/images/main/1.png'},
  {id: 2, name: 'ISO9001认证', image: '/static/images/main/2.png'},
  {id: 3, name: '高新技术企业', image: '/static/images/main/3.png'},
  {id: 4, name: '软件著作权', image: '/static/images/main/4.png'},
  {id: 5, name: '专利证书1', image: '/static/images/main/5.png'},
  {id: 6, name: '专利证书2', image: '/static/images/main/6.png'},
  {id: 7, name: '专利证书3', image: '/static/images/main/7.png'},
  {id: 8, name: '专利证书4', image: '/static/images/main/8.png'},
  {id: 9, name: '专利证书5', image: '/static/images/main/9.png'},
  {id: 10, name: '荣誉证书1', image: '/static/images/main/10.png'},
  {id: 11, name: '荣誉证书2', image: '/static/images/main/11.png'},
  {id: 12, name: '荣誉证书3', image: '/static/images/main/12.png'},
]

onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 500)
})
</script>

<template>
  <div class="mobile-about" v-loading="loading">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">关于我们</h1>
      <p class="page-subtitle">了解燃谷科技</p>
    </div>

    <!-- 公司简介 -->
    <div class="intro-section">
      <div class="company-card">
        <!-- Logo区域 -->
        <div class="logo-area">
          <img src="/static/images/main/rangu.png" alt="燃谷科技" class="company-logo" />
        </div>

        <!-- 公司信息 -->
        <div class="info-area">
          <h2 class="company-name">{{ companyInfo.fullName }}</h2>

          <div class="info-tags">
            <span class="tag">📅 {{ companyInfo.founded }}成立</span>
            <span class="tag">📍 {{ companyInfo.location }}</span>
          </div>

          <div class="company-intro">
            <p>{{ companyInfo.introduction }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心优势 -->
    <div class="advantages-section">
      <div class="section-header">
        <h3 class="section-title">核心优势</h3>
        <p class="section-desc">四大核心技术组件</p>
      </div>

      <div class="advantages-grid">
        <div
          v-for="(item, index) in advantages"
          :key="index"
          class="advantage-card"
          :style="{borderLeftColor: item.color}"
        >
          <div class="advantage-icon" :style="{backgroundColor: item.color + '15'}">
            <el-icon :size="24" :style="{color: item.color}">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="advantage-content">
            <h4 class="advantage-title">{{ item.title }}</h4>
            <p class="advantage-desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 资质证书 -->
    <div class="certificate-section">
      <div class="section-header">
        <h3 class="section-title">资质证书</h3>
        <p class="section-desc">权威认证 · 实力见证</p>
      </div>

      <div class="certificate-grid">
        <div
          v-for="cert in certificates"
          :key="cert.id"
          class="certificate-item"
          @click="$viewer.api({images: [cert.image]})"
        >
          <img :src="cert.image" :alt="cert.name" class="certificate-img" />
          <div class="certificate-name">{{ cert.name }}</div>
        </div>
      </div>
    </div>

    <!-- 企业文化 -->
    <div class="culture-section">
      <div class="section-header">
        <h3 class="section-title">企业文化</h3>
        <p class="section-desc">创新 · 质量 · 合作</p>
      </div>

      <div class="culture-cards">
        <div class="culture-card innovation">
          <div class="culture-icon">💡</div>
          <h4>创新</h4>
          <p>持续技术创新<br />引领行业发展</p>
        </div>

        <div class="culture-card quality">
          <div class="culture-icon">⭐</div>
          <h4>质量</h4>
          <p>精益求精<br />追求卓越品质</p>
        </div>

        <div class="culture-card cooperation">
          <div class="culture-icon">🤝</div>
          <h4>合作</h4>
          <p>开放共赢<br />携手共创未来</p>
        </div>
      </div>
    </div>

    <!-- 底部CTA -->
    <div class="cta-section">
      <div class="cta-content">
        <h3>携手共进，共创低空经济新未来</h3>
        <p>期待与您的合作交流</p>
        <el-button type="primary" round size="large" @click="$router.push('/link')">
          联系我们
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {DataAnalysis, Connection, Cpu, Monitor} from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.mobile-about {
  min-height: 100%;
  background-color: #f5f7fa;
  padding-bottom: 20px;

  .page-header {
    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
    padding: 24px 16px;
    color: #ffffff;

    .page-title {
      font-size: 22px;
      font-weight: 600;
      margin: 0 0 8px 0;
      letter-spacing: 1px;
    }

    .page-subtitle {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      margin: 0;
    }
  }

  // 公司简介
  .intro-section {
    padding: 16px;

    .company-card {
      background-color: #ffffff;
      border-radius: 12px; /* no */
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */

      .logo-area {
        width: 100%;
        height: 200px; /* no */
        background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px; /* no */

        .company-logo {
          max-width: 80%;
          max-height: 160px; /* no */
          object-fit: contain;
        }
      }

      .info-area {
        padding: 20px; /* no */

        .company-name {
          font-size: 20px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 12px 0;
          text-align: center;
        }

        .info-tags {
          display: flex;
          justify-content: center;
          gap: 10px; /* no */
          margin-bottom: 16px; /* no */
          flex-wrap: wrap;

          .tag {
            display: inline-block;
            padding: 4px 12px; /* no */
            background-color: #f5f7fa;
            color: #666666;
            font-size: 12px;
            border-radius: 14px; /* no */
          }
        }

        .company-intro {
          p {
            font-size: 14px;
            line-height: 1.8;
            color: #555555;
            text-indent: 2em;
            margin: 0;
            text-align: justify;
          }
        }
      }
    }
  }

  // 核心优势
  .advantages-section {
    padding: 0 16px 16px;

    .section-header {
      margin-bottom: 16px; /* no */

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 6px 0;
      }

      .section-desc {
        font-size: 13px;
        color: #999999;
        margin: 0;
      }
    }

    .advantages-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px; /* no */

      .advantage-card {
        background-color: #ffffff;
        border-radius: 10px; /* no */
        padding: 16px; /* no */
        border-left: 3px solid;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.97);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
        }

        .advantage-icon {
          width: 48px; /* no */
          height: 48px; /* no */
          border-radius: 10px; /* no */
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px; /* no */
        }

        .advantage-content {
          .advantage-title {
            font-size: 15px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0 0 6px 0;
          }

          .advantage-desc {
            font-size: 12px;
            color: #666666;
            margin: 0;
            line-height: 1.5;
          }
        }
      }
    }
  }

  // 资质证书
  .certificate-section {
    padding: 0 16px 16px;

    .section-header {
      margin-bottom: 16px; /* no */

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 6px 0;
      }

      .section-desc {
        font-size: 13px;
        color: #999999;
        margin: 0;
      }
    }

    .certificate-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px; /* no */

      .certificate-item {
        background-color: #ffffff;
        border-radius: 8px; /* no */
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* no */
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.95);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* no */
        }

        .certificate-img {
          width: 100%;
          height: 200px; /* no */
          object-fit: contain;
          background-color: #fafafa;
          padding: 8px; /* no */
          box-sizing: border-box;
        }

        .certificate-name {
          padding: 8px; /* no */
          font-size: 11px;
          color: #666666;
          text-align: center;
          background-color: #fafafa;
        }
      }
    }
  }

  // 企业文化
  .culture-section {
    padding: 0 16px 16px;

    .section-header {
      margin-bottom: 16px; /* no */

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 6px 0;
      }

      .section-desc {
        font-size: 13px;
        color: #999999;
        margin: 0;
      }
    }

    .culture-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px; /* no */

      .culture-card {
        background-color: #ffffff;
        border-radius: 10px; /* no */
        padding: 16px 12px; /* no */
        text-align: center;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
        transition: all 0.3s ease;

        &:active {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
        }

        .culture-icon {
          font-size: 32px;
          margin-bottom: 8px; /* no */
        }

        h4 {
          font-size: 15px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 6px 0;
        }

        p {
          font-size: 11px;
          color: #666666;
          line-height: 1.6;
          margin: 0;
        }

        &.innovation {
          border-top: 3px solid #1890ff;
        }

        &.quality {
          border-top: 3px solid #faad14;
        }

        &.cooperation {
          border-top: 3px solid #52c41a;
        }
      }
    }
  }

  // 底部CTA
  .cta-section {
    margin: 16px; /* no */
    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
    border-radius: 12px; /* no */
    padding: 32px 20px; /* no */
    text-align: center;

    .cta-content {
      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
        margin: 0 0 10px 0;
        line-height: 1.4;
      }

      p {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        margin: 0 0 20px 0;
      }

      .el-button {
        width: 180px; /* no */
        height: 44px; /* no */
        font-size: 15px;
        background-color: #ffffff !important;
        color: #081314 !important;
        border: none !important;

        &:active {
          opacity: 0.9;
        }
      }
    }
  }
}
</style>
