---
import { getLangFromUrl, useTranslations } from '../i18n/utils';

const currentYear = new Date().getFullYear();
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<footer class="bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 text-neutral-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Main Footer Content -->
    <div class="py-12 md:py-16">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 md:gap-12">
        <!-- Brand Section -->
        <div class="lg:col-span-2">
          <a href={lang === 'en' ? '/' : `/${lang}/`} class="inline-block mb-6">
            <h3 class="text-3xl font-bold text-primary-500 hover:text-primary-400 transition-colors">Lurmix</h3>
          </a>
          <p class="text-neutral-400 leading-relaxed mb-6 max-w-sm">
            {t('footer.description')}
          </p>
          <!-- Social Links -->
          <div class="flex gap-4">
            <a href="#" class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center hover:bg-primary-600 hover:scale-110 transition-all" aria-label="Twitter">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
            </a>
            <a href="#" class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center hover:bg-primary-600 hover:scale-110 transition-all" aria-label="LinkedIn">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
            </a>
            <a href="#" class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center hover:bg-primary-600 hover:scale-110 transition-all" aria-label="YouTube">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
            </a>
          </div>
        </div>

        <!-- Products Links -->
        <div>
          <h4 class="text-white font-bold text-sm uppercase tracking-wider mb-4">{t('footer.productsTitle')}</h4>
          <ul class="space-y-3">
            <li><a href={lang === 'en' ? '/products/plush' : `/${lang}/products/plush`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('products.plush')}</a></li>
            <li><a href={lang === 'en' ? '/products/figure' : `/${lang}/products/figure`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('products.figure')}</a></li>
            <li><a href={lang === 'en' ? '/products/badge' : `/${lang}/products/badge`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('products.badge')}</a></li>
            <li><a href={lang === 'en' ? '/products/companion' : `/${lang}/products/companion`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('products.companion')}</a></li>
          </ul>
        </div>

        <!-- Company Links -->
        <div>
          <h4 class="text-white font-bold text-sm uppercase tracking-wider mb-4">{t('footer.companyTitle')}</h4>
          <ul class="space-y-3">
            <li><a href={lang === 'en' ? '/about' : `/${lang}/about`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('footer.aboutUs')}</a></li>
            <li><a href={lang === 'en' ? '/custom' : `/${lang}/custom`} class="text-neutral-400 hover:text-primary-500 transition-colors text-sm">{t('footer.customDev')}</a></li>
          </ul>
        </div>

        <!-- Contact Info -->
        <div>
          <h4 class="text-white font-bold text-sm uppercase tracking-wider mb-4">{t('common.contact') || 'Contact'}</h4>
          <ul class="space-y-3 text-sm">
            <li class="flex items-start gap-2">
              <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
              <a href="mailto:contact@lurmix.com" class="text-neutral-400 hover:text-primary-500 transition-colors">contact@lurmix.com</a>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
              </svg>
              <a href="tel:+8618407564406" class="text-neutral-400 hover:text-primary-500 transition-colors">+86 184-0756-4406</a>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              <span class="text-neutral-400">Singapore | Hong Kong | Shenzhen</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-neutral-800 py-6">
      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
        <p class="text-sm text-neutral-500">
          &copy; {currentYear} Lurmix. {t('footer.copyright')}
        </p>
        <div class="flex gap-6 text-sm">
          <a href="#" class="text-neutral-500 hover:text-primary-500 transition-colors">Privacy Policy</a>
          <a href="#" class="text-neutral-500 hover:text-primary-500 transition-colors">Terms of Service</a>
          <a href="#" class="text-neutral-500 hover:text-primary-500 transition-colors">Cookie Policy</a>
        </div>
      </div>
    </div>
  </div>
</footer>