<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { onMounted, ref, onUnmounted } from 'vue'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import FooterLogo from '~/components/common/FooterLogo.vue'
import AnimatedButton from '~/components/common/AnimatedButton.vue'

gsap.registerPlugin(ScrollTrigger)

const { t } = useI18n()
const footerRef = ref<HTMLElement | null>(null)
let ctx: gsap.Context

const pagesLinks = [
  { name: 'nav.home', url: '/' },
  { name: 'nav.studio', url: '/studio' },
  { name: 'nav.work', url: '/work' },
  { name: 'nav.news', url: '/news' },
]

onMounted(() => {
  if (!footerRef.value) return

  ctx = gsap.context(() => {
      const items = gsap.utils.toArray<HTMLElement>('.animated-item')
      
      gsap.from(items, {
        scrollTrigger: {
          trigger: footerRef.value,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
        },
        y: 20,
        opacity: 0,
        duration: 0.6,
        stagger: 0.1,
        ease: 'power3.out'
      })
    }, footerRef.value)
})

onUnmounted(() => {
  ctx?.revert()
})
</script>

<template>
  <footer ref="footerRef" class="bg-black text-white px-6 py-16 md:px-12 md:py-24 overflow-hidden">
    <div class="max-w-[1440px] mx-auto">
      <!-- Top Section -->
      <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
        <h2 class="text-3xl md:text-4xl lg:text-[44px] font-normal tracking-normal !leading-[1.4] max-w-none whitespace-pre-line">
          {{ t('footer.title') }}
        </h2>
        <div class="inline-flex items-center shrink-0">
          <AnimatedButton 
            :text="t('footer.collaborate')" 
            to="/contact" 
            theme="light" 
          />
        </div>
      </div>

      <!-- Divider -->
      <hr class="border-white/10 w-full mb-16" />

      <!-- Bottom Section -->
      <div class="grid grid-cols-1 lg:grid-cols-2">
        
        <!-- Left Column -->
        <div class="flex flex-col justify-between lg:border-r border-white/10 lg:pr-16 pb-16 lg:pb-0 border-b lg:border-b-0 mb-16 lg:mb-0">
          <div>
            <FooterLogo class="mb-16 animated-item justify-start" />
            
            <h3 class="text-2xl font-medium mb-6 animated-item">{{ t('footer.newsletterTitle') }}</h3>
            
            <form @submit.prevent class="relative w-full max-w-sm mb-4 animated-item">
              <input 
                type="email" 
                :placeholder="t('footer.emailPlaceholder')" 
                class="w-full h-[64px] bg-[#1f1f1f] border border-white/10 rounded-full pl-6 pr-[120px] text-sm text-white placeholder-white/40 focus:outline-none focus:bg-[#2f2f2f] transition-colors"
              />
              <button 
                type="submit" 
                class="absolute right-2 top-2 bottom-2 bg-black text-white text-sm px-6 rounded-full font-medium hover:opacity-75 transition-opacity"
              >
                {{ t('footer.subscribe') }}
              </button>
            </form>
            
            <div class="text-xs text-white/40 flex items-center gap-2 animated-item">
              <span class="w-1.5 h-1.5 bg-white rounded-full inline-block shrink-0"></span>
              {{ t('footer.newsletterNote') }}
            </div>
          </div>
          
          <div class="mt-24 lg:mt-0 flex items-center gap-2 animated-item">
            <div class="text-[16px] font-bold text-white/30 font-sans">
              {{ t('footer.copyright') }}
            </div>
          </div>
        </div>

        <!-- Right Column -->
        <div class="flex flex-col gap-[50px] lg:pl-16">
          
          <!-- Links Grid (Top Half) -->
          <div>
            <ul class="space-y-3">
              <li v-for="link in pagesLinks" :key="link.name" class="animated-item">
                <NuxtLink :to="link.url" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
                    <span>{{ t(link.name) }}</span>
                  </div>
                </NuxtLink>
              </li>
            </ul>
          </div>

          <!-- Contact / Location / Social Grid (Bottom Half) -->
          <!-- Contacts Row -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
            <ul class="space-y-3">
              <li class="animated-item">
                <a href="mailto:chenchun@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
                    <span>chenchun@virtheart.com</span>
                  </div>
                </a>
              </li>
              <li class="animated-item">
                <span class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 transition-colors cursor-default" style="justify-content: flex-start;">
                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
                    <span>{{ t('footer.wechat') }}: LucskyNew</span>
                  </div>
                </span>
              </li>
            </ul>

            <ul class="space-y-3">
              <li class="animated-item">
                <a href="mailto:info@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
                    <span>info@virtheart.com</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>

          <!-- Address & Social Row -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 items-start">
            <div class="group flex items-start overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors animated-item cursor-default" style="justify-content: flex-start;">
              <div class="flex items-start transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
                <span class="mr-[10px] mt-[6px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
                <span class="leading-relaxed whitespace-pre-line">{{ t('footer.address') }}</span>
              </div>
            </div>

            <div class="flex gap-3 animated-item">
                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
                  <Icon name="ph:instagram-logo" class="w-4 h-4" />
                </a>
                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
                  <Icon name="pajamas:twitter-x" class="w-3.5 h-3.5" />
                </a>
                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
                  <Icon name="ph:diamond-fill" class="w-4 h-4" />
                </a>
              </div>
            </div>

        </div>
      </div>
    </div>
  </footer>
</template>
