src/components/Footer.astro

---
import { getLangFromUrl, useTranslations, languages } from '../i18n/ui';
import { MapPin, Phone, Mail, MessageCircle, Facebook, Instagram, Linkedin } from 'lucide-astro';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<footer class="bg-blueprint-primary dark:bg-slate-900 text-white">
  <!-- Main Footer Content -->
  <div class="section-padding border-b border-blueprint-accent/20">
    <div class="container-custom">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Company Info -->
        <div class="lg:col-span-2">
          <div class="flex items-center mb-6">
            <img src="/logo.jpg" alt="Blueprint Engineering Consultancy Logo" class="h-20 w-auto" />
          </div>
          
          <p class="text-blueprint-light leading-relaxed mb-6 max-w-md">
            {t('footer.description')}
          </p>

          <!-- Social Media Links -->
          <div class="flex space-x-4 rtl:space-x-reverse">
            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
              <Facebook class="w-5 h-5" />
            </a>
            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
              <Instagram class="w-5 h-5" />
            </a>
            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
              <Linkedin class="w-5 h-5" />
            </a>
          </div>
        </div>

        <!-- Quick Links -->
        <div>
          <h4 class="text-xl font-bold mb-6 text-blueprint-accent">
            {t('footer.quick_links')}
          </h4>
          <ul class="space-y-3">
            <li>
              <a href="#about" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
                {t('nav.about')}
              </a>
            </li>
            <li>
              <a href="#services" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
                {t('nav.services')}
              </a>
            </li>
            <li>
              <a href="#workflow" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
                {t('nav.workflow')}
              </a>
            </li>
            <li>
              <a href="#contact" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
                {t('nav.contact')}
              </a>
            </li>
          </ul>
        </div>

        <!-- Contact Info -->
        <div>
          <h4 class="text-xl font-bold mb-6 text-blueprint-accent">
            {t('footer.contact_info')}
          </h4>
          <ul class="space-y-4">
            <li class="flex items-start space-x-3 rtl:space-x-reverse">
              <MapPin class="w-5 h-5 text-blueprint-accent mt-1 flex-shrink-0" />
              <div class="text-blueprint-light text-sm" set:html={t('contact.address.text')}></div>
            </li>
            <li class="flex items-center space-x-3 rtl:space-x-reverse">
              <Phone class="w-5 h-5 text-blueprint-accent flex-shrink-0" />
              <a href="tel:+971501611234" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
                +971 50 161 1234
              </a>
            </li>
            <li class="flex items-center space-x-3 rtl:space-x-reverse">
              <Mail class="w-5 h-5 text-blueprint-accent flex-shrink-0" />
              <a href="mailto:blueprintrak@gmail.com" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 break-all">
                blueprintrak@gmail.com
              </a>
            </li>
          </ul>

          <!-- WhatsApp CTA -->
          <div class="mt-6">
            <a 
              href="https://wa.me/971501611234" 
              target="_blank"
              class="inline-flex items-center bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-300"
            >
              <MessageCircle class="w-4 h-4 mr-2" />
              {t('footer.whatsapp')}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom Footer -->
  <div class="py-6">
    <div class="container-custom">
      <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
        <div class="text-sm text-blueprint-light">
          © <span id="current-year"></span> {t('footer.rights')}
        </div>
        
        <!-- Language Selector in Footer -->
        <div class="flex items-center space-x-2 rtl:space-x-reverse text-sm">
          <span class="text-blueprint-light">{t('footer.language')}</span>
          <select 
            class="bg-blueprint-primary border border-blueprint-accent/30 text-white rounded px-2 py-1 text-sm"
            data-footer-language-selector
          >
            {Object.entries(languages).map(([code, name]) => (
              <option value={code} selected={code === lang}>
                {name}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  </div>
</footer>

<!-- WhatsApp Floating Button -->
<div class="fixed bottom-6 right-6 z-50" data-aos="zoom-in" data-aos-delay="1000">
  <a 
    href="https://wa.me/971501611234?text=مرحباً، أريد استشارة هندسية" 
    target="_blank"
    class="flex items-center justify-center w-14 h-14 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 animate-bounce-slow"
    title={lang === 'ar' ? 'تواصل عبر واتساب' : 'Contact via WhatsApp'}
  >
    <MessageCircle class="w-6 h-6" />
  </a>
</div>

<script>
  // Set current year dynamically
  document.addEventListener('DOMContentLoaded', () => {
    const currentYearElement = document.getElementById('current-year');
    if (currentYearElement) {
      currentYearElement.textContent = new Date().getFullYear().toString();
    }
  });

  // Footer language selector
  const footerLanguageSelector = document.querySelector('[data-footer-language-selector]') as HTMLSelectElement;
  
  if (footerLanguageSelector) {
    footerLanguageSelector.addEventListener('change', (e) => {
      const selectedLang = (e.target as HTMLSelectElement).value;
      const currentPath = window.location.pathname;
      
      let newPath;
      if (selectedLang === 'ar') {
        // Going to Arabic (default) - remove /en prefix
        newPath = currentPath === '/en' || currentPath === '/en/' ? '/' : currentPath.replace('/en', '') || '/';
      } else {
        // Going to English - add /en prefix
        newPath = currentPath === '/' ? '/en' : `/en${currentPath}`;
      }
      
      window.location.href = newPath;
    });
  }
</script>