---
// src/pages/contact.astro
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const title = "Contact | ArgoBox";
const description = "Get in touch with ArgoBox. Send a message using the contact form.";
---

<BaseLayout {title} {description}>
  <Header slot="header" />

  <main class="contact-page container">
    <section class="contact-form-section">
      <h1>Contact Us</h1>
      <p>Have a question, suggestion, or just want to say hello? Fill out the form below.</p>

      <form id="contact-form" class="contact-form">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required />
        </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="btn btn-primary" id="submit-button">
          Send Message
        </button>
        <div id="form-status" class="form-status" aria-live="polite"></div>
      </form>
    </section>
  </main>

  <Footer />
</BaseLayout>

<style>
  .contact-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
    max-width: 700px; /* Limit width for better readability */
    margin: 0 auto;
  }

  .contact-form-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--text-primary);
  }

  .contact-form-section p {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
  }

  .contact-form {
    background: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--card-shadow-lg);
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-primary);
  }

  .form-group textarea {
    resize: vertical;
    min-height: 120px;
  }

  .btn-primary {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
  }

  .btn-primary:hover {
    background: var(--accent-secondary);
  }
   .btn-primary:active {
     transform: scale(0.98);
   }
   .btn-primary:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }

  .form-status {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
  }

  .form-status.success {
    background-color: rgba(16, 185, 129, 0.1); /* Tailwind green-100 */
    color: #059669; /* Tailwind green-700 */
    border: 1px solid rgba(16, 185, 129, 0.2);
  }

  .form-status.error {
    background-color: rgba(239, 68, 68, 0.1); /* Tailwind red-100 */
    color: #dc2626; /* Tailwind red-600 */
    border: 1px solid rgba(239, 68, 68, 0.2);
  }
</style>

<script>
  const form = document.getElementById('contact-form') as HTMLFormElement;
  const formStatus = document.getElementById('form-status');
  const submitButton = document.getElementById('submit-button') as HTMLButtonElement;

  form?.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (!formStatus || !submitButton) return;

    submitButton.disabled = true;
    submitButton.textContent = 'Sending...';
    formStatus.textContent = '';
    formStatus.className = 'form-status'; // Reset classes

    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      const result = await response.json();

      if (response.ok) {
        formStatus.textContent = 'Message sent successfully! Thank you.';
        formStatus.classList.add('success');
        form.reset(); // Clear the form
      } else {
        formStatus.textContent = `Error: ${result.message || 'Could not send message.'}`;
        formStatus.classList.add('error');
      }
    } catch (error) {
      console.error('Form submission error:', error);
      formStatus.textContent = 'An unexpected error occurred. Please try again later.';
      formStatus.classList.add('error');
    } finally {
      submitButton.disabled = false;
      submitButton.textContent = 'Send Message';
    }
  });
</script>