<template>
  <div class="about-story-container relative">
    <!-- 装饰底图: 极简抽象背景 -->
    <div class="absolute inset-0 pointer-events-none about-story-decor">
      <div class="glow-orb-story glow-orb-story-1"></div>
    </div>

    <!-- 叙事卡片 -->
    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">

      <!-- 左侧: 3D 模拟器界面 -->
      <div class="story-visual-wrap scroll-reveal-left">
        <div class="story-visual-card-wrapper" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave" ref="visualCardRef">
          <div class="story-visual-card glass-morph shadow-2xl overflow-hidden relative group">
            <img :src="storyImage" alt="暴米Ai 产品预览" class="story-visual-img" />
            <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 via-transparent to-white/10 pointer-events-none"></div>
            <div class="absolute -inset-[100%] bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 animate-shimmer group-hover:animate-none group-hover:left-[100%] duration-1000"></div>
          </div>

          <div class="floating-badge badge-1 glass-badge shadow-lg">
            <span class="text-xs font-black text-indigo-600 tracking-wider uppercase">Live Integration</span>
          </div>
          <div class="floating-badge badge-2 glass-badge shadow-lg">
            <span class="text-xs font-black text-emerald-600 tracking-wider uppercase">4 Engines Ready</span>
          </div>
        </div>
      </div>

      <!-- 右侧: 品牌使命与实战数据 -->
      <div class="story-content-wrap scroll-reveal-right">
        <div class="mb-10">
          <h4 class="text-xs font-black text-indigo-600 uppercase tracking-[0.3em] mb-4">Our Vision</h4>
          <blockquote class="text-2xl lg:text-3xl font-black text-slate-900 leading-[1.4] mb-8 relative italic">
            <span class="absolute -top-10 -left-6 text-9xl text-indigo-500/10 font-serif leading-none select-none">“</span>
            将全球顶级的 AI 自动化能力，封装成<span class="text-indigo-600">触手可及</span>的生产力模块。让技术不仅是工具，更是智慧的延伸。
          </blockquote>
          <p class="text-slate-500 text-lg font-medium leading-relaxed mb-8">
            暴米Ai 从零开始，深耕企业级自动化场景。我们不只是聚合引擎，更是流程自动化的新范式。从内容生产到复杂业务流，我们助力每一位用户实现跨越式的效能飞跃。
          </p>
        </div>

        <div class="grid grid-cols-3 gap-6">
          <div v-for="(stat, index) in stats" :key="index" class="stat-minimal-item group">
            <div class="text-3xl lg:text-4xl font-black text-indigo-600 mb-2 transition-transform group-hover:scale-110">
              {{ stat.value }}
            </div>
            <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">
              {{ stat.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import storyImage from '@/assets/imgs/platforms/n8n_canvas.png';

const stats = [
  { value: '5+', label: 'Engines' },
  { value: '1k+', label: 'Templates' },
  { value: '20+', label: 'Industries' },
];

const visualCardRef = ref(null);

function handleMouseMove(e) {
  if (!visualCardRef.value) return;
  const card = visualCardRef.value;
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  const rotateX = (y - centerY) / 25;
  const rotateY = (centerX - x) / 25;
  card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
}

function handleMouseLeave() {
  if (!visualCardRef.value) return;
  visualCardRef.value.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)`;
}

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-active');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.2 });
  document.querySelectorAll('.scroll-reveal-left, .scroll-reveal-right').forEach(el => observer.observe(el));
});
</script>

<style scoped>
.glow-orb-story { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, #e0e7ff 0%, transparent 70%); filter: blur(80px); opacity: 0.3; }
.glow-orb-story-1 { top: -10%; right: 10%; }
.story-visual-card-wrapper { position: relative; transition: transform 0.2s ease-out; transform-style: preserve-3d; }
.story-visual-card { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); }
.story-visual-img { width: 100%; height: auto; display: block; }
.glass-morph { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); }
.glass-badge { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.5); display: inline-flex; }
.floating-badge { position: absolute; z-index: 30; transform: translateZ(40px); pointer-events: none; }
.badge-1 { top: 15%; left: -5%; animation: float-anim 5s infinite ease-in-out; }
.badge-2 { bottom: 20%; right: -5%; animation: float-anim 5s infinite ease-in-out -2s; }
@keyframes float-anim { 0%, 100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(40px) translateY(-10px); } }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.stat-minimal-item { position: relative; padding-bottom: 12px; }
.stat-minimal-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: #6366f1; border-radius: 2px; transition: width 0.3s ease; }
.stat-minimal-item:hover::after { width: 100%; }
.scroll-reveal-left { opacity: 0; transform: translateX(-40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-reveal-right { opacity: 0; transform: translateX(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.is-active { opacity: 1; transform: translateX(0); }
</style>
