<template>
  <!-- 公司简介 + 底部CTA - Figma 1461:1606 + 1498:1769 -->
  <view class="company-section">
    <!-- 背景图 - 模糊 + 0.5透明 -->
    <view class="company-bg">
      <image
        class="bg-img"
        src="/static/images/home/公司简介背景_1461_1606.png"
        mode="aspectFill"
      ></image>
    </view>

    <view class="company-content">
      <!-- 公司简介标题 - 居中 20px Heavy -->
      <text class="section-title">公司简介</text>

      <!-- Slogan - 18px Heavy 渐变文字 2行 -->
      <view class="company-slogan">
        <text class="slogan-main">用科技重新定义POD供应链</text>
        <text class="slogan-sub">让每一个创意,都能高效抵达全球</text>
      </view>

      <!-- 公司描述 - 12px Regular #000000 -->
      <text class="company-desc">Inkreach印美达全球，一家以AI与智能印花技术驱动的全球化POD柔性供应链公司，致力于成为全球创业者最可靠的成长伙伴。</text>

      <!-- 两栏说明 -->
      <view class="company-cols">
        <view class="col-left">
          <text class="col-title">服务对象与场景</text>
          <text class="col-text">服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家，提供从海外生产到末端物流的一站式供应链服务，让电商创业者专注增长，无惧后端履约。</text>
        </view>
        <view class="col-right">
          <text class="col-title">愿景</text>
          <text class="col-text">我们坚信，每一个创意都值得被完美呈现。 Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。</text>
        </view>
      </view>

      <!-- 4个核心能力卡片 - 2x2 180x90 -->
      <view class="ability-grid">
        <view class="ability-card" v-for="(item, index) in abilities" :key="index">
          <image class="ability-icon" :src="item.icon" mode="aspectFit"></image>
          <view class="ability-text">
            <text class="ability-title">{{ item.title }}</text>
            <text class="ability-desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部CTA区域 - 图片底+橙色叠加层+内容层 -->
    <view class="cta-footer">
      <!-- 图片底层 - image_26原图 -->
      <image class="cta-overlay-img" src="/static/images/home/image_26_1496_1761.png" mode="widthFix"></image>
      <!-- 橙色叠加层 - 在图片上方, 高不透明度让橙色更亮更突出 -->
      <view class="cta-orange-bg"></view>
      <!-- 内容层 -->
      <view class="cta-content">
        <!-- 长按识别 196×20px → 377×38rpx, 14px Medium white -->
        <text class="cta-tip">长按识别二维码，添加经理微信</text>
        <!-- 装饰箭头图标 19×10px → 37×19rpx -->
        <image class="cta-arrow" src="/static/icons/home/icon_arrow_down.png" mode="aspectFit"></image>
        <!-- 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx -->
        <view class="qr-wrap">
          <image
            class="qr-img"
            src="/static/images/home/Rectangle_187_1470_1653.png"
            mode="aspectFit"
          ></image>
        </view>
        <!-- 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx -->
        <view class="phone-pill">
          <image class="phone-icon" src="/static/icons/home/icon_phone.svg" mode="aspectFit"></image>
          <text class="phone-text">15999928161</text>
          <image class="phone-icon" src="/static/icons/home/icon_wechat.svg" mode="aspectFit"></image>
        </view>
        <!-- 联系我们 - 用户提供的image.png -->
        <image
          class="cta-text-img"
          src="/static/images/home/contact_us.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CompanyIntro',
  props: {
    abilities: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.company-section {
  position: relative;
  width: 100%;
  padding: 0;
  background: #f8f8f8;
  overflow: hidden;
}

/* 背景图 - 模糊 + 0.5透明 */
.company-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1088rpx;
  z-index: 0;
  overflow: hidden;
}
.bg-img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: blur(30rpx);
  -webkit-filter: blur(30rpx);
}

.company-content {
  position: relative;
  z-index: 1;
  padding-top: 40rpx;
}

