<script setup>
import {
  onUnmounted,
  ref,
  watch,
  reactive,
  onMounted
} from "vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
import { useI18n } from "vue-i18n";
import { useTransitionComposable } from "@/composables/transition-composable";
import { useRouter } from "vue-router";
import { NDivider } from "naive-ui";

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);
const { currentTab } = useHome();
const router = useRouter();
const { transitionState } =
  useTransitionComposable();
const main = ref();
let ctx;
const { t } = useI18n();
const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};
watch(
  [
    () =>
      transitionState.transitionComplete,
    main,
  ],
  (newValue) => {
    if (newValue && main.value) {
      ctx = gsap.context((self) => {
        // Text animations from left
        gsap.utils
          .toArray(".text-animate")
          .forEach((text) => {
            gsap.from(text, {
              x: -100,
              opacity: 0,
              duration: 0.8,
              ease: "back.out(1.2)",
              scrollTrigger: {
                trigger: text,
                start: "top 85%",
                toggleActions: "play none none reverse",
              },
            });
          });

        // Image animations from right
        gsap.utils
          .toArray(".image-animate")
          .forEach((image) => {
            gsap.from(image, {
              x: 100,
              opacity: 0,
              duration: 0.8,
              ease: "back.out(1.2)",
              scrollTrigger: {
                trigger: image,
                start: "top 85%",
                toggleActions: "play none none reverse",
              },
            });
          });

        // Float up animations for content sections
        gsap.utils.toArray('.float-up').forEach((element) => {
          gsap.from(element, {
            y: 100,
            opacity: 0,
            duration: 0.8,
            ease: "back.out(1.2)",
            scrollTrigger: {
              trigger: element,
              start: 'top 85%',
              toggleActions: "play none none reverse",
            }
          });
        });

        // 轮播卡片上升动画
        gsap.from('.carousel-item', {
          y: 100,
          opacity: 0,
          duration: 0.8,
          stagger: 0.2,
          ease: "back.out(1.2)",
          scrollTrigger: {
            trigger: '.carousel-container',
            start: 'top 85%',
            toggleActions: "play none none reverse",
          }
        });

      }, main.value);
    }
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  window.scrollTo(0, 0);
});

onUnmounted(() => {
  ctx?.revert(); // <- Easy Cleanup!
});
</script>

