<template>
  <div>
    <!-- 主视觉区域 -->
    <section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-indigo-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-12 md:mb-0">
            <h1
                class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight"
                data-aos="fade-up"
            >
              引领未来，<br>
              <span class="text-amber-600">创新</span>无限可能
            </h1>
            <p
                class="text-lg text-gray-700 mb-8 max-w-lg"
                data-aos="fade-up"
                data-aos-delay="100"
            >
              上海酉佰佰致力于为企业提供前沿的解决方案，赋能数字化转型，
              创造可持续的商业价值。
            </p>
            <div
                class="flex flex-wrap gap-4"
                data-aos="fade-up"
                data-aos-delay="200"
            >
              <router-link
                  to="/features"
                  class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium shadow-md transition-all duration-300 hover:shadow-lg flex items-center"
              >
                <span>了解更多</span>
                <i class="fas fa-arrow-right ml-2 text-xs"></i>
              </router-link>
              <button
                  class="px-6 py-3 bg-white text-indigo-900 border border-indigo-200 rounded-lg font-medium hover:bg-indigo-50 transition-colors flex items-center"
              >
                <i class="fas fa-phone-alt mr-2"></i>
                <span>联系我们</span>
              </button>
            </div>
          </div>

          <div class="md:w-1/2 flex justify-center">
            <div class="relative">
              <div class="absolute -top-6 -right-6 w-64 h-64 bg-amber-500 rounded-full opacity-10" data-aos="fade"></div>
              <div class="absolute -bottom-6 -left-6 w-72 h-72 bg-indigo-500 rounded-full opacity-10" data-aos="fade" data-aos-delay="300"></div>
              <div
                  class="relative z-10 rounded-2xl overflow-hidden shadow-xl w-full max-w-md"
                  data-aos="zoom-in"
                  data-aos-delay="200"
              >
                <!-- 图片占位 -->
                <div class="bg-gradient-to-br from-indigo-600 to-indigo-900 border-2 border-dashed rounded-xl w-full h-96 p-6 flex items-center justify-center">
                  <div class="text-center text-white">
                    <i class="fas fa-chart-line text-5xl mb-4 opacity-70"></i>
                    <p class="text-xl font-light">企业解决方案展示</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心价值 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="我们的核心价值"
            subtitle="以专业赢得信任"
            description="我们坚持创新驱动与客户至上的理念，为企业提供专业的数字化转型解决方案"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid md:grid-cols-3 gap-8 mt-16">
          <Card
              v-for="(value, index) in values"
              :key="index"
              :title="value.title"
              :icon="value.icon"
              :data-aos="'fade-up'"
              :data-aos-delay="index * 100"
          >
            <p>
              {{ value.description }}
            </p>
            <template #actions>
              <a
                  href="#"
                  class="inline-flex items-center mt-4 font-medium text-amber-600 hover:text-amber-700 transition-colors"
              >
                <span>了解详情</span>
                <i class="fas fa-arrow-right ml-2 text-xs"></i>
              </a>
            </template>
          </Card>
        </div>
      </div>
    </section>

    <!-- 企业优势 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-center justify-between">
          <div class="lg:w-5/12 mb-12 lg:mb-0">
            <SectionTitle
                title="为什么选择"
                subtitle="企业优势"
                highlight="上海酉佰佰?"
                data-aos="fade-right"
            />

            <p class="text-gray-600 mt-6 mb-8" data-aos="fade-right" data-aos-delay="100">
              我们拥有多年的行业经验和专业团队，致力于为客户提供全方位的解决方案。
              凭借独特的技术优势和创新的服务理念，帮助企业实现数字化转型。
            </p>

            <div class="grid grid-cols-2 gap-4">
              <div
                  v-for="(stat, index) in stats"
                  :key="index"
                  class="bg-white rounded-lg p-4 flex flex-col items-center"
                  :data-aos="'fade-up'"
                  :data-aos-delay="(index * 100) + 200"
              >
                <div class="text-3xl font-bold text-indigo-800">{{ stat.value }}</div>
                <div class="text-gray-600">{{ stat.label }}</div>
              </div>
            </div>
          </div>

          <div class="lg:w-6/12" data-aos="fade-left" data-aos-delay="200">
            <div class="relative">
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full rounded-3xl bg-gradient-to-r from-amber-400/10 to-blue-400/10 rotate-12"></div>
              <div class="relative bg-white rounded-2xl overflow-hidden shadow-lg flex">
                <div class="hidden lg:block w-1/3 bg-gradient-to-b from-amber-500 to-amber-600 p-6 flex items-center justify-center bg-cover bg-center"
                     style="background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')">
                <i class="fas fa-medal text-amber-600 text-5xl"></i>
                </div>
                <div class="w-full lg:w-2/3 p-8">
                  <h3 class="text-xl font-bold text-gray-900 mb-4">专业服务能力</h3>
                  <ul class="space-y-4">
                    <li
                        v-for="(item, index) in advantages"
                        :key="index"
                        class="flex items-start"
                        :data-aos="'fade-up'"
                        :data-aos-delay="index * 100"
                    >
                      <div class="w-8 h-8 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center flex-shrink-0 mr-3">
                        <i :class="item.icon"></i>
                      </div>
                      <div>
                        <h4 class="font-medium text-gray-900">{{ item.title }}</h4>
                        <p class="text-gray-600 text-sm mt-1">{{ item.description }}</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户评价 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="客户评价"
            subtitle="他们这样说"
            description="多年来，我们服务的客户遍布不同行业，获得了广泛认可"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid md:grid-cols-3 gap-8 mt-16">
          <div
              v-for="(testimonial, index) in testimonials"
              :key="index"
              :data-aos="'fade-up'"
              :data-aos-delay="index * 100"
          >
            <Card size="lg" hover-effect no-border class="h-full" icon-bg-class="bg-indigo-50 text-indigo-600">
              <template #icon>
                <div class="text-5xl text-indigo-100 font-serif">"</div>
              </template>

              <p class="text-gray-600 italic">
                {{ testimonial.content }}
              </p>

              <div class="mt-6 flex items-center">
                <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                  <img :src="testimonial.avatar" alt="" />
                </div>
                <div>
                  <div class="font-medium text-gray-900">{{ testimonial.name }}</div>
                  <div class="text-sm text-gray-500">{{ testimonial.position }}</div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作品牌 -->
    <section class="py-16 md:py-20 bg-gradient-to-r from-indigo-50 to-blue-50 overflow-hidden">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="合作伙伴"
            subtitle="信赖品牌"
            align="center"
            data-aos="fade-up"
        />

        <div class="partners-container mt-12">
          <div
              v-for="(row, rowIndex) in partnerRows"
              :key="rowIndex"
              class="marquee-row-wrapper mb-8"
              @mouseenter="pauseRow(rowIndex)"
              @mouseleave="resumeRow(rowIndex)"
          >
            <div
                :class="[
            'marquee-row',
            rowIndex % 2 === 0 ? 'scroll-left' : 'scroll-right',
            rowIndex % 3 === 0 ? 'scroll-slow' : rowIndex % 3 === 1 ? 'scroll-medium' : 'scroll-fast'
          ]"
                :data-row="rowIndex"
            >
              <div
                  v-for="(partner, partnerIndex) in row"
                  :key="partnerIndex"
                  class="partner-item"
              >
                <div class="partner-logo-container">
                  <img :src="partner.logo" alt="" />
                  <div class="partner-name">{{ partner.name }}</div>
                </div>
              </div>

              <div
                  v-for="(partner, partnerIndex) in row"
                  :key="partnerIndex + 'copy'"
                  class="partner-item"
              >
                <div class="partner-logo-container">
                  <img :src="partner.logo" alt="" />
                  <div class="partner-name">{{ partner.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center" data-aos="zoom-in">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">开启数字化转型之旅</h2>
          <p class="text-xl text-blue-200 mb-8">
            联系我们获取免费咨询服务，量身定制您的解决方案
          </p>
          <div class="flex flex-col sm:flex-row justify-center gap-4">
            <button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300 flex items-center justify-center">
              立即咨询
              <i class="fas fa-comment ml-3"></i>
            </button>
            <button class="px-8 py-3.5 bg-transparent border-2 border-white/30 hover:border-white rounded-lg font-medium flex items-center justify-center">
              预约演示
              <i class="fas fa-calendar ml-3"></i>
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
import Card from '@/components/ui/Card.vue'
import {computed, onMounted, ref} from "vue";

const values = [
  {
    title: '创新驱动',
    icon: 'fas fa-lightbulb',
    description: '不断探索新技术、新思路，为客户提供前沿解决方案'
  },
  {
    title: '客户至上',
    icon: 'fas fa-handshake',
    description: '深度理解客户需求，提供定制化服务与全流程支持'
  },
  {
    title: '专业可靠',
    icon: 'fas fa-medal',
    description: '高素质专业团队，严谨的工作态度，确保项目高质量交付'
  }
]

const stats = [
  { value: '12+', label: '行业经验' },
  { value: '200+', label: '合作企业' },
  { value: '50+', label: '专业团队' },
  { value: '98%', label: '客户满意度' }
]

const advantages = [
  {
    title: '行业专业知识',
    icon: 'fas fa-book',
    description: '深耕行业多年的专家团队，掌握行业发展趋势'
  },
  {
    title: '技术创新',
    icon: 'fas fa-cogs',
    description: '持续投资技术研发，引领行业技术创新'
  },
  {
    title: '定制解决方案',
    icon: 'fas fa-clipboard-list',
    description: '根据企业需求量身定制解决方案'
  },
]

const testimonials = [
  {
    content: '上海酉佰佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
    name: '张先生',
    position: '某公司总经理',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
  },
  {
    content: '与酉佰佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
    name: '李女士',
    position: '某制造企业CIO',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
  },
  {
    content: '专业、高效、值得信赖的技术合作伙伴，他们的团队总能提出创新的解决方案帮助解决业务痛点。',
    name: '王总监',
    position: '某零售企业技术总监',
    avatar: 'https://randomuser.me/api/portraits/men/67.jpg'
  }
]

// 生成合作伙伴数据（实际项目应使用真实数据）
const partners = ref([
  { name: '腾讯科技', logo: 'https://logo.clearbit.com/tencent.com' },
  { name: '阿里巴巴', logo: 'https://logo.clearbit.com/alibaba.com' },
  { name: '华为技术', logo: 'https://logo.clearbit.com/huawei.com' },
  { name: '字节跳动', logo: 'https://logo.clearbit.com/bytedance.com' },
  { name: '京东集团', logo: 'https://logo.clearbit.com/jd.com' },
  { name: '百度科技', logo: 'https://logo.clearbit.com/baidu.com' },
  { name: '美团点评', logo: 'https://logo.clearbit.com/meituan.com' },
  { name: '拼多多', logo: 'https://logo.clearbit.com/pinduoduo.com' },
  { name: '小米科技', logo: 'https://logo.clearbit.com/mi.com' },
  { name: '网易科技', logo: 'https://logo.clearbit.com/netease.com' },
  { name: '携程旅行', logo: 'https://logo.clearbit.com/ctrip.com' },
  { name: '中国平安', logo: 'https://logo.clearbit.com/pingan.com' },
  { name: '招商银行', logo: 'https://logo.clearbit.com/cmbchina.com' },
  { name: '中国移动', logo: 'https://logo.clearbit.com/chinamobileltd.com' },
  { name: '中国电信', logo: 'https://logo.clearbit.com/chinatelecom-h.com' },
  { name: '格力电器', logo: 'https://logo.clearbit.com/gree.com' },
  { name: '海尔智家', logo: 'https://logo.clearbit.com/haier.net' },
  { name: '联想集团', logo: 'https://logo.clearbit.com/lenovo.com' },
  { name: '比亚迪汽车', logo: 'https://logo.clearbit.com/byd.com' },
  { name: '上汽集团', logo: 'https://logo.clearbit.com/saicmotor.com' },
  { name: '万科集团', logo: 'https://logo.clearbit.com/vanke.com' },
  { name: '碧桂园', logo: 'https://logo.clearbit.com/countrygarden.com.cn' },
  { name: '中国建筑', logo: 'https://logo.clearbit.com/chinaconstruction.com' },
  { name: '中信集团', logo: 'https://logo.clearbit.com/citic.com' },
  { name: '中国石油', logo: 'https://logo.clearbit.com/petrochina.com.cn' },
  { name: '中国石化', logo: 'https://logo.clearbit.com/sinopec.com' },
  { name: '国家电网', logo: 'https://logo.clearbit.com/sgcc.com.cn' },
  { name: '中国工商银行', logo: 'https://logo.clearbit.com/icbc.com.cn' },
  { name: '建设银行', logo: 'https://logo.clearbit.com/ccb.com' },
  { name: '农业银行', logo: 'https://logo.clearbit.com/abchina.com' }
])

// 将合作伙伴按每行10个分组
const partnerRows = computed(() => {
  const rows = []
  const itemsPerRow = 10
  for (let i = 0; i < partners.value.length; i += itemsPerRow) {
    rows.push(partners.value.slice(i, i + itemsPerRow))
  }
  return rows
})

// 暂停指定行滚动
const pauseRow = (rowIndex) => {
  const rowElements = document.querySelectorAll(`.marquee-row[data-row="${rowIndex}"]`)
  rowElements.forEach(el => {
    el.style.animationPlayState = 'paused'
  })
}

// 恢复指定行滚动
const resumeRow = (rowIndex) => {
  const rowElements = document.querySelectorAll(`.marquee-row[data-row="${rowIndex}"]`)
  rowElements.forEach(el => {
    el.style.animationPlayState = 'running'
  })
}

// 初始化滚动效果
onMounted(() => {
  const style = document.createElement('style')
  style.textContent = `
    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes scroll-right {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .scroll-slow {
      animation: scroll-left 40s linear infinite;
    }

    .scroll-medium {
      animation: scroll-left 30s linear infinite;
    }

    .scroll-fast {
      animation: scroll-left 20s linear infinite;
    }

    .marquee-row:hover {
      animation-play-state: paused;
    }
  `
  document.head.appendChild(style)
})
</script>

<style scoped>
/* 合作伙伴容器 */
.partners-container {
  max-width: 1800px;
  margin: 0 auto;
}

/* 行容器 */
.marquee-row-wrapper {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.05);
  transition: all 0.3s ease;
}

.marquee-row-wrapper:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 15px rgba(79, 70, 229, 0.1);
}

