<template>
  <Bg>
  <div :style="getResponsiveWidthStyle()">
    <div style="position: sticky;top: 0;">
  <spline  :scene="'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode'"/>
    </div>
  </div>
    <div style="position: relative;pointer-events:none;" class="min-h-screen flex flex-col w-full selection:bg-purple-500 selection:text-white">
      <!-- Navbar -->
    <header 
      :class="[
        'fixed top-0 left-0 right-0 z-900 transition-all duration-300 pointer-events-auto',
        isScrolled ? 'bg-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
      ]"
    >
      <div class="container mx-auto px-6 flex items-center justify-between">
        <!-- Logo -->
        <a href="#" class="text-2xl font-bold tracking-tighter text-white">
          Deotaland
        </a>

        <!-- Desktop Nav -->
        <nav class="hidden md:flex items-center gap-8">
          <a 
            href="#" 
            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
          >
            {{ t('nav.creator') }}
          </a>
          <a 
            href="#" 
            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
          >
            {{ t('nav.land') }}
          </a>
          <a 
            href="#" 
            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
          >
            {{ t('nav.pricing') }}
          </a>
        </nav>

        <!-- Right Action & Mobile Toggle -->
        <div class="flex items-center gap-4">
          <button 
            @click="$router.push('/czhome')"
            class="hidden md:inline-flex items-center justify-center px-5 py-2 text-sm font-semibold text-black bg-white rounded-full hover:bg-gray-200 transition-colors cursor-pointer"
          >
            {{ t('hero.start') }}
          </button>

          <button 
            class="md:hidden text-white"
            @click="isMobileMenuOpen = !isMobileMenuOpen"
          >
            <svg v-if="isMobileMenuOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu -->
      <div v-if="isMobileMenuOpen" class="absolute top-full left-0 right-0  border-t border-gray-800 p-6 flex flex-col gap-4 md:hidden">
        <a 
          href="#" 
          class="text-lg font-medium text-gray-300 hover:text-white"
        >
          {{ t('nav.creator') }}
        </a>
        <a 
          href="#" 
          class="text-lg font-medium text-gray-300 hover:text-white"
        >
          {{ t('nav.land') }}
        </a>
        <a 
          href="#" 
          class="text-lg font-medium text-gray-300 hover:text-white"
        >
          {{ t('nav.pricing') }}
        </a>
        <button 
          @click="$router.push('/czhome')"
          class="w-full text-center py-3 text-black bg-white rounded-full font-bold cursor-pointer"
        >
          {{ t('hero.start') }}
        </button>
      </div>
    </header>

    <!-- Main Content -->
    <main>
      <!-- Hero Section -->
      <div ref="containerRef" class="relative h-[300vh] w-full ">
        <!-- Sticky Container -->
        <div class="sticky top-0 h-[100dvh] w-full overflow-hidden">
          
          <!-- Layer 1: Background Animation (Grid) -->
          <div class="absolute inset-0 flex items-center justify-center overflow-hidden">
              
              <div 
                  
                  class="origin-center flex items-center justify-center"
              >
                  <!-- Grid Layout -->
                  <div v-if="!isMobile" class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
                      <!-- --- ROW 1 --- -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
                      <div  :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
                           <img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
                        <!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
                        </div> -->
                      </div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Retro Bot" /></div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Toy Bot" /></div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Cyberpunk" /></div>

                      <!-- --- ROW 2 (Middle) --- -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Interactive" /></div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Small Bot" /></div>
                      
                      <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
                       <!-- :style="{ scale: scale*1.2 }" -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="3D Print" /></div>
                      <!-- --- ROW 3 --- -->
                      <!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
                      <div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
                  </div>
                   <div v-else class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
                      <!-- --- ROW 1 --- -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
                      
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Retro Bot" /></div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Toy Bot" /></div>
                      <div  :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
                           <img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
                        <!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
                        </div> -->
                      </div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Cyberpunk" /></div>
                      <!-- --- ROW 2 (Middle) --- -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Interactive" /></div>
                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Small Bot" /></div>
                      
                      <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
                       <!-- :style="{ scale: scale*1.2 }" -->
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
                      <!-- --- ROW 3 --- -->
                      <!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
                      <div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
                  </div>
              </div>
          </div>
         

          <!-- Layer 2: Static Dark Overlay -->
      
          <div class="absolute inset-0  z-10 pointer-events-none" />

          <!-- Layer 3: Static Content Layer -->
          <div class="absolute inset-0 z-20 flex flex-col items-center justify-center pointer-events-none">
        
             <MotionCom>
            <div class="pointer-events-auto flex flex-col items-center justify-center text-center px-4 w-full max-w-5xl mx-auto">
                <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tighter drop-shadow-2xl">
                  {{ t('hero.title') }}
                </h1>
                <p class="text-xl md:text-2xl text-gray-200 mb-10 drop-shadow-lg max-w-2xl font-light">
                  {{ t('hero.subtitle') }}
                </p>
                <div class="flex flex-col sm:flex-row gap-5">
                  <a 
                    href="https://deotaland.com" 
                    class="px-9 py-4 rounded-full border border-white/50 bg-black/20 backdrop-blur-sm text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
                  >
                    {{ t('hero.explore') }}
                  </a>
                  <button 
                    @click="$router.push('/czhome')"
                    class="px-9 py-4 rounded-full bg-white text-black font-semibold hover:bg-gray-200 transition-all text-lg shadow-[0_0_20px_rgba(255,255,255,0.3)] cursor-pointer"
                  >
                    {{ t('hero.start') }}
                  </button>
                </div>
            </div>
        </MotionCom>

          </div>

        </div>
      </div>

      <!-- Creation Canvas Section -->
      <section class="py-0 md:py-24 relative overflow-hidden">
        <!-- Background gradient hint -->
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gray-900/50 blur-[120px] rounded-full pointer-events-none" />

        <div class="container mx-auto px-6 relative z-10">
          <MotionCom>
          <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold mb-4 text-white">
              {{ t('canvas.title') }}
            </h2>
            <p class="text-gray-400 text-lg md:text-xl">
              {{ t('canvas.subtitle') }}
            </p>
          </div>