<template>
  <header className="header">
    <div class="logo">
      <img src="@/assets/image/logo.png" alt="logo" />
    </div>
    <div class="tabs">
      <div class="tab-item" :class="{
        active: currentTab === 'home',
      }" @click="handleTabClick('home')">
        {{ t("home.nav.home") }}
      </div>
      <div class="tab-item" :class="{
        active:
          currentTab ===
          'companyprofil',
      }" @click="
        handleTabClick(
          'companyprofil'
        )
        ">
        {{ t("home.nav.company") }}
      </div>
      <div class="tab-item" :class="{
        active:
          currentTab === 'businessintroduction',
      }" @click="
        handleTabClick('businessintroduction')
        ">
        {{ t("home.nav.businessintroduction") }}
      </div>
    </div>
  </header>
  <main ref="main" class="height-full">
    <div class="head relative">
      <img src="@/assets/image/ywjs.png" alt="head" />

      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
        {{ t('businessintroduction.hero.title1') }}
      </div>
      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
        {{ t('businessintroduction.hero.title2') }}
      </div>
      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
        {{ t('businessintroduction.hero.desc') }}
      </div>
    </div>
    <n-divider class="divider1" vertical />
    <div class="divider2" style=""></div>
    <div class="divider3" style=""></div>
    <div class="divider4" style=""></div>
    <n-divider class="divider5" vertical />
    <div class="bg-[#F8F9FF]">
      <div class="content1 relative flex justify-center z-3 pb-[100px] flex-col pr-[10px] float-up">

        <div class="pl-[505px] pr-[480px] flex flex-col">
          <div class="text-[#8B59F7] text-[16px] text-animate">{{ t('businessintroduction.industry.label') }}</div>
          <div class="text-[#10253E] text-[40px] mt-[17px] text-animate">{{ t('businessintroduction.industry.title') }}</div>
          <div class="text-[#455363] text-[16px] mt-[27px] max-w-[748px] text-animate">
            {{ t('businessintroduction.industry.desc') }}
          </div>
          <div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">{{ t('businessintroduction.industry.challenges.title') }}</div>
          <div class="flex flex-col mt-[30px]">
            <div class="flex justify-between">
              <div class="flex max-w-[405px] float-up">
                <img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
                <div class="text-[#455363] text-[16px] float-up">
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[0].title') }}
                  </div>
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[0].desc') }}
                  </div>
                </div>
              </div>
              <div class="flex max-w-[405px] float-up">
                <img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
                <div class="text-[#455363] text-[16px] float-up">
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[1].title') }}
                  </div>
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[1].desc') }}
                  </div>
                </div>
              </div>
            </div>

            <div class="flex justify-between mt-[30px]">
              <div class="flex max-w-[405px] float-up">
                <img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
                <div class="text-[#455363] text-[16px] float-up">
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[2].title') }}
                  </div>
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[2].desc') }}
                  </div>
                </div>
              </div>
              <div class="flex max-w-[405px] float-up">
                <img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
                <div class="text-[#455363] text-[16px] float-up">
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[3].title') }}
                  </div>
                  <div>
                    {{ t('businessintroduction.industry.challenges.items[3].desc') }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">{{ t('businessintroduction.industry.opportunity.title') }}</div>
          <div class="text-[#455363] text-[16px] mt-[27px] max-w-[748px] text-animate">
            {{ t('businessintroduction.industry.opportunity.desc') }}
          </div>
        </div>
      </div>
      <div class="content2 relative flex items-center pb-[120px] pt-[168px] bg-[#fff] float-up">

        <div class="pl-[505px] pr-[490px] flex z-3">
          <div class="">
            <div class="text-[#8B59F7] text-[16px] text-animate">{{ t('businessintroduction.solution.label') }}</div>
            <div class="text-[#10253E] text-[40px] mt-[17px] text-animate">{{ t('businessintroduction.solution.title') }}</div>
            <div class="flex justify-between items-center mt-[97px]">
              <div class="max-w-[412px] float-up">
                <img class="w-[64px] h-[48px]" src="@/assets/image/jxgb.png" alt="cl" />
                <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
                  <n-divider class="absolute left-[-23px] top-[6px]" style="
                    background-color: #8b59f7;
                  " vertical />{{ t('businessintroduction.solution.features.precision.title') }}
                </div>
                <div class="text-[#455363] text-[16px] mt-[15px] text-animate">
                  {{ t('businessintroduction.solution.features.precision.desc') }}
                </div>
              </div>
              <div class="image-animate">
                <img class="w-[495px] h-[212px] ml-[20px]" src="@/assets/image/xb.png" alt="cl" />
              </div>
            </div>
            <div class="flex mt-[112px]">
              <div class="max-w-[412px] float-up">
                <img class="w-[58px] h-[50px]" src="@/assets/image/gz.png" alt="cl" />
                <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
                  <n-divider class="absolute left-[-23px] top-[6px]" style="
                    background-color: #8b59f7;
                  " vertical />{{ t('businessintroduction.solution.features.monetization.title') }}
                </div>
                <div class="text-[#455363] text-[16px] mt-[15px] text-animate">
                  {{ t('businessintroduction.solution.features.monetization.desc') }}
                </div>
              </div>
              <div class="max-w-[412px] ml-[55px] float-up">
                <img class="w-[46px] h-[46px]" src="@/assets/image/3dy.png" alt="cl" />
                <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
                  <n-divider class="absolute left-[-28px] top-[6px]" style="
                    background-color: #8b59f7;
                  " vertical />{{ t('businessintroduction.solution.features.interaction.title') }}
                </div>
                <div class="text-[#455363] text-[16px] mt-[15px] text-animate">
                  {{ t('businessintroduction.solution.features.interaction.desc') }}
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>

      <div class="content3 relative overflow-hidden float-up">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />

        <div class="relative bg-[#F8F9FF] flex  flex-col  mt-[119px]">
          <div class=" pl-[505px] pr-[490px] ">
            <div class="text-[#8B59F7] text-[16px] text-animate">
              {{ t('businessintroduction.vision.label') }}
            </div>
            <div class="text-[#10253E] text-[40px] text-animate">
              {{ t('businessintroduction.vision.title') }}
            </div>
            <div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
              {{ t('businessintroduction.vision.desc') }}
            </div>
            <div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">
              {{ t('businessintroduction.vision.community.title') }}
            </div>
            <div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
              {{ t('businessintroduction.vision.community.desc') }}
            </div>
          </div>
          <div class="pl-[493px] pr-[490px]">
            <img class="w-[930px] h-[379px] mt-[30px] relative z-24" src="@/assets/image/qq.png" alt="cl" />
          </div>
        </div>

      </div>
      <div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <img src="@/assets/image/dq.png" alt="cl" />
        <div class="absolute top-[86px] pl-[505px] pr-[490px] flex z-4  flex-col">
          <div class="text-[#FFFFFF] text-[22px] text-animate">
            {{ t('businessintroduction.cooperation.title') }}
          </div>
          <div class="text-[#FFFFFF] text-[22px] mt-[100px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2025.title') }}
          </div>
          <div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2025.desc') }}
          </div>
          <div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2026.title') }}
          </div>
          <div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2026.desc') }}
          </div>
          <div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2027.title') }}
          </div>
          <div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
            {{ t('businessintroduction.cooperation.timeline.year2027.desc') }}
          </div>
        </div>
        <div class="flex pl-[505px] pr-[490px] flex z-4">
          <div class="mr-[60px]">
            <div class="text-[#8B59F7] text-[22px] text-animate">
              {{ t('businessintroduction.incubation.title') }}
            </div>
            <div class="text-[#8B59F7] text-[22px] text-animate">
              {{ t('businessintroduction.incubation.subtitle') }}
            </div>
            <div class="text-[#455363] text-[16px] max-w-[402px] mt-[50px] text-animate">
              {{ t('businessintroduction.incubation.desc') }}
            </div>
          </div>
          <div class="max-w-[202px]">
            <img class="w-[58px] h-[50px]" src="@/assets/image/gpz.png" alt="cl" />
            <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
              <n-divider class="absolute left-[-23px] top-[6px]" style="
                    background-color: #8b59f7;
                  " vertical />{{ t('businessintroduction.incubation.features.fans.title') }}
            </div>
            <div class="text-[#455363] text-[16px] mt-[15px] text-animate">
              {{ t('businessintroduction.incubation.features.fans.desc') }}
            </div>
          </div>
          <div class="max-w-[202px] ml-[30px]">
            <img class="w-[58px] h-[50px]" src="@/assets/image/sm.png" alt="cl" />
            <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
              <n-divider class="absolute left-[-23px] top-[6px]" style="
                    background-color: #8b59f7;
                  " vertical />{{ t('businessintroduction.incubation.features.kol.title') }}
            </div>
            <div class="text-[#455363] text-[16px] mt-[15px] text-animate">
              {{ t('businessintroduction.incubation.features.kol.desc') }}
            </div>
          </div>
        </div>


      </div>
      <div class="content5 relative bg-[#F8F9FF] overflow-hidden float-up">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <div class="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px]">
          <div class="text-[#8B59F7] text-[22px] text-animate">
            {{ t('businessintroduction.exposure.title') }}
          </div>

          <div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
            {{ t('businessintroduction.exposure.desc') }}
          </div>

          <div class="flex">
            <div class="carousel-item cursor-pointer">
              <img class="carousel-image" src="@/assets/image/fp1.png" />
              <div class="carousel-content">
                <div class="carousel-title">
                  <div>{{ t('businessintroduction.exposure.timeline.year2025.title') }}</div>
                </div>
                <div class="carousel-subtitle">
                  <div>{{ t('businessintroduction.exposure.timeline.year2025.desc') }}</div>
                </div>
              </div>
            </div>
            <div class="carousel-item cursor-pointer">
              <img class="carousel-image" src="@/assets/image/fp2.png" />
              <div class="carousel-content">
                <div class="carousel-title">
                  <div>{{ t('businessintroduction.exposure.timeline.year2026.title') }}</div>
                </div>
                <div class="carousel-subtitle">
                  <div>{{ t('businessintroduction.exposure.timeline.year2026.desc') }}</div>
                </div>
              </div>
            </div>
            <div class="carousel-item cursor-pointer">
              <img class="carousel-image" src="@/assets/image/fp3.png" />
              <div class="carousel-content">
                <div class="carousel-title">
                  <div>{{ t('businessintroduction.exposure.timeline.year2027.title') }}</div>
                </div>
                <div class="carousel-subtitle">
                  <div>{{ t('businessintroduction.exposure.timeline.year2027.desc') }}</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="footer-content">
      <img class="copyright" src="@/assets/image/cp.png" alt="logo" />
    </div>
  </footer>
</template>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 10rem;
  background-color: transparent;
}

