<template>
  <DefaultLayout>
    <!-- banner -->
    <section class="banner-section">
      <img src="@assets/banner.png" alt="" srcset="">
      <div class="info-row">
        <div class="info-item">
          <span class="text">覆盖</span>
          <span class="number" ref="number1">{{ animatedNumbers.number1 }}+</span>
          <span class="text">垂直行业</span>
        </div>
        <div class="info-item">
          <span class="number" ref="number2">{{ animatedNumbers.number2 }}</span>
          <span class="text">小时原型交付</span>
        </div>
        <div class="info-item">
          <span class="text">定制成本降低</span>
          <span class="number" ref="number3">{{ animatedNumbers.number3 }}%</span>
        </div>
      </div>
    </section>

    <!-- 产品中心 -->
    <section class="products-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">产品中心</h2>
          <p class="section-subtitle">SMART SOLUTION</p>
          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <div class="products-content">
          <div class="products-nav">
            <div v-for="product in productList" :key="product.id" class="nav-item"
              :class="{ active: activeProductId === product.id }" @click="setActiveProduct(product.id)">
              {{ product.classifyName }}
            </div>
          </div>

          <div class="product-detail" v-if="activeProduct">
            <div class="detail-content">
              <h3 class="product-title">{{ activeProduct.classifyName }}</h3>
              <p class="product-description">{{ activeProduct.description || activeProduct.classifyDesc || '为您提供专业的解决方案'
              }}</p>
            </div>
            <div class="detail-image">
              <img :src="imgHost + activeProduct.projectImage" :alt="activeProduct.classifyName" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 行业案例 -->
    <section class="cases-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">行业案例</h2>
          <p class="section-subtitle">SMART SOLUTION</p>
          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <div class="cases-carousel">
          <div class="nav-arrow nav-arrow-left" :class="{ disabled: currentCaseIndex === 0 }" @click="prevCase">
            <div class="arrow-icon">
              <img src="@assets/arrow-right.png" alt="Previous" />
            </div>
          </div>

          <div class="cases-container">
            <div class="cases-wrapper"
              :style="{ transform: `translateX(-${currentCaseIndex * (100 / visibleCases)}%)` }">
              <div v-for="caseItem in casesList" :key="caseItem.id" @click="goToCaseDetail(caseItem.id)"
                class="case-item">
                <div class="case-image">
                  <img :src="imgHost + caseItem.projectImage" :alt="caseItem.title" />
                </div>
                <div class="case-content">
                  <h3 class="case-title">{{ caseItem.projectName }}</h3>
                  <p class="case-description">{{ caseItem.projectProfile }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="nav-arrow nav-arrow-right" :class="{ disabled: currentCaseIndex >= maxCaseIndex }"
            @click="nextCase">
            <div class="arrow-icon">
              <img src="@assets/arrow-right.png" alt="Next" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 企业简介 -->
    <section class="about-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">企业简介</h2>
          <p class="section-subtitle">ENTERPRISE QUALIFICATION</p>
        </div>

        <div class="about-content">
          <div class="about-tabs">
            <div v-for="tab in aboutTabs" :key="tab.id" class="tab-item" :class="{ active: activeAboutTab === tab.id }"
              @click="setActiveAboutTab(tab.id)">
              {{ tab.title }}
            </div>
          </div>

          <div class="about-detail">
            <transition name="fade-slide" mode="out-in">
              <div :key="activeAboutTab" class="detail-content">
                <div class="content-left">
                  <img :src="activeAboutContent.image" :alt="activeAboutContent.title" />
                </div>
                <div class="content-right">
                  <h3 class="content-title">{{ activeAboutContent.title }}</h3>
                  <div class="content-description" v-html="activeAboutContent.description"></div>
                  <div class="content-action">
                    <button class="learn-more-btn" @click="router.push({ name: 'About' })">查看更多 →</button>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </section>
    <!-- 合作伙伴 -->
    <section class="cooperation-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">合作伙伴</h2>
          <p class="section-subtitle">BUSINESS PARTNER</p>
        </div>

        <div class="partners-grid">
          <a v-for="partner in partnersList" :key="partner.id" :href="partner.url" target="_blank" class="partner-item">
            <img :src="partner.logo" :alt="partner.name" />
          </a>
        </div>
      </div>
    </section>

  </DefaultLayout>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import { getHomeData, getProjectClassifyList, getProjectList, getCompanyCertList } from '@/api/modules/home'
import { animateNumber, createNumberAnimationObserver } from '@/utils/numberAnimation'
// 导入图片资源
import indexAboutBg from '@/assets/index-about-img.png'

export default {
  name: 'HomePage',
  components: {
    DefaultLayout
  },
  setup() {
    const router = useRouter()
    const activeProductId = ref(null)

    // 环境变量
    const imgHost = import.meta.env.VITE_APP_IMG_HOST

    // 数字滚动动画相关
    const animatedNumbers = ref({
      number1: 0,
      number2: 0,
      number3: 0
    })

    const targetNumbers = {
      number1: 10,
      number2: 72,
      number3: 30
    }

    // 启动所有数字动画
    const startNumberAnimations = () => {
      // 延迟启动，让页面加载完成后再开始动画
      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number1 = value,
          targetNumbers.number1,
          2000
        )
      }, 200)

      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number2 = value,
          targetNumbers.number2,
          2500
        )
      }, 500)

      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number3 = value,
          targetNumbers.number3,
          2200
        )
      }, 800)
    }

    // 设置数字动画观察器
    const setupIntersectionObserver = () => {
      createNumberAnimationObserver('.info-row', startNumberAnimations, {
        threshold: 0.5,
        rootMargin: '0px 0px -100px 0px'
      })
    }

    // 产品分类列表
    let productList = ref([])
    // 当前选中分类的产品列表
    let currentProductList = ref([])

    const activeProduct = computed(() => {
      if (productList.value.length === 0) return null
      return productList.value.find(product => product.id === activeProductId.value) || productList.value[0]
    })

    const setActiveProduct = async (id) => {
      activeProductId.value = id
      // 获取选中分类的产品列表
      const selectedCategory = productList.value.find(product => product.id === id)
      if (selectedCategory && selectedCategory.id) {
        await getProductsByClassify(selectedCategory.id)
      }
    }

    // 行业案例数据和逻辑
    const currentCaseIndex = ref(0)
    const visibleCases = ref(3) // 同时显示的案例数量

    // 企业简介数据和逻辑
    const activeAboutTab = ref('about')

    const aboutTabs = ref([
      { id: 'about', title: '关于达泽' },
      { id: 'history', title: '发展历程' },
      { id: 'qualification', title: '荣誉资质' }
    ])

    let aboutContents = ref({
      about: {
        title: '关于达泽',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      },
      history: {
        title: '发展历程',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      },
      qualification: {
        title: '荣誉资质',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      }
    })

    const activeAboutContent = computed(() => {
      return aboutContents.value[activeAboutTab.value]
    })

    const setActiveAboutTab = (tabId) => {
      activeAboutTab.value = tabId
    }

    // 合作伙伴数据
    const partnersList = ref([
      {
        id: 1,
        name: '浪潮',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=浪潮',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 2,
        name: '新信息',
        logo: 'https://unsplash.it/214/84',
        url: '#'
      },
      {
        id: 3,
        name: 'DELL',
        logo: 'https://unsplash.it/214/84',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 4,
        name: '锐捷',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=锐捷',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 5,
        name: '河姆渡',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=河姆渡',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 6,
        name: 'SIEMENS',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=SIEMENS',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 7,
        name: 'HP',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=HP',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 8,
        name: 'Sygon',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=Sygon',
        url: '#'
      },
      {
        id: 9,
        name: 'KSTAR',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=KSTAR',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 10,
        name: 'WEIMO',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=WEIMO',
        url: '#'
      }
    ])

    let casesList = ref([
      {
        id: 1,
        projectName: '智慧农业（种植+养殖）',
        projectProfile: '通过物联网技术实现农业自动化管理，利用传感器监控土壤、水质等环境参数，提高农业生产效率。',
        projectImage: 'https://unsplash.it/300/200'
      },
      {
        id: 2,
        projectName: '智慧停车',
        projectProfile: '通过车牌识别技术及物联网设备实现停车场智能化管理，实现无感支付和车位引导等功能。',
        projectImage: 'https://unsplash.it/300/200'
      },
      {
        id: 3,
        projectName: '副控票务系统',
        projectProfile: '为景区提供智能化票务管理，智能闸机一体化管理系统，提升游客体验，优化景区运营。',
        projectImage: 'https://unsplash.it/300/200'
      },
      {
        id: 4,
        projectName: '智慧校园',
        projectProfile: '集成学生管理、教学管理、安全监控等功能，为教育机构提供全方位数字化解决方案。',
        projectImage: 'https://unsplash.it/300/200'
      },
      {
        id: 5,
        projectName: '智慧医疗',
        projectProfile: '通过数字化技术提升医疗服务效率，实现患者信息管理、远程诊疗等智能化医疗服务。',
        projectImage: 'https://unsplash.it/300/200'
      },
      {
        id: 6,
        projectName: '智慧物流',
        projectProfile: '利用物联网和大数据技术优化物流配送，实现货物追踪、路径优化等智能化物流管理。',
        projectImage: 'https://unsplash.it/300/200'
      }
    ])

    const maxCaseIndex = computed(() => {
      return Math.max(0, casesList.value.length - visibleCases.value)
    })

    const nextCase = () => {
      if (currentCaseIndex.value < maxCaseIndex.value) {
        currentCaseIndex.value++
      }
    }

    const prevCase = () => {
      if (currentCaseIndex.value > 0) {
        currentCaseIndex.value--
      }
    }

    // API调用方法
    const loadHomeData = async () => {
      try {
        const result = await getHomeData()
        const data = result.data
        console.log('首页数据:', data)

        if (data) {
          // 更新关于达泽的描述
          if (data.companyDescribe) {
            aboutContents.value.about.description = data.companyDescribe
          }

          // 更新发展历程的描述
          if (data.courseList && Array.isArray(data.courseList)) {
            const historyHtml = data.courseList.map(item => {
              const time = item.createTime ? new Date(item.createTime).getFullYear() : '未知时间'
              const description = item.courseDescribe || '暂无描述'
              return `<p><strong>${time}年</strong> - ${description}</p>`
            }).join('')
            aboutContents.value.history.description = historyHtml || '<p>暂无发展历程数据</p>'
          }
        }
      } catch (error) {
        console.error('加载首页数据失败:', error)
      }
    }

    // 获取产品分类列表
    const handleGetProjectClassifyList1 = async () => {
      try {
        const data = await getProjectClassifyList({ classifyType: 1 })
        console.log('产品中心分类列表:', data)

        if (data && data.rows && data.rows.length > 0) {
          productList.value = data.rows
          // 默认选中第一个分类
          activeProductId.value = data.rows[0].id
          // 获取第一个分类的产品列表
          await getProductsByClassify(data.rows[0].id)
        }
      } catch (error) {
        console.error('加载产品中心分类列表失败:', error)
      }
    }

    // 根据分类ID获取产品列表
    const getProductsByClassify = async (classifyId) => {
      try {
        const data = await getProjectList({
          classifyId: classifyId,
          projectType: 1 // 1：产品中心 2：行业案例
        })
        console.log('产品列表:', data)

        if (data && data.rows) {
          currentProductList.value = data.rows
          // 更新当前选中分类的描述信息
          const currentCategory = productList.value.find(item => item.id === activeProductId.value)
          if (currentCategory && data.rows.length > 0) {
            // 可以根据API返回的数据更新分类的描述信息
            currentCategory.description = data.rows[0].projectProfile || currentCategory.classifyDesc || '为您提供专业的解决方案';
            currentCategory.projectImage = data.rows[0].projectImage
            console.log('currentCategory', currentCategory)
          }
        }
      } catch (error) {
        console.error('加载产品列表失败:', error)
      }
    }


    // 产品/案例信息-案例信息
    const handleGetProjectList = async () => {
      try {
        const data = await getProjectList({ projectType: 2 })
        // 这里可以更新products和advantages数据
        console.log('案例信息:', data)
        casesList.value = data.rows;
        console.log('案例信息列表:', casesList.value)
      } catch (error) {
        console.error('加载案例信息失败:', error)
      }
    }

    // 响应式处理
    const updateVisibleCases = () => {
      if (window.innerWidth <= 768) {
        visibleCases.value = 1
      } else {
        visibleCases.value = 3
      }
      // 重置索引以防超出范围
      if (currentCaseIndex.value > maxCaseIndex.value) {
        currentCaseIndex.value = maxCaseIndex.value
      }
    }

    // 跳转到案例详情页
    const goToCaseDetail = (caseId) => {
      router.push({
        name: 'Casesdetails',
        query: { id: caseId }
      })
    }

    // 获取企业资质证书
    const loadCompanyCertList = async () => {
      try {
        const data = await getCompanyCertList()
        console.log('企业资质数据:', data)

        if (data && data.rows && Array.isArray(data.rows)) {
          const certHtml = data.rows.map(item => {
            const certName = item.certName || '未知证书'
            return `<p><strong>${certName}</strong></p>`
          }).join('')
          aboutContents.value.qualification.description = certHtml || '<p>暂无资质证书数据</p>'
        }
      } catch (error) {
        console.error('加载企业资质失败:', error)
      }
    }

    onMounted(() => {
      loadHomeData()
      loadCompanyCertList() // 获取企业资质证书
      handleGetProjectClassifyList1() // 获取产品分类列表
      handleGetProjectList() // 获取案例列表
      updateVisibleCases()
      window.addEventListener('resize', updateVisibleCases)

      // 设置数字滚动动画的观察器
      nextTick(() => {
        setupIntersectionObserver()
      })
    })

    onUnmounted(() => {
      window.removeEventListener('resize', updateVisibleCases)
    })

    return {
      router,
      productList,
      currentProductList,
      activeProductId,
      activeProduct,
      setActiveProduct,
      casesList,
      currentCaseIndex,
      visibleCases,
      maxCaseIndex,
      nextCase,
      prevCase,
      aboutTabs,
      activeAboutTab,
      activeAboutContent,
      setActiveAboutTab,
      partnersList,
      goToCaseDetail,
      imgHost,
      animatedNumbers
    }
  }
}
</script>

