<template>
  <div>
    <!-- 页面标题 -->
    <div class="about-index pt-32 pb-20 bg-gradient-to-r from-indigo-900 to-blue-900"
         data-aos="fade-down"
         data-aos-duration="800">
      <div class="container mx-auto px-4">
        <div class="text-center" data-aos="fade-up" data-aos-duration="800">
          <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="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
            <SectionTitle
                subtitle="关于我们"
                title="我们是萧康云医"
            />

            <div class="prose max-w-none text-gray-600 mt-6">
              <p>
                萧康云医专注诊所赋能与医疗服务数字化，总部位于上海，
                是一家专注于提供企业级数字化解决方案的高新技术企业。
              </p>
              <p>
                公司自成立以来，始终秉承"创新驱动、客户至上"的理念，
                致力于为企业客户提供从战略咨询到技术实施的一站式服务。
              </p>
              <p>
                我们的团队由行业资深专家和技术精英组成，拥有丰富的行业经验和专业知识，
                已经帮助超过200家企业完成数字化转型，业务覆盖制造、零售、金融、医疗等多个行业。
              </p>
            </div>

            <div class="grid grid-cols-2 gap-6 mt-8">
              <div class="bg-blue-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="200">
                <h3 class="text-xl font-bold text-gray-900 mb-2">我们的理念</h3>
                <p class="text-gray-600">
                  大道不孤、众行致远
                </p>
              </div>
              <div class="bg-amber-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="300">
                <h3 class="text-xl font-bold text-gray-900 mb-2">我们的愿景</h3>
                <p class="text-gray-600">
                  实现研究成果与投资回报的双丰收，成为行业领军机构
                </p>
              </div>
            </div>
          </div>

          <div class="relative order-1 lg:order-2" data-aos="fade-left" data-aos-duration="800">
            <Component />
            <div class="z-50 absolute -bottom-6 -right-6 w-48 h-48 bg-amber-500/20 rounded-full"></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="我们的起源"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
          <div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
            <div class="prose max-w-none text-gray-600">
              <p>
                我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
              </p>
              <p>
                当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
              </p>
              <p>
                秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
              </p>
            </div>
          </div>
          <div class="order-1 lg:order-2 relative" data-aos="fade-left" data-aos-duration="800">
            <div class="rounded-2xl overflow-hidden shadow-xl">
              <LargeCycleChart />
<!--              <img src="../assets/images/company0006.png" alt="公司成立背景" class="w-full h-auto">-->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 公司目标 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="公司目标"
            subtitle="我们的方向"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
          <div class="order-2 lg:order-2" data-aos="fade-left" data-aos-duration="800">
            <div class="prose max-w-none text-gray-600">
              <p>
                我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
              </p>
              <p>
                当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
              </p>
              <p>
                秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
              </p>
            </div>
          </div>
          <div class="order-1 lg:order-1 relative" data-aos="fade-right" data-aos-duration="800">
            <div class="rounded-2xl overflow-hidden shadow-xl">
              <MediumCycleChart />
