{% extends "base.html" %}
{% load static %}

{% block title %}Contact Us - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Tell AI ML Operations about your operational bottleneck. Forward-deployed AI engineering, custom agents, and production ML deployments.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section hero-section--compact">
  <div class="hero-content">
    <h1 class="hero-title">Get in Touch</h1>
    <p class="hero-subtitle hero-subtitle--wide">Describe the workflow or bottleneck you want to automate—we will help you scope a forward-deployed solution.</p>
  </div>
</div>

<!-- Contact Content -->
<div class="section">
  <div class="container">
    <div class="contact-grid">

      <!-- Form Column -->
      <div>
        {% if success %}
        <div class="alert alert-success" role="alert">
          <span class="alert-text"> We'll be in contact shortly!</span>
        </div>
        {% endif %}
        {% if errors %}
        <div class="alert alert-danger" role="alert">
          <span class="alert-text">{{ errors }}</span>
        </div>
        {% endif %}

        <div class="card">
          <h2 class="card-title contact-form-heading" id="contact-form-heading" style="margin-bottom: 2rem;">Send Us a Message</h2>
          <form id="contact-form" action="{% url 'contact' %}" method="POST" aria-labelledby="contact-form-heading"
            toolname="submit_contact_inquiry"
            tooldescription="Submit a contact inquiry to AI ML Operations">
            {% csrf_token %}
            <div class="form-row">
              <div class="form-group">
                <label class="form-label" for="contact-name">Your Name</label>
                <input type="text" class="form-control" name="name" id="contact-name" autocomplete="name" required
                  toolparamdescription="Full name of the person submitting the inquiry.">
              </div>
              <div class="form-group">
                <label class="form-label" for="contact-email">Your Email</label>
                <input type="email" class="form-control" name="email" id="contact-email" autocomplete="email" required
                  toolparamdescription="Email address where AI ML Operations can reply.">
              </div>
            </div>

            <div class="form-group">
              <label class="form-label" for="contact-subject">Subject</label>
              <input type="text" class="form-control" name="subject" id="contact-subject" value="{{ request.GET.subject|default:'' }}" required
                toolparamdescription="Short summary of the inquiry topic or service of interest.">
            </div>

            <div class="form-group">
              <label class="form-label" for="contact-message">Message</label>
              <textarea name="message" class="form-control" id="contact-message" rows="5"
                placeholder="What workflow is costing you the most time? What systems does it touch?"
                toolparamdescription="Optional details about the workflow, bottleneck, or systems involved."></textarea>
            </div>

            {% if not capchaForm %}
            <button class="btn" type="submit"
              data-tianji-event="contact_form_submit">
              Send Message
            </button>
            {% endif %}
          </form>

          {% if capchaForm %}
          <div class="form-group contact-captcha-group">
            {{ capchaForm }}
          </div>
          <button class="btn" type="submit" form="contact-form"
            data-tianji-event="contact_form_submit">
            Send Message
          </button>
          {% endif %}
        </div>
      </div>

      <!-- Info Column -->
      <div>
        <div class="card">
          <h3 class="card-title">Contact Information</h3>
          <ul class="contact-info-list">
            <li class="contact-info-item">
              <span class="contact-info-icon" aria-hidden="true">📞</span>
              <a href="tel:+13304022675">+1 (330) 402-2675</a>
            </li>
            <li class="contact-info-item">
              <span class="contact-info-icon" aria-hidden="true">✉️</span>
              <a href="mailto:ryan@aimloperations.com">ryan@aimloperations.com</a>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block tracking_events %}
{% if success %}
<script>
  if (window.aimlTrackWhenReady) {
    window.aimlTrackWhenReady('contact_form_success');
  }
</script>
{% endif %}
{% endblock %}