@page
@model ContactModel
@{
    ViewData["Title"] = "RideAware - Contact";
}

<section class="page-hero">
  <h1>Get in Touch</h1>
  <p>We'd love to hear from you. Send us a message!</p>
</section>

<section class="contact-layout">
  <div class="container">
    <div class="contact-info-side">
      <h2>Let's Connect</h2>
      <p>
        Have a question about RideAware? Want to collaborate?
        Reach out and let us know how we can help.
      </p>
      <ul>
        <li>Fast response times</li>
        <li>Friendly support team</li>
        <li>Multiple contact options</li>
        <li>Always here to help</li>
      </ul>

      <div class="contact-info">
        <div class="info-card">
          <div class="info-card-icon">
            <i class="fas fa-envelope"></i>
          </div>
          <div>
            <h3>Email</h3>
            <p><a href="mailto:hello@rideaware.com">hello@rideaware.com</a></p>
          </div>
        </div>

        <div class="info-card">
          <div class="info-card-icon">
            <i class="fas fa-map-marker-alt"></i>
          </div>
          <div>
            <h3>Address</h3>
            <p>1909 W Owen K Garriott Rd<br />Enid, OK 73703</p>
          </div>
        </div>
      </div>
    </div>

    <form class="contact-form" id="contactForm">
      <div class="form-success" id="successMessage">
        <strong>Thank you!</strong> We've received your message
        and will get back to you soon.
      </div>

      <h2>Send us a message</h2>

      <div class="form-group">
        <label for="name">
          Full Name <span class="required">*</span>
        </label>
        <input
          type="text"
          id="name"
          name="name"
          required
          autocomplete="name"
        />
      </div>

      <div class="form-group">
        <label for="email">
          Email Address <span class="required">*</span>
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          autocomplete="email"
        />
        <small>We'll respond to this email address</small>
      </div>

      <div class="form-group">
        <label for="subject">Subject <span class="required">*</span></label>
        <select id="subject" name="subject" required>
          <option value="">-- Select a subject --</option>
          <option value="general">General Inquiry</option>
          <option value="support">Support</option>
          <option value="partnership">Partnership</option>
          <option value="feedback">Feedback</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div class="form-group">
        <label for="message">
          Message <span class="required">*</span>
        </label>
        <textarea
          id="message"
          name="message"
          required
          placeholder="Your message here..."
        ></textarea>
      </div>

      <div class="newsletter-opt-in">
        <label for="subscribe" class="checkbox-label">
          <input
            type="checkbox"
            id="subscribe"
            name="subscribe"
            class="checkbox-input"
          />
          <span class="checkbox-text">
            <i class="fas fa-bell"></i>
            Subscribe to our newsletter for training tips and updates
          </span>
        </label>
      </div>

      <!-- Simple Addition CAPTCHA -->
      <div class="form-group">
        <label for="captcha">
          Quick Math Check <span class="required">*</span>
        </label>
        <div id="captchaQuestion" style="font-weight: bold; margin-bottom: 8px; color: var(--text-primary); font-size: 16px;"></div>
        <input
          type="text"
          id="captcha"
          name="captcha"
          required
          placeholder="Enter the answer"
          autocomplete="off"
          inputmode="numeric"
        />
      </div>

      <button type="submit" class="form-submit">
        <i class="fas fa-paper-plane"></i>
        Send Message
      </button>
    </form>
  </div>
</section>

@section Scripts {
<script>
  let currentCaptcha = null;

  function generateCaptcha() {
    const num1 = Math.floor(Math.random() * 20) + 1;
    const num2 = Math.floor(Math.random() * 20) + 1;
    const answer = num1 + num2;

    return {
      question: `${num1} + ${num2} = ?`,
      answer: answer.toString()
    };
  }

  function initCaptcha() {
    currentCaptcha = generateCaptcha();
    document.getElementById('captchaQuestion').textContent = currentCaptcha.question;
    document.getElementById('captcha').value = '';
    document.getElementById('captcha').focus();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCaptcha);
  } else {
    initCaptcha();
  }

  document.getElementById('contactForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    const userAnswer = document.getElementById('captcha').value.trim();
    if (userAnswer !== currentCaptcha.answer) {
      alert('Incorrect answer. Please try again.');
      currentCaptcha = generateCaptcha();
      document.getElementById('captchaQuestion').textContent = currentCaptcha.question;
      document.getElementById('captcha').value = '';
      document.getElementById('captcha').focus();
      return;
    }

    const form = e.target;
    const formData = new FormData(form);
    formData.delete('captcha');

    try {
      const response = await fetch('/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams(formData),
      });

      const data = await response.json();

      if (response.ok) {
        document.getElementById('successMessage').classList.add('show');
        form.reset();
        initCaptcha();

        setTimeout(() => {
          document.getElementById('successMessage').classList.remove('show');
        }, 5000);
      } else {
        alert('Error: ' + (data.error || 'Failed to send message'));
        initCaptcha();
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Failed to send message: ' + error.message);
      initCaptcha();
    }
  });
</script>
}