<!--              <img src="../assets/images/zq0001.png" alt="公司成立背景" class="w-full h-auto">-->
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
          <div
              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
              data-aos="fade-up" data-aos-delay="100">
            <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-6">
              <i class="fas fa-rocket text-blue-600 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">技术创新</h3>
            <p class="text-gray-600">
              持续投入研发，保持技术领先地位，每年推出至少3项创新解决方案，引领行业发展方向。
            </p>
          </div>

          <div
              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
              data-aos="fade-up" data-aos-delay="200">
            <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center mb-6">
              <i class="fas fa-users text-amber-600 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">客户服务</h3>
            <p class="text-gray-600">
              建立完善的客户服务体系，客户满意度保持在95%以上，成为客户首选的数字化转型合作伙伴。
            </p>
          </div>

          <div
              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
              data-aos="fade-up" data-aos-delay="300">
            <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
              <i class="fas fa-globe text-indigo-600 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">市场拓展</h3>
            <p class="text-gray-600">
              三年内将业务覆盖全国主要城市，并逐步拓展国际市场，成为具有全球影响力的数字化服务提供商。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="发展历程"
            subtitle="一路成长"
            align="center"
            description="回顾萧康云医发展中的重要里程碑"
            data-aos="fade-up"
        />

        <div class="relative mt-16">
          <!-- 时间线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200 hidden lg:block"></div>

          <div class="space-y-8 lg:space-y-12 max-w-4xl mx-auto">
            <div
                v-for="(milestone, index) in milestones"
                :key="index"
                :class="['flex flex-col lg:flex-row items-center', index % 2 === 0 ? 'lg:flex-row-reverse' : '']"
                :data-aos="index % 2 === 0 ? 'fade-left' : 'fade-right'"
                :data-aos-delay="index * 100"
            >
              <div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pr-12' : 'lg:pl-12']">
                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                  <div class="text-sm font-medium text-amber-600">{{ milestone.date }}</div>
                  <h3 class="text-xl font-bold mt-2 text-gray-900">{{ milestone.title }}</h3>
                  <p class="mt-3 text-gray-600">{{ milestone.description }}</p>
                </div>
              </div>

              <div class="hidden lg:flex w-2/12 justify-center">
                <div
                    class="w-16 h-16 rounded-full bg-white border-4 border-amber-500 flex items-center justify-center relative z-10">
                  <i :class="milestone.icon" class="text-amber-600 text-xl"></i>
                </div>
              </div>

              <div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pl-12' : 'lg:pr-12']">
                <!-- 替换为实际图片 -->
                <img v-if="milestone.image" :src="`@/assets/images/milestone_${index + 1}.jpg`" alt="里程碑图片"
                     class="rounded-xl overflow-hidden aspect-video object-cover">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 公司文化 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
          <SectionTitle
              title="公司文化"
              subtitle="我们的核心价值观"
              align="center"
              data-aos="fade-up"
          />

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">

            <div v-for="(value, index) in culturalValues" :key="index"
                 class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
                 data-aos="fade-up" :data-aos-delay="index * 100">
              <div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="value.iconBgClass">
                <i :class="value.icon" class="text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-900 mb-3">{{ value.title }}</h3>
              <p class="text-gray-600">
                {{ value.description }}
              </p>
            </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="我们的服务"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
          <!-- 替换ServiceCard为自定义组件 -->
          <div v-for="(service, index) in services" :key="service.id"
               class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
               data-aos="fade-up" :data-aos-delay="index * 100">
            <div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="service.iconBg">
              <i :class="service.icon" class="text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">{{ service.title }}</h3>
            <p class="text-gray-600">
              {{ service.description }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="核心团队"
            subtitle="专业的团队是我们的基石"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
          <TeamMemberCard
              v-for="(member, index) in teamMembers"
              :key="member.id"
              :member="member"
              :name="member.name"
              :position="member.position"
              :avatar="member.avatar"
              :description="member.description"
              :social-links="member.socialLinks"
              data-aos="fade-up" :data-aos-delay="index * 100"
          />
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-16 md:py-24" id="contact-form">
      <div class="container mx-auto px-4">
        <div class="bg-gradient-to-r from-indigo-900 to-blue-900 rounded-2xl overflow-hidden" data-aos="fade-up">
          <div class="grid grid-cols-1 lg:grid-cols-2">

            <div class="call-me order-2 lg:order-2 relative h-64 lg:h-auto">

              <img src="../assets/images/join0001.jpeg" alt="联系我们"
                   class="absolute inset-0 w-full h-full object-cover">
              <div class="absolute inset-0 bg-blue-900/50"></div>
              <div class="absolute inset-0 flex flex-col justify-center p-8 md:px-12 md:py-16 lg:py-20 text-white">
                <div class="mb-8" data-aos="fade-up" data-aos-delay="100">
                  <h3 class="text-xl font-bold mb-4">公司地址</h3>
                  <p class="text-blue-200">上海市浦东新区张江高科技园区博云路2号浦软大厦</p>
                </div>

                <div class="mb-8" data-aos="fade-up" data-aos-delay="150">
                  <h3 class="text-xl font-bold mb-4">联系方式</h3>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <i class="fas fa-phone mr-3 text-blue-300"></i>
                      <span>400-888-9999</span>
                    </div>
                    <div class="flex items-center">
                      <i class="fas fa-envelope mr-3 text-blue-300"></i>
                      <span>info@shyoubai.com</span>
                    </div>
                  </div>
                </div>

                <div data-aos="fade-up" data-aos-delay="200">
                  <h3 class="text-xl font-bold mb-4">工作时间</h3>
                  <p class="text-blue-200">周一至周五: 9:00 - 18:00</p>
                </div>
              </div>
            </div>

            <div class="order-2 lg:order-1 p-8 md:px-12 md:py-16 lg:py-20">
              <h2 class="text-3xl font-bold text-white mb-6" data-aos="fade-up" data-aos-delay="100">联系我们</h2>
              <p class="text-blue-200 mb-8" data-aos="fade-up" data-aos-delay="150">
                无论您有任何问题或需求，我们都期待与您取得联系。
                填写下方表单，我们将尽快回复您。
              </p>

              <ContactForm />
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
import Card from '@/components/ui/Card.vue'
import Component from '@/components/ui/Company.vue'
import TeamMemberCard from '@/components/ui/TeamMember.vue'
import ContactForm from "@/components/ui/ContactForm.vue";
import MediumCycleChart from "@/components/ui/MediumCycleChart.vue";
import LargeCycleChart from "@/components/ui/LargeCycleChart.vue";

const milestones = [
  {
    date: '2018年3月',
    title: '公司创立',
    description: '在上海南翔经济开发区正式注册成立，实缴资本5000万元人民币',
    icon: 'fas fa-building'
  },
  {
    date: '2019年',
    title: '战略布局',
    description: '完成初期团队组建，确立世界政治经济与产业链研究为核心方向',
    icon: 'fas fa-chess'
  },
  {
    date: '2020-2022年',
    title: '深耕研究',
    description: '建立完整的研究体系，在全球宏观经济和产业升级领域形成专业洞见',
    icon: 'fas fa-search-dollar'
  },
  {
    date: '2023年',
    title: '投资布局',
    description: '基于研究成果启动战略性投资，把握百年变局中的历史性机遇',
    icon: 'fas fa-chart-line'
  },
  {
    date: '2025年(预期)',
    title: '规模扩张',
    description: '研究团队突破百人规模，形成具有国际影响力的研究智库',
    icon: 'fas fa-expand'
  },
  {
    date: '2030年(愿景)',
    title: '战略收获期',
    description: '实现研究成果与投资回报的双丰收，成为行业领军机构',
    icon: 'fas fa-trophy'
  }
]

const culturalValues = [
  {
    title: '大道不孤',
    icon: 'fas fa-mountain',
    description: '秉持历史发展规律，把握文明兴替大周期，做时代趋势的同行者',
    iconBgClass: 'bg-blue-50 text-blue-600'
  },
  {
    title: '深研致远',
    icon: 'fas fa-microscope',
    description: '深耕世界政治经济研究，以专业洞见创造长期价值',
    iconBgClass: 'bg-emerald-50 text-emerald-600'
  },
  {
    title: '众行至远',
    icon: 'fas fa-people-group',
    description: '汇聚志同道合者，构建研究投资共同体，共享发展成果',
    iconBgClass: 'bg-purple-50 text-purple-600'
  },
  {
    title: '韧性成长',
    icon: 'fas fa-oak-leaf',
    description: '保持战略定力，在周期波动中实现稳健持续发展',
    iconBgClass: 'bg-amber-50 text-amber-600'
  },
  {
    title: '家国情怀',
    icon: 'fas fa-landmark',
    description: '将个人发展融入民族复兴，以专业能力服务国家战略',
    iconBgClass: 'bg-red-50 text-red-600'
  }
]

/*const services = [
  {
    id: 1,
    title: '数字化战略咨询',
    description: '基于企业现状和未来发展目标，制定全面的数字化转型战略规划',
    icon: 'fas fa-chart-line',
    iconBg: 'bg-blue-50 text-blue-600'
  },
  {
    id: 2,
    title: '企业应用开发',
    description: '定制化企业管理系统、移动应用和Web应用开发，提升工作效率',
    icon: 'fas fa-code',
    iconBg: 'bg-amber-50 text-amber-600'
  },
  {
    id: 3,
    title: '数据智能分析',
    description: '基于大数据和AI技术，提供数据分析、商业智能和预测模型服务',
    icon: 'fas fa-database',
    iconBg: 'bg-indigo-50 text-indigo-600'
  },
  {
    id: 4,
    title: '云计算服务',
    description: '提供云基础设施建设、迁移和管理服务，降低IT成本，提升灵活性',
    icon: 'fas fa-cloud',
    iconBg: 'bg-green-50 text-green-600'
  },
  {
    id: 5,
    title: '用户体验设计',
    description: '专注于产品界面设计、交互设计和用户体验优化，提升产品竞争力',
    icon: 'fas fa-paint-brush',
    iconBg: 'bg-purple-50 text-purple-600'
  },
  {
    id: 6,
    title: 'IT运维服务',
    description: '提供全方位的IT基础设施运维和管理服务，保障系统稳定运行',
    icon: 'fas fa-cogs',
    iconBg: 'bg-red-50 text-red-600'
  },
]*/
const services = [
  {
    id: 1,
    title: '行业信息咨询',
    description: '提供深度行业分析报告、竞争格局研究和市场进入策略咨询',
    icon: 'fas fa-chart-pie',
    iconBg: 'bg-blue-50 text-blue-600'
  },
  {
    id: 2,
    title: '市场调查与分析',
    description: '执行专业的定量与定性市场调研，提供消费者洞察和商业决策支持',
    icon: 'fas fa-search-dollar',
    iconBg: 'bg-amber-50 text-amber-600'
  },
  {
    id: 3,
    title: '社会经济咨询',
    description: '开展区域经济研究、政策影响评估和社会发展趋势分析',
    icon: 'fas fa-landmark',
    iconBg: 'bg-indigo-50 text-indigo-600'
  },
  {
    id: 4,
    title: '商业数据处理',
    description: '提供数据清洗、统计分析、可视化呈现等全流程数据服务',
    icon: 'fas fa-database',
    iconBg: 'bg-green-50 text-green-600'
  },
  {
    id: 5,
    title: '企业管理咨询',
    description: '涵盖战略规划、组织优化、运营提升等全方位管理解决方案',
    icon: 'fas fa-briefcase',
    iconBg: 'bg-purple-50 text-purple-600'
  },
  {
    id: 6,
    title: '商业策划服务',
    description: '提供项目可行性研究、商业计划书编制及投资决策支持',
    icon: 'fas fa-lightbulb',
    iconBg: 'bg-red-50 text-red-600'
  },
  {
    id: 7,
    title: '政策研究咨询',
    description: '开展政策解读、合规性分析和政策红利应用方案设计',
    icon: 'fas fa-file-contract',
    iconBg: 'bg-teal-50 text-teal-600'
  },
  {
    id: 8,
    title: '投资决策咨询',
    description: '提供投资项目评估、风险分析和收益预测专业服务',
    icon: 'fas fa-coins',
    iconBg: 'bg-orange-50 text-orange-600'
  }
]

const teamMembers = [
  {
    id: 1,
    name: '张明',
    position: '创始人兼CEO',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '拥有20年IT行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略',
    socialLinks: [
      {icon: 'fab fa-linkedin', url: '#'},
      {icon: 'fab fa-twitter', url: '#'}
    ]
  },
  {
    id: 2,
    name: '李婷',
    position: '技术总监',
    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '15年软件开发和团队管理经验，精通云计算、大数据和人工智能技术',
    socialLinks: [
      {icon: 'fab fa-github', url: '#'},
      {icon: 'fab fa-linkedin', url: '#'}
    ]
  },
  {
    id: 3,
    name: '王强',
    position: '销售总监',
    avatar: 'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '10年企业服务销售经验，擅长为客户提供量身定制的数字化解决方案',
    socialLinks: [
      {icon: 'fab fa-linkedin', url: '#'},
      {icon: 'fab fa-weixin', url: '#'}
    ]
  },
  {
    id: 4,
    name: '陈静',
    position: '设计总监',
    avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '8年UI/UX设计经验，曾主导多个大型企业应用和消费产品的设计工作',
    socialLinks: [
      {icon: 'fab fa-dribbble', url: '#'},
      {icon: 'fab fa-behance', url: '#'}
    ]
  },
]


</script>

<style lang="scss" scoped>
// 媒体查询
@media (max-width: 768px) {
  .call-me {
    display: none;
  }
}
</style>
