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

  let isVisible = false;
  let formData = {
    nom: '',
    email: '',
    telephone: '',
    entreprise: '',
    message: '',
    newsletter: false,
  };
  let formSubmitted = false;

  function handleSubmit() {
    // Simuler l'envoi du formulaire
    formSubmitted = true;
    // Dans une application réelle, vous enverriez les données à un serveur ici
    console.log('Formulaire soumis:', formData);
  }

  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}>Contactez-nous</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}>Notre équipe est à votre disposition pour répondre à toutes vos questions et vous accompagner dans votre projet.</p>
      </div>
    </div>
  </section>

  <!-- Section Formulaire de contact -->
  <section class="py-16">
    <div class="container mx-auto px-4">
      <div class="max-w-5xl mx-auto">
        <div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <!-- Informations de contact -->
            <div>
              <h2 class="text-3xl font-bold mb-8">Nos coordonnées</h2>

              <div class="space-y-6">
                <div class="flex items-start">
                  <div class="bg-blue-100 rounded-full p-3 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                  </div>
                  <div>
                    <h3 class="font-semibold text-lg mb-1">Téléphone</h3>
                    <p class="text-gray-600">+33 (0)1 23 45 67 89</p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="bg-blue-100 rounded-full p-3 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="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>
                  </div>
                  <div>
                    <h3 class="font-semibold text-lg mb-1">Email</h3>
                    <p class="text-gray-600">contact@geosector.fr</p>
                  </div>
                </div>


                <div class="flex items-start">
                  <div class="bg-blue-100 rounded-full p-3 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div>
                    <h3 class="font-semibold text-lg mb-1">Horaires d'ouverture</h3>
                    <p class="text-gray-600">Lundi - Vendredi: 9h00 - 18h00<br />Samedi - Dimanche: Fermé</p>
                  </div>
                </div>
              </div>

              <div class="mt-10">
                <h3 class="font-semibold text-lg mb-4">Suivez-nous</h3>
                <div class="flex space-x-4">
                  <a href="https://facebook.com" aria-label="Suivez-nous sur Facebook" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path
                        d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
                      />
                    </svg>
                  </a>
                  <a href="https://twitter.com" aria-label="Suivez-nous sur Twitter" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                    </svg>
                  </a>
                  <a href="https://linkedin.com" aria-label="Suivez-nous sur LinkedIn" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>

            <!-- Formulaire de contact -->
            <div>
              <h2 class="text-3xl font-bold mb-8">Envoyez-nous un message</h2>

              {#if formSubmitted}
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                  <p class="font-semibold">Message envoyé avec succès !</p>
                  <p>Nous vous répondrons dans les plus brefs délais.</p>
                </div>
              {:else}
                <form on:submit|preventDefault={handleSubmit} class="space-y-6">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label for="nom" class="block text-gray-700 font-medium mb-2">Nom complet *</label>
                      <input type="text" id="nom" bind:value={formData.nom} required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
                    </div>

                    <div>
                      <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
                      <input type="email" id="email" bind:value={formData.email} required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
                    </div>
                  </div>

                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label for="telephone" class="block text-gray-700 font-medium mb-2">Téléphone</label>
                      <input type="tel" id="telephone" bind:value={formData.telephone} class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
                    </div>

                    <div>
                      <label for="entreprise" class="block text-gray-700 font-medium mb-2">Entreprise</label>
                      <input type="text" id="entreprise" bind:value={formData.entreprise} class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
                    </div>
                  </div>

                  <div>
                    <label for="message" class="block text-gray-700 font-medium mb-2">Message *</label>
                    <textarea id="message" bind:value={formData.message} required rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"></textarea>
                  </div>

                  <div class="flex items-center">
                    <input type="checkbox" id="newsletter" bind:checked={formData.newsletter} class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
                    <label for="newsletter" class="ml-2 block text-gray-700"> Je souhaite recevoir la newsletter et les actualités de Geosector </label>
                  </div>

                  <div>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"> Envoyer le message </button>
                  </div>
                </form>
              {/if}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



  <!-- Section FAQ -->
  <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">Questions fréquentes</h2>

        <div class="max-w-3xl mx-auto space-y-6">
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold mb-2">Comment puis-je obtenir une démonstration de Geosector ?</h3>
            <p class="text-gray-600">Vous pouvez demander une démonstration en remplissant le formulaire de contact ci-dessus ou en nous appelant directement. Un de nos conseillers vous contactera pour organiser une session personnalisée.</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold mb-2">Combien de temps dure la période d'essai ?</h3>
            <p class="text-gray-600">Nous proposons une période d'essai gratuite de 14 jours avec toutes les fonctionnalités disponibles. Aucune carte de crédit n'est requise pour commencer votre essai.</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold mb-2">Proposez-vous des formations pour utiliser votre logiciel ?</h3>
            <p class="text-gray-600">Oui, nous proposons des sessions de formation complètes pour vous aider à tirer le meilleur parti de Geosector. Ces formations peuvent être réalisées en ligne ou dans vos locaux selon vos préférences.</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold mb-2">Quels types de support technique proposez-vous ?</h3>
            <p class="text-gray-600">Nous offrons un support technique par email, téléphone et chat en direct pendant les heures de bureau. Nos clients avec des forfaits premium bénéficient d'un support 24/7.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
