<script>
  import { onMount } from 'svelte';

  let isVisible = false;

  onMount(() => {
    isVisible = true;
  });
</script>

<div class="min-h-screen relative">
  <!-- Section Hero -->
  <section class="text-white py-12 relative">
    <div class="container mx-auto px-4">
      <div class="text-center">
        <h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Fonctionnalités</h1>
        <p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Découvrez les outils puissants qui font de Geosector la solution idéale pour la gestion de vos distributions.</p>
      </div>
    </div>
  </section>

  <!-- Section Fonctionnalités Principales -->
  <section class="py-16">
    <div class="container mx-auto px-4">
      <div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
        <h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités principales</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
          <!-- Fonctionnalité 1 -->
          <div class="flex flex-col md:flex-row items-start">
            <div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
              </svg>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-2">Cartographie avancée</h3>
              <p class="text-gray-600 mb-4">Visualisez vos tournées sur des cartes interactives avec des données en temps réel sur le trafic et les conditions météorologiques.</p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Cartes détaillées avec points d'intérêt</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Suivi GPS en temps réel</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Alertes de trafic et d'incidents</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- Fonctionnalité 2 -->
          <div class="flex flex-col md:flex-row items-start">
            <div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-2">Optimisation des itinéraires</h3>
              <p class="text-gray-600 mb-4">Nos algorithmes avancés calculent les itinéraires les plus efficaces en tenant compte de multiples facteurs.</p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Réduction des coûts de carburant jusqu'à 30%</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Prise en compte des contraintes horaires</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Adaptation dynamique aux conditions réelles</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- Fonctionnalité 3 -->
          <div class="flex flex-col md:flex-row items-start">
            <div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-2">Planification intelligente</h3>
              <p class="text-gray-600 mb-4">Planifiez vos tournées à l'avance et adaptez-les facilement en fonction des imprévus.</p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Calendrier interactif avec vue mensuelle/hebdomadaire/quotidienne</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Gestion des priorités et des urgences</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Notifications automatiques pour les changements</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- Fonctionnalité 4 -->
          <div class="flex flex-col md:flex-row items-start">
            <div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-2">Rapports et analyses</h3>
              <p class="text-gray-600 mb-4">Obtenez des insights précieux sur vos opérations grâce à nos outils d'analyse avancés.</p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Tableaux de bord personnalisables</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Exportation des données en plusieurs formats</span>
                </li>
                <li class="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span>Indicateurs de performance clés (KPIs)</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Fonctionnalités Mobile -->
  <section class="py-16">
    <div class="container mx-auto px-4">
      <div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
        <h2 class="text-3xl font-bold text-center mb-12">Application mobile</h2>

        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
            <h3 class="text-2xl font-semibold mb-4">Emportez Geosector partout avec vous</h3>
            <p class="text-gray-600 mb-6">Notre application mobile offre toutes les fonctionnalités essentielles pour gérer vos distributions en déplacement.</p>

            <div class="space-y-4">
              <div class="flex items-start">
                <div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                  </svg>
                </div>
                <div>
                  <h4 class="font-semibold">Interface adaptée aux mobiles</h4>
                  <p class="text-gray-600">Expérience utilisateur optimisée pour les écrans tactiles et la navigation mobile.</p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <div>
                  <h4 class="font-semibold">Mode hors ligne</h4>
                  <p class="text-gray-600">Continuez à travailler même sans connexion internet, avec synchronisation automatique.</p>
                </div>
              </div>

              <div class="flex items-start">
                <div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                  </svg>
                </div>
                <div>
                  <h4 class="font-semibold">Notifications push</h4>
                  <p class="text-gray-600">Restez informé des changements importants et des mises à jour en temps réel.</p>
                </div>
              </div>
            </div>

            <div class="mt-8 flex space-x-4">
              <a href="/" class="inline-block">
                <img src="https://via.placeholder.com/150x50?text=App+Store" alt="Télécharger sur l'App Store" class="h-12" />
              </a>
              <a href="/" class="inline-block">
                <img src="https://via.placeholder.com/150x50?text=Play+Store" alt="Télécharger sur Google Play" class="h-12" />
              </a>
            </div>
          </div>

          <div class="md:w-1/2">
            <div class="bg-white p-4 rounded-xl shadow-xl max-w-xs mx-auto">
              <img src="https://via.placeholder.com/300x600?text=App+Screenshot" alt="Capture d'écran de l'application mobile" class="rounded-lg" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section CTA -->
  <section class="py-16 text-white">
    <div class="container mx-auto px-4 text-center">
      <div class="bg-blue-900 bg-opacity-90 backdrop-blur-sm rounded-lg p-8 shadow-lg">
        <h2 class="text-3xl font-bold mb-6">Prêt à optimiser vos distributions ?</h2>
        <p class="text-xl mb-8 max-w-3xl mx-auto">Rejoignez les milliers d'entreprises qui font confiance à Geosector pour améliorer leur efficacité opérationnelle.</p>
        <a href="#contact" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg inline-block transition-colors text-lg"> Demander une démo </a>
      </div>
    </div>
  </section>
</div>
