---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Contact">

  <!-- Hero -->
  <section class="bg-navy py-16 px-6 text-center text-white">
    <h1 class="text-4xl font-extrabold mb-3">
      Nous <span class="text-fluo">contacter</span>
    </h1>
    <p class="text-gray-300 text-lg max-w-xl mx-auto">
      Une question ? Un rendez-vous à fixer ? Écrivez-nous, nous vous répondons sous 24h.
    </p>
  </section>

  <!-- Formulaire + Infos -->
  <section class="py-16 px-6 max-w-5xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">

      <!-- Formulaire -->
      <div>
        <h2 class="text-2xl font-bold text-navy mb-6">Envoyez-nous un message</h2>
        <form class="space-y-5" x-data="{ sent: false }" @submit.prevent="sent = true">

          <div>
            <label class="block text-sm font-semibold text-navy mb-1" for="nom">Votre nom</label>
            <input
              id="nom" name="nom" type="text" required
              placeholder="Jean Dupont"
              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-navy transition-colors"
            />
          </div>

          <div>
            <label class="block text-sm font-semibold text-navy mb-1" for="email">Email</label>
            <input
              id="email" name="email" type="email" required
              placeholder="jean@exemple.fr"
              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-navy transition-colors"
            />
          </div>

          <div>
            <label class="block text-sm font-semibold text-navy mb-1" for="chien">Race / âge de votre chien</label>
            <input
              id="chien" name="chien" type="text"
              placeholder="Labrador, 2 ans"
              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-navy transition-colors"
            />
          </div>

          <div>
            <label class="block text-sm font-semibold text-navy mb-1" for="message">Votre message</label>
            <textarea
              id="message" name="message" rows="5" required
              placeholder="Décrivez le comportement de votre chien..."
              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-navy transition-colors resize-none"
            ></textarea>
          </div>

          <div x-show="!sent">
            <button
              type="submit"
              class="w-full bg-fluo text-navy font-bold py-3 rounded-xl text-lg hover:bg-fluo-dark transition-colors duration-200">
              Envoyer le message
            </button>
          </div>
          <div x-show="sent" class="bg-green-50 border-2 border-fluo rounded-xl p-4 text-center text-navy font-semibold">
            ✅ Message envoyé ! Nous vous répondrons très bientôt.
          </div>

        </form>
      </div>

      <!-- Infos de contact -->
      <div class="space-y-8">
        <h2 class="text-2xl font-bold text-navy mb-6">Informations</h2>

        <div class="flex items-start gap-4">
          <div class="bg-navy text-fluo rounded-xl p-3 text-2xl">📞</div>
          <div>
            <p class="font-bold text-navy">Téléphone</p>
            <p class="text-gray-600">Disponible sur rendez-vous</p>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="bg-navy text-fluo rounded-xl p-3 text-2xl">📍</div>
          <div>
            <p class="font-bold text-navy">Secteur d'intervention</p>
            <p class="text-gray-600">Formations sur place — nous venons chez vous</p>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="bg-navy text-fluo rounded-xl p-3 text-2xl">⏰</div>
          <div>
            <p class="font-bold text-navy">Disponibilités</p>
            <p class="text-gray-600">Lundi – Samedi, 9h – 18h</p>
          </div>
        </div>

        <div class="bg-navy rounded-2xl p-6 text-white">
          <p class="text-fluo font-bold text-lg mb-2">Premier contact gratuit</p>
          <p class="text-gray-300 text-sm">
            Chaque suivi commence par un échange sans engagement pour évaluer les besoins de votre chien.
          </p>
        </div>

      </div>
    </div>
  </section>

</Layout>