/* 公司简介标题 - 20px Heavy #000000 居中 */
.section-title {
  display: block;
  text-align: center;
  font-size: 40rpx;
  font-weight: 900;
  color: #000000;
  line-height: 1.4;
  margin-bottom: 40rpx;
}

/* Slogan - 18px Heavy 渐变文字 */
.company-slogan {
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}
.slogan-main {
  display: block;
  font-size: 36rpx;
  font-weight: 900;
  color: #000000;
  line-height: 1.4;
}
.slogan-sub {
  display: block;
  font-size: 36rpx;
  font-weight: 900;
  line-height: 1.4;
  margin-top: 4rpx;
  background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(255, 104, 0, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 公司描述 - 12px Regular #000000 */
.company-desc {
  display: block;
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #000000;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

/* 两栏 - 14px Bold 标题 + 12px Regular 正文 */
.company-cols {
  display: flex;
  padding: 0 20rpx;
  gap: 32rpx;
  margin-bottom: 60rpx;
}
.col-left,
.col-right {
  flex: 1;
}
.col-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
  margin-bottom: 16rpx;
}
.col-text {
  display: block;
  font-size: 24rpx;
  color: #000000;
  line-height: 1.5;
}

/* 核心能力卡片 - 自适应2列(避免宽度+间距同时固定导致挤压) */
.ability-grid {
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 60rpx;
}
.ability-card {
  flex: 1 1 calc(50% - 10rpx);
  min-width: 0;
  height: 180rpx;
  background: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 32rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 22rpx;
}
/* 图标 24x24 */
.ability-icon {
  width: 48rpx;
  height: 48rpx;
  flex-shrink: 0;
}
.ability-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 标题 12px Bold #000000 */
.ability-title {
  font-size: 24rpx;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
}
/* 描述 10px Regular #000000 */
.ability-desc {
  margin-top: 8rpx;
  font-size: 20rpx;
  color: #000000;
  line-height: 1.45;
}

/* 底部CTA - 橙色背景层+图片叠加层+内容层 */
.cta-footer {
  position: relative;
  width: 750rpx;
  overflow: hidden;
}
/* 图片底层 - image_26原图 */
.cta-overlay-img {
  position: relative;
  width: 100%;
  z-index: 0;
  display: block;
}
/* 橙色叠加层 - 在图片上方, 0.8高不透明度让亮橙色突出 */
.cta-orange-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff6800;
  opacity: 0.85;
  z-index: 1;
}
/* 内容层 - absolute覆盖图片和橙色层, flex column 居中 */
.cta-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 33rpx;   /* 17px → 33rpx */
  box-sizing: border-box;
}
/* 长按识别 14px Medium white → 27rpx */
.cta-tip {
  font-size: 27rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 38rpx;
}
/* 装饰箭头图标 19×10px → 37×19rpx */
.cta-arrow {
  width: 37rpx;
  height: 19rpx;
  margin-top: 8rpx;      /* 4px → 8rpx */
}
/* 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx */
/* 二维码 - 白底圆角容器, 内边距让二维码无圆角 */
.qr-wrap {
  margin-top: 13rpx;     /* 7px → 13rpx */
  width: 200rpx;
  height: 200rpx;
  background: #ffffff;
  border-radius: 19rpx;  /* 圆角10px → 19rpx */
  padding: 10rpx;         /* 内边距5px → 10rpx, 让二维码本身不接触圆角 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 二维码图片 - 填满padding后的剩余空间, 无圆角 */
.qr-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/* 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx */
.phone-pill {
  margin-top: 23rpx;     /* 12px → 23rpx */
  width: 385rpx;
  height: 87rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 19rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-sizing: border-box;
}
.phone-icon {
  width: 35rpx;          /* 18px → 35rpx */
  height: 35rpx;
  flex-shrink: 0;
}
.phone-text {
  font-size: 23rpx;      /* 12px → 23rpx */
  font-weight: 700;
  color: #ffffff;
  line-height: 32rpx;
}
/* 联系我们 - 用户提供的image.png */
.cta-text-img {
  margin-top: 19rpx;     /* 10px → 19rpx */
  width: 569rpx;
}
</style>
