{% 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 action="{% url 'contact' %}" method="POST" aria-labelledby="contact-form-heading"
            {% if webmcp_enabled %}toolname="submit_contact_inquiry" tooldescription="Submit a contact inquiry to AI ML Operations"{% endif %}>
            {% 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>
              </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>
              </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>
            </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?"></textarea>
            </div>

            <div class="form-group">
              {% if capchaForm %}
              {{ capchaForm }}
              {% endif %}
            </div>

            <button class="btn" type="submit"
              data-tianji-event="contact_form_submit">
              Send Message
            </button>
          </form>
        </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 %}
