<?php
$l = $lang ?? 'fr';
$prefix = "/{$l}";
$actBase = $l === 'fr' ? '/fr/activites' : '/en/activities';
?>

<style>

.site-footer {
  padding-top: 4rem !important;
  padding-bottom: 2rem !important;
  background-color: #141414 !important;
}


.footer-grid {
  display: grid !important;
  align-items: flex-start !important; 
  gap: 2.5rem !important;
}

@media (min-width: 992px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr !important;
  }
}

.footer-brand,
.footer-col {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.footer-heading {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.2 !important;
  padding-top: 0 !important;
}


.footer-logo {
  display: block !important;
  width: 240px !important;   
  height: auto !important;
  margin-top: -6px !important; 
  margin-bottom: 1.5rem !important; 
  padding: 0 !important;
}

.footer-logo img {
  display: block !important;
  width: 100% !important;    
  height: auto !important;   
  margin: 0 !important;
}

.footer-tagline {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.footer-desc {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

.footer-social {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-top: 1rem !important;
}

.footer-social .social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.footer-social .social-link:hover {
  background: #FFCE00 !important;
  color: #141414 !important;
}

.footer-social .social-link[aria-label="YouTube"]:hover svg polygon {
  fill: #FFCE00 !important;
}
</style>

<footer class="site-footer" role="contentinfo">

  <!-- Footer top -->
  <div class="footer-top">
    <div class="container footer-grid">

      <!-- Brand (Colonne Logo & Description) -->
      <div class="footer-brand">
        <a href="<?= $prefix ?>/" class="footer-logo">
          <img src="/assets/images/logo-quaadra.png" alt="QUAADRAA logo">
        </a>
        <p class="footer-tagline"><?= $t('footer.tagline') ?></p>
        <p class="footer-desc">
          <?= $l === 'fr'
            ? 'Groupe international regroupant innovation, communication et stimulation de la croissance en Afrique.'
            : 'An international group combining innovation, communication and growth stimulation in Africa.' ?>
        </p>
        
        <!-- Social -->
        <div class="footer-social">
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="Facebook">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="Twitter / X">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="YouTube">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.97C18.88 4 12 4 12 4s-6.88 0-8.59.45A2.78 2.78 0 001.46 6.42 29 29 0 001 12a29 29 0 00.46 5.58 2.78 2.78 0 001.95 1.97C5.12 20 12 20 12 20s6.88 0 8.59-.45a2.78 2.78 0 001.95-1.47A29 29 0 0023 12a29 29 0 00-.46-5.58z"/><polygon fill="currentColor" points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></svg>
          </a>
          <a href="https://wa.me/22890049901" class="social-link" aria-label="WhatsApp" target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.003 5.324 5.328 0 11.94 0c3.205.002 6.216 1.248 8.48 3.515A11.826 11.826 0 0 1 24 11.892c-.004 6.566-5.33 11.89-11.942 11.89-2.004-.001-3.974-.5-5.729-1.445L0 24zm6.59-4.846c1.665.988 3.307 1.503 5.34 1.505 5.517 0 10.005-4.48 10.008-9.96.002-2.657-1.033-5.155-2.914-7.036A9.925 9.925 0 0 0 11.941 1.99c-5.524 0-10.01 4.48-10.012 9.961-.001 2.014.52 3.66 1.483 5.291L1.43 22.509l5.217-1.355zM17.5 14.25c-.3-.15-1.785-.88-2.06-.98-.28-.1-.48-.15-.68.15-.2.3-.77.98-.95 1.18-.18.2-.35.23-.65.08-1.02-.52-1.79-1.01-2.5-1.63-.53-.46-.88-1.02-1.03-1.32-.15-.3-.02-.46.13-.61.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.07-.15-.68-1.63-.93-2.24-.25-.6-.5-.52-.68-.53-.17-.01-.38-.01-.58-.01-.2 0-.53.08-.8.38-.28.3-1.08 1.05-1.08 2.57 0 1.52 1.1 2.98 1.25 3.18.15.2 2.15 3.29 5.22 4.61.73.31 1.3.5 1.74.64.74.23 1.4.2 1.93.12.59-.09 1.785-.73 2.035-1.43.25-.69.25-1.29.18-1.42-.08-.13-.25-.21-.55-.36z"/></svg>
          </a>
        </div>
      </div>

      <!-- Navigation -->
      <div class="footer-col">
        <h3 class="footer-heading"><?= $t('nav.group') ?></h3>
        <ul class="footer-links">
          <li><a href="<?= $prefix . ($l === 'fr' ? '/qui-sommes-nous' : '/about') ?>"><?= $t('nav.about') ?></a></li>
          <li><a href="<?= $prefix ?>/vision"><?= $t('nav.vision') ?></a></li>
          <li><a href="<?= $prefix . ($l === 'fr' ? '/actualites' : '/news') ?>"><?= $t('nav.news') ?></a></li>
          <li><a href="<?= $prefix ?>/contact"><?= $t('nav.contact') ?></a></li>
        </ul>
      </div>

      <!-- Pôles -->
      <div class="footer-col">
        <h3 class="footer-heading"><?= $t('nav.activities') ?></h3>
        <ul class="footer-links">
          <?php
          $poles = ['communication','medias','telecoms','divertissement','industrie'];
          foreach ($poles as $pole): ?>
          <li><a href="<?= $actBase ?>/<?= $pole ?>"><?= $t("poles.{$pole}") ?></a></li>
          <?php endforeach; ?>
        </ul>
      </div>

      <!-- Contact -->
      <div class="footer-col">
        <h3 class="footer-heading"><?= $t('nav.contact') ?></h3>
        <address class="footer-address">
          <p>
            <strong>Immeuble Tata Park</strong><br>
            Qt Attiegou 15 BP 263<br>
            <a href="tel:+22890044212">+228 90 04 42 12</a>
          </p>
          <p>
            <strong>Dubai, <?= $l === 'fr' ? 'EAU' : 'UAE' ?></strong><br>
            Nassima Tower, 4th floor<br>
            Sheikh Zayed Road
          </p>
          <p>
            <a href="mailto:quaadraafrica@quaadra.com">quaadraafrica@quaadra.com</a>
          </p>
        </address>
      </div>

    </div>
  </div>
  <div class="footer-bottom">
    <div class="container footer-bottom-inner">
      <p><?= str_replace('{{year}}', date('Y'), $t('footer.rights')) ?></p>
      <div class="footer-legal-links">
        <a href="<?= $prefix ?>/mentions-legales"><?= $t('footer.legal') ?></a>
        <a href="<?= $prefix ?>/confidentialite"><?= $t('footer.privacy') ?></a>
      </div>
    </div>
  </div>

</footer>