<style lang="scss" scoped>
// banner区域
.banner-section {
  position: relative;

  img {
    width: 100%;
  }
}

.info-row {
  height: 130px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);

  .info-item {
    // flex: 1;
    padding: 0 78px;
    position: relative;
    text-align: center;
  }

  .info-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 20px;
    background-color: #ccc;
    transform: translateY(-50%);
  }

  .number {
    color: #0066cc;
    font-weight: bold;
    font-size: 32px;
    vertical-align: middle;
    margin: 0 5px;
    font-family: 'Arial', monospace;
    letter-spacing: 1px;
    transition: all 0.1s ease;
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
  }

  .text {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin: 0;
    display: inline-block;
  }
}

// 产品中心
.products-section {
  background: url('@assets/index-products-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

  .section-header {
    text-align: center;
    margin-bottom: 60px;

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .section-description {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }
  }

  .products-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
  }

  .products-nav {
    flex: 0 0 22%;

    .nav-item {
      height: 100px;
      line-height: 100px;
      padding: 0 30px;
      margin-bottom: 2px;
      cursor: pointer;
      font-size: 24px;
      font-weight: 500;
      color: #343434;
      transition: all 0.3s ease;
      // border-radius: 8px;
      box-sizing: border-box;

      &:hover {
        background: rgba(0, 102, 204, 0.1);
        border-color: #0066cc;
        color: #0066cc;
      }

      &.active {
        background: linear-gradient(to right, #CAE0FF, #E5F0FF);
        color: #0054FF;
        // border-color: #0066cc;
        // box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
      }
    }
  }

  .product-detail {
    flex: 1;

    .detail-content {
      flex: 1;

      .product-title {
        font-size: 36px;
        font-weight: bold;
        color: #333;
        margin: 0 0 20px 0;
      }

      .product-description {
        font-size: 24px;
        color: #333;
        line-height: 1.5;
        margin-bottom: 35px;
      }
    }

    .detail-image {
      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

// 行业案例
.cases-section {
  background: url('@assets/index-cases-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

  .section-header {
    text-align: center;
    margin-bottom: 60px;

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .section-description {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }
  }

  .cases-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .nav-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;

    &:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    &.disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    .arrow-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &.nav-arrow-left .arrow-icon {
      transform: rotate(180deg);
    }
  }

  .cases-container {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
  }

  .cases-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
  }

  .case-item {
    flex: 0 0 calc(100% / 3);
    padding: 0 15px;
    box-sizing: border-box;

    .case-image {
      width: 100%;
      height: 200px;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
      background: #fff;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      &:hover img {
        transform: scale(1.05);
      }
    }

    .case-content {
      background: rgba(255, 255, 255, 0.95);
      padding: 25px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 0 0 12px 12px;

      .case-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin: 0 0 15px 0;
        line-height: 1.4;
      }

      .case-description {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0;
        min-height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
      }
    }
  }
}

// 企业简介
.about-section {
  background: url('@assets/index-about-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

  .section-header {
    text-align: center;
    margin-bottom: 60px;

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }

  .about-content {
    // max-width: 1200px;
    margin: 0 auto;
  }

  .about-tabs {
    display: flex;
    justify-content: space-between;
    // gap: 0;
    margin-bottom: 95px;

    .tab-item {
      flex: 0 0 400px;
      height: 66px;
      line-height: 66px;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      color: #333;
      // background: rgba(255, 255, 255, 0.8);
      // border: 2px solid #E5E5E5;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;

      // &:first-child {
      //   border-radius: 8px 0 0 8px;
      // }

      // &:last-child {
      //   border-radius: 0 8px 8px 0;
      // }

      // &:not(:last-child) {
      //   border-right: none;
      // }

      &:hover {
        background: rgba(0, 102, 204, 0.1);
        color: #0066cc;
        border-color: #0066cc;
        z-index: 2;
      }

      &.active {
        background: #0066cc;
        color: white;
        border-color: #0066cc;
        z-index: 3;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
      }
    }
  }

  .about-detail {
    // background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 40px 0;
    // box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    // backdrop-filter: blur(10px);
    min-height: 400px;
  }

  .detail-content {
    display: flex;
    gap: 110px;
    align-items: flex-start;

    .content-left {
      flex: 0 0 800px;

      img {
        width: 100%;
        height: 480px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }

    .content-right {
      flex: 1;

      .content-title {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin: 0 0 25px 0;
      }

      .content-description {
        font-size: 16px;
        color: #666;
        line-height: 1.8;
        margin-bottom: 30px;

        p {
          margin: 0 0 15px 0;

          &:last-child {
            margin-bottom: 0;
          }
        }

        strong {
          color: #0066cc;
          font-weight: 600;
        }
      }

      .content-action {
        .learn-more-btn {
          background: transparent;
          color: #0054FF;
          border: 1px solid #0054FF;
          padding: 12px 30px;
          border-radius: 5px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
          }

          &:active {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

// 合作伙伴
.cooperation-section {
  // background: url('@assets/index-cooperation-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 1346px;
    height: 335px;
    right: 150px;
    top: 0;
    background: url('@assets/index-cooperation-bg.png') no-repeat center center;
    ;
    background-size: contain;
  }

  .section-header {
    text-align: center;
    margin-bottom: 60px;

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 185px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }

  .partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    // max-width: 1000px;
    margin: 0 auto;

    .partner-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 214px;
      height: 84px;
      background: rgba(255, 255, 255, 0.9);
      border: 2px solid #E5E5E5;
      border-radius: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
      backdrop-filter: blur(5px);
      overflow: hidden;

      &:hover {
        background: rgba(255, 255, 255, 1);
        border-color: #0066cc;
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
      }

      img {
        max-width: 100%;
        max-height: 84px;
        object-fit: contain;
        // filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      &:hover img {
        filter: grayscale(0%);
      }
    }
  }
}




// 切换动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}


// 响应式设计
@media (max-width: 768px) {
  .cooperation-section {
    &::before {
      width: 0;
    }

    .section-header {
      .section-subtitle {
        margin-bottom: 10px;
      }
    }
  }

  .info-row {
    .info-item {
      padding: 0 10px;
    }

    .text {
      font-size: 14px;
    }

    .number {
      font-size: 14px;
    }
  }

  .products-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

      .section-title {
        font-size: 32px;
      }
    }

    .products-content {
      flex-direction: column;
      gap: 0;
    }

    .products-nav {
      flex: none;
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding-bottom: 10px;
      flex-wrap: wrap;

      .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 15px 20px;
        font-size: 16px;
        height: auto;
        line-height: 1;
      }
    }

    .product-detail {
      flex-direction: column;
      padding: 30px 20px;

      .detail-image {
        flex: none;
        width: 100%;

        img {
          height: 200px;
        }
      }
    }
  }

  .cases-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

      .section-title {
        font-size: 32px;
      }
    }

    .cases-carousel {
      gap: 15px;
    }

    .nav-arrow {
      width: 50px;
      height: 50px;

      .arrow-icon {
        width: 20px;
        height: 20px;
      }
    }

    .case-item {
      flex: 0 0 100%;
      padding: 0 10px;

      .case-image {
        height: 180px;
        margin-bottom: 15px;
      }

      .case-content {
        padding: 20px;

        .case-title {
          font-size: 18px;
          margin-bottom: 12px;
        }

        .case-description {
          font-size: 13px;
        }
      }
    }
  }

  .about-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

      .section-title {
        font-size: 32px;
      }
    }

    .about-tabs {
      flex-direction: column;
      gap: 2px;
      margin-bottom: 30px;

      .tab-item {
        flex: none;
        border-radius: 8px !important;
        border: 2px solid #E5E5E5 !important;
        margin-bottom: 2px;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
      }
    }

    .about-detail {
      padding: 25px 20px;
      margin: 0 15px;
    }

    .detail-content {
      flex-direction: column;
      gap: 25px;

      .content-left {
        flex: none;
        width: 100%;

        img {
          height: 200px;
        }
      }

      .content-right {
        .content-title {
          font-size: 24px;
          margin-bottom: 20px;
        }

        .content-description {
          font-size: 15px;
          margin-bottom: 25px;
        }

        .content-action {
          text-align: center;

          .learn-more-btn {
            padding: 10px 25px;
            font-size: 15px;
          }
        }
      }
    }
  }

  .cooperation-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

      .section-title {
        font-size: 32px;
      }
    }

    .partners-grid {
      gap: 20px;
      margin: 0 20px;

      .partner-item {
        width: calc(50% - 10px);
        height: 80px;
        padding: 15px;

        img {
          max-height: 50px;
        }
      }
    }
  }
}
</style>