<footer class="pub-footer" id="coords">
  <div class="fwrap">
    <div class="foot-info">
      <h3 class="foot-h">Nous contacter</h3>
      <p><%= content.contact_address || 'Boulevard Millénium — Oran' %></p>
      <p>
        <% if (content.contact_phone1) { %><a href="tel:<%= content.contact_phone1 %>"><%= content.contact_phone1 %></a><% } %>
        <% if (content.contact_phone2) { %> · <a href="tel:<%= content.contact_phone2 %>"><%= content.contact_phone2 %></a><% } %>
      </p>
      <p><% if (content.contact_email) { %><a href="mailto:<%= content.contact_email %>"><%= content.contact_email %></a><% } %></p>
      <% if (content.contact_hours) { %><p class="foot-muted"><%= content.contact_hours %></p><% } %>
    </div>
    <div class="foot-actions">
      <button type="button" class="btn" onclick="document.getElementById('formModal').classList.add('open')">Remplir le formulaire</button>
    </div>
  </div>
  <div class="foot-copy">© <%= new Date().getFullYear() %> Benammar Promotion — Oran</div>

  <div class="signature">
    <span class="sig-rule"></span>
    <span class="sig">
      <span class="sig-mark"><i>RF</i></span>
      <span class="sig-txt"><em>Powered by</em><b>RF</b></span>
    </span>
    <span class="sig-rule"></span>
  </div>
</footer>

<div class="modal-overlay" id="formModal" role="dialog" aria-modal="true" aria-label="Formulaire de contact">
  <div class="modal-box">
    <button type="button" class="modal-x" onclick="document.getElementById('formModal').classList.remove('open')" aria-label="Fermer">✕</button>
    <h3>Votre demande</h3>
    <form id="pform" novalidate>
      <input type="text" id="p_nom" placeholder="Nom complet" required>
      <input type="email" id="p_email" placeholder="Email" required>
      <input type="tel" id="p_tel" placeholder="Téléphone">
      <textarea id="p_msg" placeholder="Votre message" rows="4" required></textarea>
      <button type="submit" class="btn solid">Envoyer ma demande</button>
      <p class="pform-done" id="pdone" style="display:none">Merci, votre demande est bien reçue. Nous revenons vers vous très vite.</p>
    </form>
  </div>
</div>
<script>
(function(){
  var f=document.getElementById('pform'); if(!f) return;
  f.addEventListener('submit',async function(e){
    e.preventDefault();
    if(!f.checkValidity()){f.reportValidity();return;}
    var payload={sujet:'Contact',nom:document.getElementById('p_nom').value,email:document.getElementById('p_email').value,telephone:document.getElementById('p_tel').value,message:document.getElementById('p_msg').value};
    try{var r=await fetch('/api/contact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});if(r&&!r.ok)throw 0;}catch(_){}
    document.getElementById('pdone').style.display='block';
    f.querySelectorAll('input,textarea').forEach(function(i){i.value='';});
    f.querySelector('button[type=submit]').style.display='none';
  });
  var ov=document.getElementById('formModal');
  ov.addEventListener('click',function(e){ if(e.target===ov) ov.classList.remove('open'); });
  document.addEventListener('keydown',function(e){ if(e.key==='Escape') ov.classList.remove('open'); });
})();
</script>
