<template>
  <div>
    <!-- 页面标题 -->
    <div class="pt-32 pb-20 bg-gradient-to-r from-blue-900 to-indigo-900">
      <div class="container mx-auto px-4">
        <div class="text-center" data-aos="fade-up">
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">团队介绍</h1>
          <p class="text-xl text-blue-300 max-w-2xl mx-auto">
            专业、多元、充满活力的高素质团队
          </p>
        </div>
      </div>
    </div>

    <!-- 团队展示 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">我们的团队</h2>
          <div class="w-24 h-1 bg-amber-500 mx-auto mt-4"></div>
        </div>
        <!-- 团队展示 - 修复后 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8" data-aos="fade-up">
          <!-- 团队 1 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="100">

            <div class="absolute inset-0 bg-gradient-to-t from-blue-900 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">技术团队</h3>
              <p class="text-blue-200">专业卓越</p>
            </div>
          </div>

          <!-- 团队 2 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="200">

            <div class="absolute inset-0 bg-gradient-to-t from-indigo-900 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">协作交流</h3>
              <p class="text-indigo-200">开放透明</p>
            </div>
          </div>

          <!-- 团队 3 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="300">

            <div class="absolute inset-0 bg-gradient-to-t from-amber-800 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">发展规划</h3>
              <p class="text-amber-200">未来愿景</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术团队介绍 -->
    <section class="py-16 md:py-24 bg-white">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="技术团队"
            subtitle="专业卓越"
            description="技术团队的核心成员拥有深厚的行业背景和技术专长"
            align="center"
            data-aos="fade-up"
        />

        <div class="mt-16">
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12" data-aos="fade-up">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div class="md:w-1/3 mb-6 md:mb-0 order-1 lg:order-1 items-center justify-center" data-aos="fade-left">
                <img  src="@/assets/images/team0001.jpeg" alt="" class="w-full" />
              </div>
              <div class="md:w-2/3 md:pl-8 order-2 lg:order-2" data-aos="fade-right" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
                <p class="text-gray-600 mb-6">
                  萧康云医是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
                  我们遵循循序渐进，但绝不放任自流的管理理念。
                </p>
                <p class="text-gray-600 mb-6">
                  团队目前有10名成员左右，由一批具有金融、数理、工科等背景的海归硕士及国内顶尖院校硕士组成。
                  公司团队工作开放透明，和谐融洽，注重深入研究、互相学习和分享交流。
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                      v-for="(skill, idx) in ['金融', '数理', '工科', '海归硕士', '顶尖院校']"
                      :key="idx"
                      class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm"
                  >
                    {{ skill }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展规划 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="发展规划"
            subtitle="未来愿景"
            description="萧康云医团队的战略发展规划"
            align="center"
            data-aos="fade-up"
        />

        <div class="mt-16 ">
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6" data-aos="fade-up">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div class="md:w-1/3 mb-6 md:mb-0 order-1 lg:order-2 items-center justify-center" data-aos="fade-right">
                <img  src="@/assets/images/team0003.jpeg" alt="" class="w-full" />
              </div>
              <div class="md:w-2/3 md:pl-8 order-2 lg:order-1" data-aos="fade-left" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">五年发展规划</h3>
                <p class="text-gray-600 mb-6">
                  萧康云医团队刚经历了第一个阶段的发展，展望未来，公司一方面致力于在医疗数字化场景中进行人才积累，
                  另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。
                </p>
                <p class="text-gray-600 mb-6">
                  希望在2028年，公司第二个五年结束之际，能组建一支研究功底深厚、技能全面、初具实战能力的队伍。
                </p>

                <div class="mt-6" data-aos="fade-up" data-aos-delay="300">
                  <h4 class="font-bold text-lg text-gray-800 mb-3">发展里程碑</h4>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">1</span>
                      </div>
                      <p class="text-gray-700">人才积累阶段 (2023-2025年)</p>
                    </div>
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">2</span>
                      </div>
                      <p class="text-gray-700">核心竞争力孵化 (2025-2027年)</p>
                    </div>
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">3</span>
                      </div>
                      <p class="text-gray-700">实战能力形成 (2028年达成目标)</p>
                    </div>
                  </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="mt-16 grid md:grid-cols-3 gap-8">
          <div
              v-for="(field, index) in researchFields"
              :key="index"
              class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 hover:shadow-xl transition-shadow"
              :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
              :data-aos-delay="100 * (index + 1)"
          >
            <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
              <i :class="field.icon" class="text-2xl text-blue-600"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ field.title }}</h3>
            <p class="text-gray-600">{{ field.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队文化 -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-800">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="lg:w-1/2" data-aos="fade-right">
            <img src="@/assets/images/company0002.jpeg">
          </div>

          <div class="lg:w-1/2 text-white" data-aos="fade-left" data-aos-delay="200">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的文化</h2>
            <p class="text-lg mb-8 text-blue-200">
              开放、透明、纪律严明、主观能动
            </p>

            <div class="space-y-6">
              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-handshake text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">开放透明</h3>
                  <p class="text-blue-100">团队成员间信息共享、思想碰撞，营造互相学习、共同成长的氛围</p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-tasks text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">纪律严明</h3>
                  <p class="text-blue-100">遵循循序渐进的管理理念，确保团队高效运转</p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-lightbulb text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">主观能动</h3>
                  <p class="text-blue-100">鼓励创新思维和主动担当，激发团队成员潜力</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入团队 -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-900 to-indigo-900 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">加入我们的团队</h2>
          <p class="text-xl text-blue-300 mb-8">
            如果你才华横溢、充满激情、渴望成长，我们欢迎你加入萧康云医大家庭
          </p>
          <router-link
              to="/careers"
              class="inline-flex items-center px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300"
              data-aos="zoom-in"
              data-aos-delay="200"
          >
            查看职位空缺
            <i class="fas fa-arrow-right ml-3"></i>
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
import { ref } from 'vue'

const researchFields = ref([
  {
    icon: 'fas fa-coins',
    title: '现货市场',
    description: '覆盖货币、债券、证券、商品等核心领域，深入研究市场动态'
  },
  {
    icon: 'fas fa-chart-bar',
    title: '衍生品市场',
    description: '逐步拓展期货、期权等衍生品市场研究，完善投资体系'
  },
  {
    icon: 'fas fa-globe-americas',
    title: '全球市场',
    description: '最终覆盖全球市场，打造国际化研究能力与投资视野'
  }
])

</script>

<style scoped>
/* 响应式调整 */
@media (max-width: 768px) {
  .flex-col.md\:flex-row {
    flex-direction: column;
  }

  .md\:w-1\/3, .md\:w-2\/3 {
    width: 100%;
  }

  .md\:pl-8 {
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

/* 图片悬停效果 */
.group:hover img {
  transform: scale(1.05);
}

/* 过渡动画 */
img {
  transition: transform 0.5s ease;
}
</style>
