document.addEventListener("DOMContentLoaded", function () {
  const btnContacto = document.querySelector('.btn.contacto');
  const modal = document.getElementById('formulario-modal');
  const btnCerrar = document.getElementById('cerrar-modal');

  const titulo = modal.querySelector('.titulo-form');
  const form = document.getElementById('form-contacto');
  const mensaje = document.getElementById('mensaje-agradecimiento');

  if (btnContacto && modal && btnCerrar && form && mensaje) {
    btnContacto.addEventListener('click', function () {
      titulo.style.display = 'block';
      form.style.display = 'block';
      mensaje.style.display = 'none';
      modal.style.display = 'flex';
    });

    btnCerrar.addEventListener('click', function () {
      modal.style.display = 'none';
    });

    modal.addEventListener('click', function (e) {
      if (e.target === modal) {
        modal.style.display = 'none';
      }
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault(); 

      titulo.style.display = 'none';
      form.style.display = 'none';
      mensaje.style.display = 'block';
    });
  }
});
