---
import Layout from '../components/Layout.astro';

// Environment variables with PUBLIC_ prefix
const ntfyUrl = import.meta.env.PUBLIC_NTFY_URL;
---

<Layout title="Contact">
  <h1>Contact Us</h1>
  <div class="contact-info-section">
    <h2>Our Team</h2>
    <p><strong>Phone:</strong> (559) 888-7079</p>
    <p><strong>Email:</strong> <a href="mailto:contact@juchatz.com">contact@juchatz.com</a></p>
    <p>Feel free to reach out with any questions or inquiries about our services. We're here to help you with all your technical needs.</p>
  </div>
  
  <div class="contact-form-container">
    <h2>Send Us a Message</h2>
    <form id="contactForm" class="contact-form">
      <div class="form-group">
        <label for="name">Your Name</label>
        <input type="text" id="name" name="name" required>
      </div>
      
      <div class="form-group">
        <label for="email">Your Email</label>
        <input type="email" id="email" name="email" required>
      </div>
      
      <div class="form-group">
        <label for="phone">Your Phone Number</label>
        <input type="tel" id="phone" name="phone">
      </div>
      
      <!-- Honeypot field - bots will fill this, humans won't see it -->
      <div class="honeypot">
        <label for="website">Website (leave blank)</label>
        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
      </div>
      
      <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject" required>
      </div>
      
      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="6" required></textarea>
      </div>
      
      <button type="submit" class="submit-button">Send Message</button>
    </form>
    <div id="formStatus" class="form-status"></div>
  </div>
</Layout>

<style>
  .honeypot {
    position: absolute !important;
    left: -5000px !important;
    top: -5000px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contactForm');
    const formStatus = document.getElementById('formStatus');
    
    contactForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const phone = document.getElementById('phone').value;
      const subject = document.getElementById('subject').value;
      const message = document.getElementById('message').value;
      const website = document.getElementById('website').value; // honeypot
      
      formStatus.innerHTML = "<p>Sending your message...</p>";
      formStatus.className = "form-status sending";
      
      try {
        const response = await fetch('/api/send-message', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            name,
            email,
            phone,
            subject,
            message,
            website // Include honeypot in submission
          })
        });
        
        if (response.ok) {
          const result = await response.json();
          const successMessage = result.message || 'Message sent successfully! We\'ll get back to you soon.';
          formStatus.innerHTML = `<p>${successMessage}</p>`;
          formStatus.className = "form-status success";
          contactForm.reset();
        } else if (response.status === 429) {
          formStatus.innerHTML = "<p>Please wait a few minutes before submitting another message.</p>";
          formStatus.className = "form-status error";
        } else {
          let result;
          try {
            result = await response.json();
          } catch (e) {
            result = { error: 'Could not send message. Please try again.' };
          }
          
          formStatus.innerHTML = `<p>${result.error || 'Could not send message. Please try again.'}</p>`;
          formStatus.className = "form-status error";
        }
      } catch (error) {
        console.error('Form submission error:', error);
        formStatus.innerHTML = `<p>Error: Could not send message. Please try again later.</p>`;
        formStatus.className = "form-status error";
      }
    });
  });
</script>
