---
import { ui, languages, defaultLang } from '../i18n/ui';

// Get current language from URL
const { pathname } = Astro.url;
// Extract the first path segment 
const pathSegments = pathname.split('/').filter(Boolean);
const langCode = pathSegments[0];
// Check if the first segment is a valid language code
const currentLang = langCode && Object.keys(languages).includes(langCode)
  ? langCode
  : defaultLang;

const t = ui[currentLang as keyof typeof ui];

const phone = t['phone'];
const currentYear = new Date().getFullYear();
---
<footer class="relative pt-16 pb-10 bg-gradient-to-b from-black-deep to-black-medium overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-[url('/assets/grid-pattern.svg')] opacity-5 pointer-events-none"></div>
  <div class="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/20 to-transparent pointer-events-none"></div>
  
  <div class="max-w-7xl mx-auto px-4">
    <!-- Top footer content -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12">
      <!-- Company info -->
      <div>
        <div class="flex items-center gap-3 mb-6">
          <div class="relative w-10 h-10 flex items-center justify-center shadow-lg">
            <img src="/Logo.png" alt="JPM Logo" class="h-8 w-8 object-contain" />
          </div>
          <span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
        </div>
        <p class="text-silver-light/70 text-sm max-w-xs mb-4">
          {t['footer.description']}
        </p>
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
          </svg>
          <span class="text-silver-light text-sm font-medium">{phone}</span>
        </div>
      </div>
      
      <!-- Quick links -->
      <div class="z-10 relative">
        <h3 class="text-silver-metallic font-medium mb-6">{t['footer.quicklinks']}</h3>
        <ul class="space-y-3 text-sm">
          <li><a href={`/${currentLang}/#services`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.services']}</a></li>
          <li><a href={`/${currentLang}/#about`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.about']}</a></li>
          <li><a href={`/${currentLang}/#testimonials`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.testimonials']}</a></li>
          <li><a href={`/${currentLang}/#contact`} class="text-silver-light/70 hover:text-silver-metallic transition-colors relative z-10 py-1 inline-block">{t['nav.contact']}</a></li>
        </ul>
      </div>
      
      <!-- Connect -->
      <div>
        <h3 class="text-silver-metallic font-medium mb-6">{t['footer.connect']}</h3>
        <div class="flex gap-3 mb-5">
          <a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22 5.9c-.7.3-1.5.5-2.4.6.9-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1-.8-.8-1.8-1.3-3-1.3-2.3 0-4.1 1.9-4.1 4.1 0 .3 0 .6.1.9-3.4-.2-6.5-1.8-8.5-4.3-.4.6-.6 1.3-.6 2.1 0 1.4.7 2.7 1.8 3.4-.7 0-1.3-.2-1.9-.5v.1c0 2 1.4 3.7 3.3 4.1-.3.1-.7.1-1.1.1-.3 0-.5 0-.8-.1.5 1.6 2 2.8 3.8 2.8-1.4 1.1-3.2 1.8-5.1 1.8-.3 0-.7 0-1-.1 1.8 1.2 4 1.8 6.3 1.8 7.5 0 11.7-6.3 11.7-11.7v-.5c.8-.6 1.5-1.3 2-2.1Z" />
            </svg>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20 2a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h16zm-4 7.25a.75.75 0 00-.75-.75h-2.5v-2.5a.75.75 0 00-.75-.75h-2a.75.75 0 00-.75.75v2.5h-2.5a.75.75 0 00-.75.75v2c0 .414.336.75.75.75h2.5v2.5c0 .414.336.75.75.75h2a.75.75 0 00.75-.75v-2.5h2.5a.75.75 0 00.75-.75v-2z" />
            </svg>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-silver-light/70 hover:text-accent-gold hover:border-accent-gold/50 transition-colors relative z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 8.25a.75.75 0 00-.75-.75h-7a.75.75 0 000 1.5h7a.75.75 0 00.75-.75zM15.25 11.75a.75.75 0 01-.75.75h-7a.75.75 0 010-1.5h7a.75.75 0 01.75.75zM14.5 15.25a.75.75 0 000-1.5h-7a.75.75 0 000 1.5h7z" />
              <path d="M7.75 21.5C6.785 21.5 6 20.715 6 19.75v-15.5C6 3.283 6.784 2.5 7.75 2.5h8.5c.967 0 1.75.783 1.75 1.75v15.5c0 .965-.785 1.75-1.75 1.75h-8.5zm0-1.5h8.5a.25.25 0 00.25-.25v-15.5a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25z" />
            </svg>
          </a>
        </div>
        <p class="text-silver-dark text-xs">
          {t['footer.social']}
        </p>
      </div>
    </div>
    
    <!-- Bottom footer content -->
    <div class="pt-6 border-t border-silver-dark/20 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="text-silver-dark text-xs flex items-center flex-wrap">
        <span>{t['footer.copyright'].replace('{year}', currentYear.toString())}</span>
        <span class="mx-2">•</span>
        <span>{t['footer.credits']} <a href="https://www.365devnet.eu" target="_blank" rel="noopener" class="text-silver-dark hover:text-silver-light transition-colors">365devnet</a></span>
      </div>
      <div class="flex gap-6">
        <a href={`/${currentLang}/privacy/`} class="text-silver-dark text-xs hover:text-silver-light transition-colors relative z-10 py-1 inline-block">{t['footer.privacy']}</a>
        <a href={`/${currentLang}/terms/`} class="text-silver-dark text-xs hover:text-silver-light transition-colors relative z-10 py-1 inline-block">{t['footer.terms']}</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // Fix for footer links
  document.addEventListener('DOMContentLoaded', function() {
    const footerLinks = document.querySelectorAll('footer a[href*="#"]');
    
    footerLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        const target = e.currentTarget as HTMLAnchorElement;
        const href = target.getAttribute('href');
        if (href && href.includes('#')) {
          const targetId = href.split('#')[1];
          const targetElement = document.getElementById(targetId);
          
          if (targetElement) {
            e.preventDefault();
            targetElement.scrollIntoView({ behavior: 'smooth' });
          }
        }
      });
    });
  });
</script> 