</MotionCom>
<MotionCom>
          <!-- Workflow Visualization Container -->
          <div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12 backdrop-blur-sm">
              
              <!-- Responsive Flex Layout: Stack on mobile, Row on desktop -->
              <div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
                  
                  <!-- LEVEL 1: INPUTS (Stacked Vertically) -->
                  <div class="flex flex-col gap-6 w-full md:w-auto">
                      <!-- Input A: Prompt -->
                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-purple-400 shrink-0">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
                          </div>
                          <div>
                              <span class="block text-sm font-bold text-gray-200">{{ t('canvas.prompt') }}</span>
                              <span class="text-xs text-gray-500">"A cute pumpkin dog"</span>
                          </div>
                      </div>

                      <!-- Input B: Reference -->
                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 shrink-0">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                          </div>
                          <div class="flex-1">
                              <span class="block text-sm font-bold text-gray-200 mb-1">{{ t('canvas.reference') }}</span>
                              <div class="w-full h-24 rounded-lg overflow-hidden border border-gray-700 relative group">
                                  <img :src="refImage" alt="Dog Reference" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-500" />
                                  <div class="absolute bottom-1 right-1 bg-black/60 px-1 rounded text-[10px] text-white">{{ t('canvas.referenceText') }}</div>
                              </div>
                          </div>
                      </div>
                  </div>

                  <!-- Connector Arrow 1 -->
                  <div class="flex flex-col items-center justify-center text-gray-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                  </div>

                  <!-- LEVEL 2: 3D MODEL -->
                  <div class="flex flex-col gap-4 bg-black/80 p-5 rounded-2xl border border-gray-800 w-full md:w-64 shadow-lg hover:border-gray-600 transition-colors">
                      <div class="flex items-center gap-3 mb-2">
                          <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-green-400">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                          </div>
                          <span class="text-sm font-bold text-gray-200">{{ t('canvas.model3d') }}</span>
                      </div>
                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-gray-700 relative bg-gray-900 group">
                          <img :src="model3dImage" alt="3D Pumpkin Dog" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500" />
                          <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grid-me.png')] opacity-30 pointer-events-none"></div>
                          <div class="absolute bottom-2 left-2 bg-green-900/80 px-2 py-0.5 rounded text-[10px] text-green-100 font-mono">.OBJ Generated</div>
                      </div>
                      <p class="text-xs text-gray-500 text-center">{{ t('canvas.autoRigged') }}</p>
                  </div>

                  <!-- Connector Arrow 2 -->
                  <div class="flex flex-col items-center justify-center text-gray-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                  </div>

                  <!-- LEVEL 3: REAL ROBOT -->
                  <div class="flex flex-col gap-4 bg-gradient-to-b from-purple-900/20 to-blue-900/20 p-5 rounded-2xl border border-purple-500/40 w-full md:w-72 shadow-[0_0_30px_rgba(147,51,234,0.1)]">
                      <div class="flex items-center gap-3 mb-2">
                          <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white shadow-lg shadow-purple-600/50">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M7 7h10v10"></path></svg>
                          </div>
                          <span class="text-sm font-bold text-white">{{ t('canvas.realRobot') }}</span>
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400 fill-yellow-400 ml-auto animate-pulse"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
                      </div>
                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-purple-500/30 relative group bg-gray-900">
                          <img :src="realRobotImage" alt="Real Robot Toy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                          <div class="absolute inset-0 bg-gradient-to-t from-purple-900/40 to-transparent"></div>
                      </div>
                      <p class="text-xs text-purple-200 text-center font-medium">{{ t('canvas.alive') }}</p>
                  </div>

              </div>
          </div>
          </MotionCom>
        </div>
      </section>