.logo {
  img {
    width: 108px;
    height: 33px;
  }
}

.tabs {
  display: flex;
  gap: 32px;
  margin-right: 32px;
}

.tab-item {
  font-size: 16px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

  &:hover {
    color: #8b59fa;
  }
}

.head {
  width: 100%;
  background-color: #f8f9ff;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.divider1 {
  position: absolute;
  z-index: 3;
  left: 482px;
  width: 1px;
  height: 100vw;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.divider2 {
  position: absolute;
  z-index: 3;
  left: 720px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider3 {
  position: absolute;
  z-index: 3;
  left: 952px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider4 {
  position: absolute;
  z-index: 3;
  left: 1182px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider5 {
  position: absolute;
  z-index: 3;
  left: 1406px;
  width: 1px;
  height: 100vw;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.footer-content {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;

  .copyright {
    width: 232px;
    height: 22pxpx;
  }
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  cursor: pointer;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.carousel-item {
  width: 287px;
  background-color: #fff;
  margin-right: 18px;
  flex: 0 0 auto;
  display: block;
  padding: 8px 8px 18px 8px;
  border-radius: 12px;
  box-shadow: 0 3px 14px 1px rgba(0, 0, 0, 0.16);
  will-change: transform, opacity; // 优化动画性能
}

.carousel-image {
  width: 428px;
  height: 259px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.carousel-content {
  padding: 0 ;
  margin-top: 10px;
}

.carousel-title {
  font-size: 20px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: calc(1.5em * 5);
}

.carousel-subtitle {
  color: #455363;
  margin-top: 5px;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
 
}

// 添加一个通用的溢出控制类
.overflow-hidden {
  overflow: hidden;
}

// 为所有可能需要动画的容器添加溢出隐藏
[ref*="moveRef"] {
  position: relative;
}
</style>