/* 行内容 */
.marquee-row {
  display: flex;
  width: max-content;
}

/* 合作伙伴项目 */
.partner-item {
  flex-shrink: 0;
  padding: 0 20px;
}

/* 合作伙伴logo容器 */
.partner-logo-container {
  position: relative;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 10px;
  background: white;
}

/*.partner-logo-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}*/

/* 合作伙伴logo */
.partner-logo {
  max-height: 50px;
  max-width: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: grayscale(0);
}

/* 鼠标悬停时logo变黑 */
/*.partner-logo-container:hover .partner-logo {
  filter: grayscale(100%) brightness(0.3);
}*/

/* 合作伙伴名称 */
.partner-name {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #4f46e5;
  background: white;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬停时显示名称 */
/*.partner-logo-container:hover .partner-name {
  opacity: 1;
  transform: translateY(0);
}*/

/* 滚动动画 */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.scroll-slow {
  animation: scroll-left 40s linear infinite;
}

.scroll-medium {
  animation: scroll-left 30s linear infinite;
}

.scroll-fast {
  animation: scroll-left 20s linear infinite;
}

.scroll-left {
  animation: scroll-left 40s linear infinite;
}

.scroll-right {
  animation: scroll-right 40s linear infinite;
}

.marquee-row:hover {
  animation-play-state: paused;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .partner-item {
    padding: 0 15px;
  }

  .partner-logo-container {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .marquee-row-wrapper {
    margin-bottom: 12px;
  }

  .partner-item {
    padding: 0 10px;
  }

  .partner-logo-container {
    width: 100px;
    height: 70px;
  }

  .partner-logo {
    max-height: 40px;
  }
}
</style>
