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

{% block title %}Contact Us - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Get in touch with AI ML Operations, LLC. Contact us for AI solutions, web design, hosting,
and more. We'd love to hear from you.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">Get in Touch</h1>
    <p class="hero-subtitle">We'd love to hear from you.</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">
          <h4 class="card-title" style="margin-bottom: 2rem;">Send Us a Message</h4>
          <form action="{% url 'contact' %}" method="POST">
            {% csrf_token %}
            <div class="form-row">
              <div class="form-group">
                <input type="text" class="form-control" name="name" placeholder="Your Name">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" name="email" placeholder="Your Email">
              </div>
            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="subject" placeholder="Subject">
            </div>

            <div class="form-group">
              <textarea name="message" class="form-control" rows="5" placeholder="Your message"></textarea>
            </div>

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

            <button class="btn" type="submit">
              Send Message
            </button>
          </form>
        </div>
      </div>

      <!-- Info Column -->
      <div>
        <div class="card">
          <h5 class="card-title">Contact Information</h5>
          <ul style="list-style: none;">
            <li style="margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
              <span style="color: var(--primary-color);">📞</span>
              <p style="color: var(--text-muted);">+1 (330) 402-2675</p>
            </li>
            <li style="margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
              <span style="color: var(--primary-color);">✉️</span>
              <p style="color: var(--text-muted);">ryan@aimloperations.com</p>
            </li>
          </ul>
        </div>
      </div>

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