<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-16 relative overflow-hidden">
    <div class="container mx-auto px-4 relative z-10">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-10 md:mb-0">
          <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}>Gestion efficace de vos distributions de calendriers</h1>
          <p class="text-xl mb-8 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}>Une application puissante et intuitive pour optimiser vos tournées et améliorer votre productivité.</p>
          <div class="transition-all duration-700 delay-500" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
            <a href="#fonctionnalites" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg inline-block transition-colors"> Découvrir les fonctionnalités </a>
          </div>
        </div>

        <!-- Hero image/dashboard mockup -->
        <div class="md:w-1/2 transition-all duration-700 delay-700 relative flex justify-center md:justify-end" class:translate-x-0={isVisible} class:opacity-100={isVisible} class:translate-x-10={!isVisible} class:opacity-0={!isVisible}>
          <div class="relative w-full max-w-lg h-[400px] md:h-[500px] rounded-xl overflow-hidden border border-blue-300 shadow-2xl shadow-blue-500/20">
            <div class="absolute inset-0 flex items-center justify-center bg-white">
              <!-- Placeholder for dashboard screenshot -->
              <div class="text-center p-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
                <p class="text-gray-500">Dashboard Geosector</p>
                <p class="text-gray-400 text-sm mt-2">Interface de gestion</p>
              </div>
            </div>
          </div>

          <!-- Mobile mockup overlay -->
          <div class="absolute -bottom-4 -right-4 w-[150px] md:w-[200px] h-[300px] md:h-[400px] bg-white rounded-xl overflow-hidden border border-blue-300 shadow-xl">
            <div class="absolute inset-0 flex items-center justify-center">
              <!-- Placeholder for mobile app screenshot -->
              <div class="text-center p-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-200 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
                <p class="text-gray-500 text-xs">Mobile App</p>
                <p class="text-gray-400 text-xs mt-1">Interface mobile</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Avantages -->
  <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">Pourquoi choisir Geosector ?</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Optimisation des tournées</h3>
            <p class="text-gray-600 text-center">Grace au mode Terrain, Geosector aide le membre à traiter les adresses à finaliser proche de lui.</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Simplicité d'utilisation</h3>
            <p class="text-gray-600 text-center">Interface intuitive conçue pour faciliter la gestion quotidienne de vos distributions.</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" 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>
            </div>
            <h3 class="text-xl font-semibold text-center mb-2">Sécurité des données</h3>
            <p class="text-gray-600 text-center">Vos données sont protégées en conformité au RGPD et sauvegardées régulièrement.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Témoignages -->
  <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">Ce que nos clients disent</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="bg-white p-6 rounded-lg border border-gray-200">
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mr-4">
                <span class="text-blue-800 font-bold">TP</span>
              </div>
              <div>
                <h4 class="font-semibold">Trystan PAPIN</h4>
                <p class="text-gray-600 text-sm">Trésorier de l'amicale des SP du Malesherbois</p>
              </div>
            </div>
            <p class="text-gray-700 italic">"Bonjour, Je confirme l’utilisation de l’application Geosector pour l’amicale des SP de Malesherbes. Superbe application encore merci à vous !"</p>
          </div>

          <div class="bg-white p-6 rounded-lg border border-gray-200">
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mr-4">
                <span class="text-blue-800 font-bold">ML</span>
              </div>
              <div>
                <h4 class="font-semibold">Marie Leroy</h4>
                <p class="text-gray-600 text-sm">Responsable opérations, LogiExpress</p>
              </div>
            </div>
            <p class="text-gray-700 italic">"L'interface intuitive de Geosector nous a permis de former rapidement nos équipes. La visualisation en temps réel des tournées est un atout majeur pour notre activité quotidienne."</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
