<script>
  // Fonction pour gérer la navigation et faire défiler la page vers le haut
  function handleNavigation(hash) {
    window.location.hash = hash;
    window.scrollTo(0, 0);
  }
</script>

<footer class="bg-gray-800 text-white py-8">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <div class="flex items-center mb-4">
          <img src="/images/icon-geosector.svg" alt="Geosector" class="h-8 mr-3" />
          <h3 class="text-xl font-bold">Geosector</h3>
        </div>
        <p class="text-gray-300 mb-6">Une application puissante et intuitive, pour une gestion efficace de vos distributions.</p>

        <div class="space-y-3">
          <p class="text-gray-300 font-semibold">Téléchargez notre application :</p>
          <div class="flex flex-wrap gap-3">
            <a href="https://apps.apple.com/store" class="inline-flex items-center bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700 transition-colors">
              <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M17.5615 12.5514C17.5615 9.17603 20.3113 7.76353 20.4318 7.69478C18.9985 5.58978 16.7857 5.29103 16.0032 5.26978C14.1546 5.07353 12.3675 6.34603 11.432 6.34603C10.4753 6.34603 9.0315 5.29103 7.4663 5.32103C5.4392 5.35103 3.5495 6.51978 2.5292 8.32603C0.4292 11.9997 2.0047 17.3989 4.0197 20.2014C5.029 21.5785 6.2018 23.1104 7.739 23.0483C9.2232 22.9768 9.769 22.0924 11.5667 22.0924C13.3432 22.0924 13.856 23.0483 15.4107 23.006C17.011 22.9768 18.0313 21.6318 19.01 20.2439C20.171 18.6273 20.6447 17.0429 20.666 16.9489C20.6235 16.9277 17.5933 15.7166 17.5615 12.5514Z"
                />
                <path d="M14.2855 3.77006C15.0787 2.80256 15.6037 1.48381 15.4407 0.144806C14.3157 0.187306 12.876 0.912306 12.0402 1.85856C11.295 2.69631 10.6542 4.06256 10.8385 5.35631C12.1002 5.44381 13.45 4.72381 14.2855 3.77006Z" />
              </svg>
              App Store
            </a>
            <a href="https://play.google.com/store" class="inline-flex items-center bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700 transition-colors">
              <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.5231 8.74664L14.4231 6.41914L2.33563 18.5066C2.52813 18.9391 2.91063 19.2826 3.40563 19.3441L17.5231 8.74664Z" />
                <path d="M22.0002 11.3651C22.0002 10.7066 21.6602 10.0988 21.0692 9.76762L18.6927 8.31262L15.3302 10.8338L19.0327 13.5388L21.0402 12.3666C21.6367 12.0363 22.0002 11.7313 22.0002 11.3651Z" />
                <path d="M2.00031 4.68721V19.3134C2.00031 19.6454 2.10531 19.9077 2.27406 20.1097L14.8628 7.52096L2.93156 0.572206C2.38406 0.906706 2.00031 1.71046 2.00031 2.59046V4.68721Z" />
                <path d="M14.4234 6.41895L14.7697 6.18945L3.81094 0.141445C3.55969 0.0294453 3.28469 -0.0145547 3.01719 0.00294531L14.4234 6.41895Z" />
              </svg>
              Play Store
            </a>
          </div>
        </div>
      </div>

      <div>
        <h3 class="text-xl font-bold mb-4">Liens rapides</h3>
        <ul class="space-y-2">
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <a href="#accueil" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('accueil')}>Accueil</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            <a href="#fonctionnalites" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('fonctionnalites')}>Fonctionnalités</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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="#contact" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('contact')}>Contact</a>
          </li>
          <li class="mt-4 pt-4 border-t border-gray-700"></li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <a href="#mentions-legales" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('mentions-legales')}>Mentions légales</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <a href="#politique-confidentialite" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('politique-confidentialite')}>Politique de confidentialité</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <a href="#conditions-utilisation" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('conditions-utilisation')}>Conditions d'utilisation</a>
          </li>
        </ul>
      </div>

      <div>
        <h3 class="text-xl font-bold mb-4">Contact</h3>
        <address class="not-italic text-gray-300">
          <p>Email: contactgeosector@gmail.com</p>
          <p>Téléphone: +33 (0)7 69 09 17 06</p>
        </address>
      </div>
    </div>

    <div class="border-t border-gray-700 mt-8 pt-8 text-gray-400">
      <div class="flex justify-between items-center">
        <p>&copy; {new Date().getFullYear()} Geosector. Tous droits réservés.</p>
        <a href="https://d6soft.fr" class="text-blue-400 hover:text-blue-300 font-medium transition-colors" target="_blank" rel="noopener noreferrer">Conception D6SOFT</a>
      </div>
    </div>
  </div>
</footer>