<MotionCom>
      <!-- Companionship Section -->
      <section class="py-24 border-t border-gray-900 ">
        <div class="container mx-auto px-6 flex flex-col items-center text-center">
          
          <h2 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
            {{ t('companionship.title') }}
          </h2>
          
          <h3 class="text-2xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-semibold mb-8">
            {{ t('companionship.powered') }}
          </h3>
          
          <p class="text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed">
            {{ t('companionship.subtitle') }}
          </p>

          <a 
            href="https://deotaland.com" 
            class="pointer-events-auto inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-purple-600 rounded-full hover:scale-105 transition-transform duration-200"
          >
            {{ t('companionship.examples') }}
          </a>

          <!-- Optional Visual Element below -->
          <div class="mt-16 w-full max-w-4xl h-64 md:h-96 rounded-3xl overflow-hidden relative">
              <img 
                  src="https://draft-user.s3.us-east-2.amazonaws.com/images/ca6a57e3-85b1-4aa7-b032-78d54d4850ea.jpg" 
                  alt="Robot Companion Context" 
                  class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity duration-500"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
          </div>
        </div>
      </section>
</MotionCom>
<MotionCom>
      <!-- Middle Text Section -->
      <section class="py-12  text-center">
        <div class="container mx-auto px-6 max-w-3xl">
          <p class="text-lg md:text-xl text-gray-400 leading-relaxed">
            Explore our community creations and get inspired to build your own unique AI robot companion. 
            Each robot has its own personality and story, waiting to be discovered and loved.
          </p>
        </div>
      </section>
