<template>
  <div>
    <!-- 页面标题 - 使用公司文化背景图 -->
    <div
        class="relative pt-32 pb-20 bg-gradient-to-r from-blue-800 to-indigo-900"
        data-aos="fade-down"
        data-aos-duration="800"
    >
      <!-- 背景图片 -->
      <div class="absolute inset-0 z-0">
        <img
            src="../assets/images/features-home.png"
            alt="公司文化背景图"
            class="w-full h-full object-cover"
        />
      </div>

      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
          <h1
              class="text-4xl md:text-5xl font-bold text-white mb-4"
              data-aos="fade-up"
              data-aos-delay="200"
          >
            公司文化
          </h1>
          <p
              class="text-xl text-blue-100 max-w-2xl mx-auto"
              data-aos="fade-up"
              data-aos-delay="300"
          >
            以学习驱动成长，以渐进实现卓越
          </p>
        </div>
      </div>
    </div>

    <!-- 学习文化部分 -->
    <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-2 gap-12 mt-16">
          <div class="flex flex-col justify-center">
            <div class="space-y-6">
              <div
                  class="flex items-start"
                  data-aos="fade-right"
                  data-aos-delay="100"
              >
                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                  <i class="fas fa-book-open text-xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 mb-2">日常学习机制</h3>
                  <p class="text-gray-600">
                    我们建立每日晨读、每周分享、每月专题研讨的学习体系，营造持续学习氛围，让知识更新成为团队习惯。
                  </p>
                </div>
              </div>

              <div
                  class="flex items-start"
                  data-aos="fade-right"
                  data-aos-delay="200"
              >
                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                  <i class="fas fa-user-graduate text-xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 mb-2">深度入职培训</h3>
                  <p class="text-gray-600">
                    新员工将接受为期2个月的系统培训，涵盖行业研究方法、宏观分析框架、企业评估模型等专业内容，建立扎实的知识基础。
                  </p>
                </div>
              </div>

              <div
                  class="flex items-start"
                  data-aos="fade-right"
                  data-aos-delay="300"
              >
                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                  <i class="fas fa-lightbulb text-xl"></i>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 mb-2">知识共享平台</h3>
                  <p class="text-gray-600">
                    建立内部知识库，汇集行业研究报告、项目复盘总结、方法论工具包等资源，实现知识资产的有效沉淀与共享。
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div
              class="relative rounded-xl overflow-hidden shadow-lg"
              data-aos="fade-left"
              data-aos-delay="400"
          >
            <div class="h-full bg-gradient-to-br from-blue-50 to-indigo-50 p-8 flex items-center">
              <div class="text-center w-full">
                <div class="mb-8 flex justify-center">
                  <div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                    <i class="fas fa-brain text-3xl"></i>
                  </div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-4">学习型组织</h3>
                <p class="text-gray-600 max-w-md mx-auto">
                  我们相信持续学习是保持竞争力的核心，通过系统化的知识管理和培训体系，打造深度思考能力，为长期发展蓄能。
                </p>
                <div class="mt-8">
                  <div class="inline-flex items-center px-4 py-2 bg-white border border-blue-200 text-blue-600 rounded-full text-sm font-medium">
                    <i class="fas fa-book mr-2"></i>
                    查看学习资源
                  </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="bg-white rounded-2xl shadow-xl overflow-hidden mt-16"
            data-aos="fade-up"
            data-aos-delay="200"
        >
          <div class="grid md:grid-cols-2">
            <!-- 左侧：理念详情 -->
            <div class="p-8 md:p-12 bg-gradient-to-br from-blue-50 to-indigo-50">
              <div class="flex items-center mb-8">
                <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                  <i class="fas fa-hands-helping text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">大道不孤，众行致远</h2>
              </div>

              <p class="text-gray-600 text-lg mb-8">
                在酉佰，我们坚信真正的成功来自团队协作与共同成长。个人的力量有限，但团队的力量无穷。
              </p>

              <div class="space-y-6">
                <div
                    class="flex items-start"
                    data-aos="fade-right"
                    data-aos-delay="300"
                >
                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                    <i class="fas fa-users"></i>
                  </div>
                  <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">协作共赢</h3>
                    <p class="text-gray-600">
                      打破部门壁垒，建立跨职能协作机制，共享知识与资源，实现1+1>2的协同效应。
                    </p>
                  </div>
                </div>

                <div
                    class="flex items-start"
                    data-aos="fade-right"
                    data-aos-delay="400"
                >
                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                    <i class="fas fa-hands"></i>
                  </div>
                  <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">互助成长</h3>
                    <p class="text-gray-600">
                      建立导师制度与伙伴计划，经验丰富的成员带领新人成长，形成互帮互助的学习网络。
                    </p>
                  </div>
                </div>

                <div
                    class="flex items-start"
                    data-aos="fade-right"
                    data-aos-delay="500"
                >
                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
                    <i class="fas fa-road"></i>
                  </div>
                  <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">长远发展</h3>
                    <p class="text-gray-600">
                      着眼长期价值而非短期利益，与客户、伙伴建立持久合作关系，共同创造可持续的未来。
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧：视觉展示 -->
            <div class="p-8 md:p-12 bg-gradient-to-br from-indigo-600 to-blue-800 flex items-center justify-center">
              <div class="text-center max-w-md">
                <div class="mb-8">
                  <i class="fas fa-people-carry text-5xl text-white opacity-90"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">团队协作的力量</h3>
                <p class="text-blue-100 mb-8">
                  共同的目标、共享的价值观、协作的智慧，让我们在复杂多变的环境中稳步前行。
                </p>

                <div class="relative h-40 mx-auto">
                  <svg viewBox="0 0 500 200" class="w-full h-40">
                    <!-- 团队协作路径 -->
                    <path
                        d="M50,150 C150,50 200,100 250,50 C300,100 350,50 450,150"
                        stroke="#c7d2fe"
                        stroke-width="4"
                        fill="none"
                        stroke-dasharray="1000"
                        class="path-animation"
                    />

                    <!-- 团队成员 -->
                    <g transform="translate(50,150)">
                      <circle cx="0" cy="0" r="8" fill="#818cf8" />
                      <text x="12" y="5" fill="#c7d2fe" font-size="12">技术</text>
                    </g>

                    <g transform="translate(150,50)">
                      <circle cx="0" cy="0" r="8" fill="#60a5fa" />
                      <text x="12" y="5" fill="#c7d2fe" font-size="12">研究</text>
                    </g>

                    <g transform="translate(250,50)">
                      <circle cx="0" cy="0" r="8" fill="#38bdf8" />
                      <text x="12" y="5" fill="#c7d2fe" font-size="12">咨询</text>
                    </g>

                    <g transform="translate(350,50)">
                      <circle cx="0" cy="0" r="8" fill="#22d3ee" />
                      <text x="12" y="5" fill="#c7d2fe" font-size="12">客户</text>
                    </g>

                    <g transform="translate(450,150)">
                      <circle cx="0" cy="0" r="8" fill="#2dd4bf" />
                      <text x="12" y="5" fill="#c7d2fe" font-size="12">成功</text>
                    </g>
                  </svg>
                </div>

                <p class="text-blue-100 text-sm mt-6">
                  技术、研究、咨询与客户共同协作，共创成功之路
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 循序渐进部分 -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-amber-50 to-amber-100">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="循序渐进"
            subtitle="顺其自然，脚踏实地"
            description="不盲目追求无用的结果，一步一步向前迈进"
            align="center"
            data-aos="fade-up"
        />

        <div
            class="max-w-4xl mx-auto mt-16"
            data-aos="fade-up"
            data-aos-delay="200"
        >
          <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="grid md:grid-cols-5">
              <div class="md:col-span-3 p-8 md:p-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">我们的渐进式发展理念</h2>

                <div class="space-y-6">
                  <div
                      class="flex"
                      data-aos="fade-right"
                      data-aos-delay="300"
                  >
                    <div class="flex-shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
                        <i class="fas fa-seedling"></i>
                      </div>
                    </div>
                    <div class="ml-4">
                      <h3 class="text-lg font-medium text-gray-900">自然生长阶段</h3>
                      <p class="text-gray-600 mt-1">
                        在公司前期探索阶段，我们遵循业务自然发展规律，不揠苗助长，
                        在探索中找准定位和发展方向。
                      </p>
                    </div>
                  </div>

                  <div
                      class="flex"
                      data-aos="fade-right"
                      data-aos-delay="400"
                  >
                    <div class="flex-shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
                        <i class="fas fa-stairs"></i>
                      </div>
                    </div>
                    <div class="ml-4">
                      <h3 class="text-lg font-medium text-gray-900">稳步前进阶段</h3>
                      <p class="text-gray-600 mt-1">
                        在明确方向后，我们有规律、有效率、有目标地前进，制定切实可行的阶段目标，
                        一步一个脚印地实现突破。
                      </p>
                    </div>
                  </div>

                  <div
                      class="flex"
                      data-aos="fade-right"
                      data-aos-delay="500"
                  >
                    <div class="flex-shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
                        <i class="fas fa-mountain"></i>
                      </div>
                    </div>
                    <div class="ml-4">
                      <h3 class="text-lg font-medium text-gray-900">长期价值导向</h3>
                      <p class="text-gray-600 mt-1">
                        不追求短期利益最大化，专注于创造可持续的长期价值，
                        通过持续积累实现从量变到质变的飞跃。
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div
                  class="md:col-span-2 bg-gradient-to-b from-amber-400 to-amber-600 p-8 flex items-center"
                  data-aos="fade-left"
                  data-aos-delay="600"
              >
                <div class="text-center w-full">
                  <div class="mb-6">
                    <i class="fas fa-chart-line text-4xl text-white opacity-80"></i>
                  </div>
                  <h3 class="text-xl font-bold text-white mb-2">渐进式发展曲线</h3>
                  <p class="text-amber-100 mb-6">持续积累，阶梯式成长</p>

                  <div class="relative h-32">
                    <div class="absolute bottom-0 left-0 right-0">
                      <!-- 渐进式增长曲线示意 -->
                      <svg viewBox="0 0 200 100" class="w-full h-32">
                        <path
                            d="M0,80 C40,60 80,40 120,30 C160,20 200,10 200,10"
                            stroke="white"
                            stroke-width="3"
                            fill="none"
                            class="path-animation"
                        />
                        <circle cx="0" cy="80" r="4" fill="white" />
                        <circle cx="40" cy="60" r="4" fill="white" />
                        <circle cx="80" cy="40" r="4" fill="white" />
                        <circle cx="120" cy="30" r="4" fill="white" />
                        <circle cx="160" cy="20" r="4" fill="white" />
                        <circle cx="200" cy="10" r="4" fill="white" />
                      </svg>
                    </div>
                  </div>

                  <p class="text-amber-100 text-sm mt-4">
                    每个阶段都是下一阶段的坚实基础
                  </p>
                </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-2 lg:grid-cols-3 gap-8 mt-16"
            data-aos="fade-up"
            data-aos-delay="200"
        >
          <div
              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
              data-aos="zoom-in"
              data-aos-delay="300"
          >
            <div class="p-6">
              <div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 mb-4">
                <i class="fas fa-users"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-3">新人培养计划</h3>
              <p class="text-gray-600 mb-4">
                为期3个月的阶梯式培训体系，从方法论到实践，逐步培养行业研究能力
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <i class="far fa-clock mr-2"></i>
                平均培养周期：90天
              </div>
            </div>
          </div>

          <div
              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
              data-aos="zoom-in"
              data-aos-delay="400"
          >
            <div class="p-6">
              <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600 mb-4">
                <i class="fas fa-tasks"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-3">项目推进方法</h3>
              <p class="text-gray-600 mb-4">
                采用阶段性目标分解，通过小步快跑的方式确保项目高质量交付
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fas fa-chart-line mr-2"></i>
                项目成功率提升40%
              </div>
            </div>
          </div>

          <div
              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
              data-aos="zoom-in"
              data-aos-delay="500"
          >
            <div class="p-6">
              <div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-green-600 mb-4">
                <i class="fas fa-book-reader"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-3">知识迭代机制</h3>
              <p class="text-gray-600 mb-4">
                每季度更新行业研究方法论，通过持续学习保持专业领先优势
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fas fa-book mr-2"></i>
                已积累120+份研究文档
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入我们 -->
    <section
        class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900"
        data-aos="fade-up"
    >
      <div class="container mx-auto px-4">
        <div
            class="max-w-3xl mx-auto text-center"
            data-aos="fade-up"
            data-aos-delay="200"
        >
          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰佰，共同成长</h2>
          <p class="text-xl text-blue-200 mb-10">
            我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值
          </p>

          <div class="flex flex-col sm:flex-row justify-center gap-4">
            <router-link
                to="/careers"
                class="px-8 py-4 bg-white text-blue-700 font-medium rounded-lg hover:bg-blue-50 transition-colors"
                data-aos="zoom-in"
                data-aos-delay="300"
            >
              查看职位空缺
              <i class="fas fa-arrow-right ml-2"></i>
            </router-link>

            <router-link
                to="/culture"
                class="px-8 py-4 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white/10 transition-colors"
                data-aos="zoom-in"
                data-aos-delay="400"
            >
              了解更多文化
            </router-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

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

// 这里可以添加组件需要的响应式数据或方法
</script>

<style scoped>
.path-animation {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/* 背景图片的透明度调整 */
.absolute img {
  opacity: 0.65;
}
</style>