{% load i18n %}
  <!-- ══ CTA FINAL ══ -->
  <section class="s-cta-final" id="contact">
    <div class="deco deco-l">J</div>
    <div class="deco deco-r">L</div>
    <div class="section-inner">
      <h2 class="cta-final-h reveal">{% blocktrans %}Mieux voir. Mieux décider. Mieux agir.{% endblocktrans %}</h2>
      <p class="cta-final-sub reveal">{% blocktrans %}Découvrez comment l'intelligence artificielle, l'imagerie satellitaire, les drones et les opérations terrain de JooL peuvent transformer la gestion de vos exploitations agricoles.{% endblocktrans %}</p>

      <form id="contact-form" class="cta-form reveal" novalidate>
        {% csrf_token %}
        <div class="cta-fields">
          <input class="cta-input" type="text"  name="last_name"  placeholder="{% trans 'Nom' %}"           required>
          <input class="cta-input" type="text"  name="first_name" placeholder="{% trans 'Prénom' %}"        required>
          <input class="cta-input" type="email" name="email"      placeholder="{% trans 'Adresse email' %}" required>
          <div class="phone-wrap">
            <select id="phone-prefix" class="phone-select">
              <option value="+225">🇨🇮 +225</option>
              <option value="+223">🇲🇱 +223</option>
              <option value="+226">🇧🇫 +226</option>
              <option value="+227">🇳🇪 +227</option>
              <option value="+228">🇹🇬 +228</option>
              <option value="+229">🇧🇯 +229</option>
              <option value="+221">🇸🇳 +221</option>
              <option value="+224">🇬🇳 +224</option>
              <option value="+233">🇬🇭 +233</option>
              <option value="+234">🇳🇬 +234</option>
              <option value="+237">🇨🇲 +237</option>
              <option value="+243">🇨🇩 +243</option>
              <option value="+212">🇲🇦 +212</option>
              <option value="+216">🇹🇳 +216</option>
              <option value="+213">🇩🇿 +213</option>
              <option value="+33">🇫🇷 +33</option>
              <option value="+32">🇧🇪 +32</option>
              <option value="+1">🇺🇸 +1</option>
            </select>
            <input class="cta-input phone-number" type="tel" name="phone" id="phone-number" placeholder="{% trans 'Numéro' %}" inputmode="numeric">
          </div>
        </div>
        <textarea class="cta-input cta-textarea" name="message" placeholder="{% trans 'Votre demande…' %}" rows="4" required></textarea>
        <ul class="cta-errors" id="contact-errors" hidden></ul>
        <button class="btn-hero" type="submit" id="contact-btn">
          <span id="contact-btn-label">{% trans "Démarrer maintenant" %}</span>
          <span id="contact-btn-spinner" class="btn-spinner" hidden></span>
          <span id="contact-btn-icon" class="material-icons-round" style="font-size:18px;">arrow_forward</span>
        </button>
      </form>

      <div class="cta-success" id="contact-success">
        <span class="material-icons-round">check_circle</span>
        {% trans "Votre demande a bien été envoyée ! Nous vous répondrons très prochainement." %}
      </div>
    </div>
  </section>

  <style>
  .cta-input.field-error,
  .phone-wrap.field-error { border-color: #e53e3e !important; }
  .btn-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  </style>

  <script>
  (function () {
    const form    = document.getElementById('contact-form');
    const errors  = document.getElementById('contact-errors');
    const success = document.getElementById('contact-success');
    const btn     = document.getElementById('contact-btn');
    const label   = document.getElementById('contact-btn-label');
    const spinner = document.getElementById('contact-btn-spinner');
    const icon    = document.getElementById('contact-btn-icon');
    const url     = "{% url 'core:contact_ajax' %}";
    const msgSending = "{% trans 'Envoi en cours…' %}";
    const msgSend    = "{% trans 'Démarrer maintenant' %}";

    function setLoading(on) {
      btn.disabled      = on;
      spinner.hidden    = !on;
      icon.hidden       = on;
      label.textContent = on ? msgSending : msgSend;
      btn.style.opacity = on ? '.85' : '1';
    }

    form.addEventListener('submit', async function (e) {
      e.preventDefault();
      errors.hidden = true;
      errors.innerHTML = '';
      setLoading(true);

      const data = new FormData(form);
      const prefix = document.getElementById('phone-prefix').value;
      const number = document.getElementById('phone-number').value.trim();
      if (number) data.set('phone', prefix + ' ' + number);

      try {
        const res  = await fetch(url, {
          method: 'POST',
          headers: { 'X-CSRFToken': data.get('csrfmiddlewaretoken') },
          body: data,
        });
        const json = await res.json();

        if (json.ok) {
          form.style.display = 'none';
          success.classList.add('visible');
        } else {
          Object.keys(json.errors).forEach(field => {
            const el = form.querySelector('[name="' + field + '"]');
            if (!el) return;
            const target = field === 'phone' ? el.closest('.phone-wrap') : el;
            target.classList.add('field-error');
            el.addEventListener('input', function() {
              target.classList.remove('field-error');
            }, { once: true });
          });
          setLoading(false);
        }
      } catch (_) {
        const li = document.createElement('li');
        li.textContent = "{% trans 'Une erreur réseau est survenue. Veuillez réessayer.' %}";
        errors.appendChild(li);
        errors.hidden = false;
        setLoading(false);
      }
    });
  })();
  </script>