</MotionCom>
<MotionCom>
      <!-- Robot Cards Section -->
      <section class="py-20  overflow-hidden">
        <div class="container mx-auto px-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <div 
              v-for="card in cards" 
              :key="card.id" 
              class="group relative rounded-3xl overflow-hidden aspect-[3/4] cursor-pointer"
            >
              <img 
                :src="card.img" 
                :alt="card.title" 
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-90" />
              <div class="absolute bottom-0 left-0 p-6">
                <h3 class="text-xl font-bold text-white mb-1">{{ card.title }}</h3>
                <p class="text-sm font-medium text-gray-300">{{ card.user }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
 </MotionCom>
      <!-- Features Section -->
      <section class="py-24 bg-gray-900/30">
        <div class="container mx-auto px-6">
          
          <div class="mb-16 text-center md:text-left">
            <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
              {{ t('features.title') }}
            </h2>
            <p class="text-xl text-gray-400">
              {{ t('features.subtitle') }}
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            <div 
              v-for="(item, idx) in t('features.list')" 
              :key="idx" 
              class="flex flex-col items-start gap-4"
            >
              <div class="p-3 bg-gray-800 rounded-xl mb-2">
                <svg v-if="idx === 0" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>
                <svg v-else-if="idx === 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                <svg v-else-if="idx === 2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
              </div>
              <h3 class="text-2xl font-bold text-white">{{ item.title }}</h3>
              <p class="text-gray-400 leading-relaxed text-lg">
                {{ item.desc }}
              </p>
            </div>
          </div>

        </div>
      </section>

      <!-- Strong Engine Section -->
      <section class="py-24 ">
        <div class="container mx-auto px-6 text-center">
          <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
            {{ t('engine.title') }}
          </h2>
          <p class="text-lg text-gray-500 mb-16 max-w-2xl mx-auto">
            {{ t('engine.subtitle') }}
          </p>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
            <div 
              v-for="(name, i) in logos" 
              :key="i" 
              class="h-24 bg-gray-900 rounded-lg flex items-center justify-center border border-gray-800 hover:border-gray-600 transition-colors"
            >
              <span class="text-gray-500 font-semibold text-sm">{{ name }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Community Call Section -->
      <section class="py-32 bg-gradient-to-b from-black to-gray-900 border-b border-gray-800">
        <div class="container mx-auto px-6 text-center">
          <h2 class="text-5xl md:text-7xl font-bold text-white mb-12 tracking-tighter">
            {{ t('community.title') }}
          </h2>
          
          <a 
            href="#" 
            class="inline-block px-10 py-4 text-lg font-bold text-black bg-white rounded-full hover:bg-gray-200 transition-colors"
          >
            {{ t('community.join') }}
          </a>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer class="pointer-events-auto text-white py-16 border-t border-gray-900">
      <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-start gap-12">
          
          <!-- Logo -->
          <div class="mb-4 md:mb-0">
            <span class="text-2xl font-bold tracking-tighter">Deotaland</span>
          </div>

          <!-- Links Columns -->
          <div class="flex flex-wrap gap-12 md:gap-24">
            
            <!-- Socials -->
            <div class="flex flex-col gap-4">
              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.socials') }}</h4>
              <div class="flex gap-4">
                <a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
                <a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="M9.75 15.02v-4.04l5.5 2.02-5.5 2.02Z"></path></svg></a>
                <a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a>
                <a href="#" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">TikTok</a>
              </div>
            </div>

            <!-- Language -->
            <div class="flex flex-col gap-4">
              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.language') }}</h4>
              <div class="flex flex-col gap-2">
                 <a href="#" @click.prevent="switchLanguage('en')" class="text-gray-300 hover:text-white text-sm">English</a>
                 <a href="#" @click.prevent="switchLanguage('zh')" class="text-gray-300 hover:text-white text-sm">中文</a>
              </div>
            </div>

            <!-- Company -->
             <div class="flex flex-col gap-4">
              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.company') }}</h4>
              <div class="flex flex-col gap-2">
                 <a href="#" class="text-gray-300 hover:text-white text-sm">{{ t('footer.about') }}</a>
              </div>
            </div>

             <!-- Action -->
             <div class="flex flex-col gap-4">
                 <button 
                    @click="scrollToTop"
                    class="text-gray-300 hover:text-white text-sm text-left"
                 >
                    {{ t('footer.backTop') }}
                 </button>
            </div>

          </div>
        </div>
<div >
      
          </div>
        <div class="mt-16 pt-8 border-t border-gray-900 text-center md:text-left text-sm text-gray-600">
          {{ t('footer.copyright') }}
        </div>
      </div>
    </footer>
  </div>
  </Bg>
</template>

<script setup>
import MotionCom from './motion.vue'
import spline from './spline.vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import Bg from './bg.vue'
import dog from '@/assets/home/dog.jpg'
import qdog from '@/assets/home/qdog.jpg'
import center from '@/assets/home/center.png'
import center1 from '@/assets/home/center1.png'
import center2 from '@/assets/home/center2.png'
import center3 from '@/assets/home/center3.png'
import center4 from '@/assets/home/center4.png'
import center5 from '@/assets/home/center5.png'
import center6 from '@/assets/home/center6.png'
import center7 from '@/assets/home/center7.png'
import center8 from '@/assets/home/center8.png'
import center9 from '@/assets/home/center9.png'
// Window size reactive state
const getResponsiveWidthStyle = () => {
  const isMobile = window.innerWidth < 768;
  return {
    position: 'fixed',
    width: isMobile ? '300vw' : '100vw',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)'
  };
};
const isMobile = ref(window.innerWidth < 768);
// 中英文库
const i18n = {
  en: {
    nav: {
      creator: 'Creator',
      land: 'Land',
      pricing: 'Pricing'
    },
    hero: {
      title: 'Create with Deotaland',
      subtitle: 'Bring your own AI robot companion to life',
      explore: 'Explore More',
      start: 'Start Now'
    },
    canvas: {
      title: 'Your Creation canvas – DeotaBoard',
      subtitle: 'Build your robot in an infinite canvas, together with AI.',
      prompt: 'Prompt / Idea',
      reference: 'Reference',
      model3d: '3D Model',
      realRobot: 'Real Robot',
      autoRigged: 'Auto-rigged mesh ready for core',
      alive: 'Alive on your desktop',
      referenceText: 'Reference'
    },
    companionship: {
      title: 'Born for Personal Companionship',
      powered: 'Powered by AI',
      subtitle: 'Cute companions, emotional partners, desktop friends... All in one Deotaland DIY robot.',
      examples: 'See Robot Examples'
    },
    features: {
      title: 'From Zero to Your Own Robot Friend',
      subtitle: 'Simple enough for beginners, powerful enough for makers.',
      list: [
        { title: 'Stunning Custom Looks', desc: 'Generate unique robot designs from your ideas or images.' },
        { title: 'From Idea to 3D Model', desc: 'Turn concepts into printable 3D shells ready for your robot core.' },
        { title: 'One-Click Expression Packs', desc: 'Create and apply DIY eye styles and animated expressions.' },
        { title: 'Always-On AI Companion', desc: 'Long-term memory, emotional responses, and daily interactions.' }
      ]
    },
    engine: {
      title: 'Strong Engine Behind',
      subtitle: 'We combine leading AI and 3D technologies to power your DIY robots.'
    },
    community: {
      title: 'Deotaland is for All Creators',
      join: 'Join the Creator Community'
    },
    footer: {
      socials: 'Socials',
      language: 'Language',
      company: 'Company',
      about: 'About Us',
      backTop: 'Back to top',
      copyright: '©2025 Deotaland limited. All rights reserved.'
    }
  },
  zh: {
    nav: {
      creator: '创作者',
      land: '社区',
      pricing: '价格'
    },
    hero: {
      title: '使用 Deotaland 创作',
      subtitle: '让你的 AI 机器人伴侣成为现实',
      explore: '探索更多',
      start: '立即开始'
    },
    canvas: {
      title: '你的创作画布 – DeotaBoard',
      subtitle: '在无限画布中，与 AI 一起打造你的机器人。',
      prompt: '提示 / 创意',
      reference: '参考',
      model3d: '3D 模型',
      realRobot: '真实机器人',
      autoRigged: '自动绑定网格，随时准备安装核心',
      alive: '活跃在你的桌面上',
      referenceText: '参考'
    },
    companionship: {
      title: '为个人陪伴而生',
      powered: '由 AI 驱动',
      subtitle: '可爱的伴侣、情感伙伴、桌面朋友... 尽在 Deotaland DIY 机器人中。',
      examples: '查看机器人示例'
    },
    features: {
      title: '从零到属于你的机器人朋友',
      subtitle: '对初学者足够简单，对创客足够强大。',
      list: [
        { title: '惊艳的自定义外观', desc: '从你的想法或图像生成独特的机器人设计。' },
        { title: '从想法到 3D 模型', desc: '将概念转化为可打印的 3D 外壳，随时准备安装你的机器人核心。' },
        { title: '一键表情包', desc: '创建并应用 DIY 眼睛样式和动画表情。' },
        { title: '全天候 AI 伴侣', desc: '长期记忆、情感反应和日常互动。' }
      ]
    },
    engine: {
      title: '强大的引擎支持',
      subtitle: '我们结合领先的 AI 和 3D 技术，为你的 DIY 机器人提供动力。'
    },
    community: {
      title: 'Deotaland 面向所有创作者',
      join: '加入创作者社区'
    },
    footer: {
      socials: '社交',
      language: '语言',
      company: '公司',
      about: '关于我们',
      backTop: '返回顶部',
      copyright: '©2025 Deotaland 有限公司。保留所有权利。'
    }
  }
};
// Navbar state
const isScrolled = ref(false);
const isMobileMenuOpen = ref(false);

// 语言切换逻辑
const currentLang = ref(localStorage.getItem('lang') || 'en');

// 切换语言
const switchLanguage = (lang) => {
  currentLang.value = lang;
  localStorage.setItem('lang', lang);
};

// 获取当前语言的文本
const t = (key) => {
  const keys = key.split('.');
  let result = i18n[currentLang.value];
  for (const k of keys) {
    if (result && result[k] !== undefined) {
      result = result[k];
    } else {
      return key; // 如果找不到对应的键，返回原始键
    }
  }
  return result;
};

// Hero section state
const containerRef = ref(null);
const scrollYProgress = ref(0);

// Scroll event handler
const handleScroll = () => {
  // isScrolled.value = window.scrollY > 50;
  isScrolled.value = false;
  
  // Calculate scroll progress for hero section
  if (containerRef.value) {
    const viewportHeight = window.innerHeight;
    const scrollPosition = window.scrollY;
    const containerTop = containerRef.value.offsetTop;
    const containerHeight = containerRef.value.offsetHeight;
    
    // Calculate progress from 0 to 1 as we scroll through the container
    const progress = Math.max(0, Math.min(1, 
      (scrollPosition - containerTop + viewportHeight) / 
      (containerHeight + viewportHeight)
    ));
    
    scrollYProgress.value = progress;
  }
};

// Scroll to top function
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// Scale transformation based on scroll progress
const scale = computed(() => {
  // Zoom out more aggressively to ensure all 15 images are visible
  // Final scale is 0.2 for mobile and 0.3 for desktop
  const mappedProgress = Math.min(scrollYProgress.value / 0.8, 1);
  let initNum = window.innerWidth < 768 ? 3.5 : 5.5;
  let outNum = window.innerWidth < 768 ? 3.2 : 5.0;
  return initNum - (mappedProgress * outNum);
});

// Nav links
const navLinks = [
  { name: 'Creator', href: '#' },
  { name: 'Land', href: '#' },
  { name: 'Pricing', href: '#' },
];
// Creation Canvas Images
const refImage = dog;
const model3dImage = qdog; 
const realRobotImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/367b3ceb-5a3d-46c4-880b-d7028d3c93d4.jpg';

// Robot Cards
const cards = [
  { id: 1, title: 'Custom Robot', user: '@Wownny wolf', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/ba284669-6e9c-4a10-ae8d-21954629788d.png' },
  { id: 2, title: 'Custom Robot', user: '@Lil Moods', img: 'https://draft-user.s3.us-east-2.amazonaws.com/images/72109af5-7ff7-47a1-ba7d-5e18ab855479.png' },
  { id: 3, title: 'Custom Robot', user: '@Deo Monkey', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/fd21fc66-8cae-417f-9e9a-617f18af9406.png' },
];
// Strong Engine Logos
const logos = [
  "AI Engine 1", "3D Engine 2", "Voice Engine 3", "Memory Engine 4",
  "Physics Core", "Render Tech", "Motion API", "Vision OS"
];

// Mount and unmount scroll event
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  // Initial call to set initial state
  handleScroll();
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
/* Additional custom styles can be added here */
</style>
