// Select the form and add a submit event listener
document.getElementById('contactForm').addEventListener('submit', async function (e) {
    e.preventDefault(); // Prevent the default form submission behavior
  
    // Collect form data
    const name = document.getElementById('your_name').value.trim();
    const contactNumber = document.getElementById('your_contactno').value.trim();
    const email = document.getElementById('your_email').value.trim();
    const message = document.getElementById('your_message').value.trim();
  
    // API endpoint URL
    const apiUrl = 'https://trusted-travels11.onrender.com/api/contact';
  
    // Data to send to the API
    const payload = {
      name,
      contactNumber,
      email,
      message,
    };
  
    // Reference to the response message container
    const responseMessage = document.getElementById('responseMessage');
  
    try {
      // Call the API using fetch
      const response = await fetch(apiUrl, {
        method: 'POST', // HTTP method
        headers: {
          'Content-Type': 'application/json', // Specify the content type
        },
        body: JSON.stringify(payload), // Convert payload to JSON
      });
  
      if (response.ok) {
        // Handle success
        const result = await response.json();
        responseMessage.textContent = 'Your message has been sent successfully!';
        responseMessage.style.color = 'green';
  
        // Optionally reset the form
        document.getElementById('contactForm').reset();
      } else {
        // Handle server errors
        responseMessage.textContent = 'Failed to send your message. Please try again.';
        responseMessage.style.color = 'red';
      }
    } catch (error) {
      // Handle network or unexpected errors
      responseMessage.textContent = 'An error occurred while submitting your message.';
      responseMessage.style.color = 'red';
      console.error('Error:', error);
    }
  });