<template>
  <div class="trust-bar-container py-12">
    <div class="flex flex-col items-center">
      <div class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 mb-10 flex items-center gap-4">
        <div class="h-px w-8 bg-slate-100"></div>
        Trusted by Leading Engines
        <div class="h-px w-8 bg-slate-100"></div>
      </div>

      <div class="flex flex-wrap justify-center items-center gap-12 lg:gap-20">
        <div v-for="(engine, idx) in engines" :key="idx"
             class="trust-logo-wrapper group scroll-reveal-up"
             :style="{'--delay': idx * 0.05 + 's'}">
          <div class="relative">
            <img v-if="engine.img" :src="engine.img" :alt="engine.name"
                 class="h-8 lg:h-10 w-auto object-contain opacity-30 grayscale group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-500" />
            <div v-else class="text-xl font-black text-slate-200 group-hover:text-indigo-600 transition-colors duration-500 uppercase tracking-tighter">
              {{ engine.name }}
            </div>
            <!-- 悬浮时的底部发光线 -->
            <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-indigo-600 group-hover:w-full transition-all duration-500"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import n8nLogo from '@/assets/imgs/8n8.png';
import cozeLogo from '@/assets/imgs/coze.png';
import difyLogo from '@/assets/imgs/dify.png';
import fastgptLogo from '@/assets/imgs/FastGPT.png';

const engines = [
  { name: 'n8n', img: n8nLogo },
  { name: 'Coze', img: cozeLogo },
  { name: 'Dify', img: difyLogo },
  { name: 'FastGPT', img: fastgptLogo },
  { name: 'Make', img: null },
];

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-active');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.scroll-reveal-up').forEach(el => observer.observe(el));
});
</script>

<style scoped>
.scroll-reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}
.is-active {
  opacity: 1;
  transform: translateY(0);
}
</style>
