{% extends 'base.html' %} {% load static %} {% block title %}Contact Us -
AIBOTXCHANGE{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
  <div class="max-w-3xl mx-auto">
    <!-- Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Contact Us</h1>
      <p class="text-xl text-gray-600">
        Have questions about our copy trading platform? We're here to help.
      </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
      <!-- Contact Form -->
      <div class="bg-white rounded-lg shadow-lg p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Send us a Message</h2>

        {% if messages %} {% for message in messages %}
        <div class="alert alert-{{ message.tags }} mb-6">{{ message }}</div>
        {% endfor %} {% endif %}

        <form method="post" class="space-y-6">
          {% csrf_token %}
          <div>
            <label
              for="name"
              class="block text-sm font-medium text-gray-700 mb-2"
              >Full Name</label
            >
            <input
              type="text"
              id="name"
              name="name"
              required
              class="form-input w-full"
              placeholder="Your full name"
            />
          </div>

          <div>
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 mb-2"
              >Email Address</label
            >
            <input
              type="email"
              id="email"
              name="email"
              required
              class="form-input w-full"
              placeholder="your@email.com"
            />
          </div>

          <div>
            <label
              for="subject"
              class="block text-sm font-medium text-gray-700 mb-2"
              >Subject</label
            >
            <select id="subject" name="subject" class="form-input w-full">
              <option value="general">General Inquiry</option>
              <option value="technical">Technical Support</option>
              <option value="billing">Billing Question</option>
              <option value="strategy">Strategy Information</option>
              <option value="partnership">Partnership Opportunity</option>
            </select>
          </div>

          <div>
            <label
              for="message"
              class="block text-sm font-medium text-gray-700 mb-2"
              >Message</label
            >
            <textarea
              id="message"
              name="message"
              rows="6"
              required
              class="form-input w-full"
              placeholder="Tell us how we can help you..."
            ></textarea>
          </div>

          <button type="submit" class="btn-primary w-full">Send Message</button>
        </form>
      </div>

      <!-- Contact Information -->
      <div class="space-y-8">
        <!-- Contact Details -->
        <div class="bg-white rounded-lg shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">Get in Touch</h2>
          <div class="space-y-6">
            <div class="flex items-start">
              <div
                class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1"
              >
                <i class="fas fa-envelope text-blue-600"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-900">Email</h3>
                <p class="text-gray-600">support@aibotxchange.com</p>
                <p class="text-sm text-gray-500">
                  We'll respond within 24 hours
                </p>
              </div>
            </div>

            <div class="flex items-start">
              <div
                class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 mt-1"
              >
                <i class="fas fa-phone text-green-600"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-900">Phone</h3>
                <p class="text-gray-600">+1 (555) 123-4567</p>
                <p class="text-sm text-gray-500">Mon-Fri, 9AM-6PM EST</p>
              </div>
            </div>

            <div class="flex items-start">
              <div
                class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4 mt-1"
              >
                <i class="fas fa-comments text-purple-600"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-900">Live Chat</h3>
                <p class="text-gray-600">Available 24/7</p>
                <p class="text-sm text-gray-500">
                  Instant support for urgent issues
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ Quick Links -->
        <div class="bg-white rounded-lg shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">Quick Help</h2>
          <div class="space-y-4">
            <a
              href="{% url 'main:documentation' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-book text-blue-600 mr-3"></i>
              <div>
                <div class="font-medium text-gray-900">Documentation</div>
                <div class="text-sm text-gray-500">
                  Platform guides and tutorials
                </div>
              </div>
            </a>

            <a
              href="{% url 'strategies:marketplace' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-robot text-green-600 mr-3"></i>
              <div>
                <div class="font-medium text-gray-900">Browse Strategies</div>
                <div class="text-sm text-gray-500">
                  Explore trading strategies
                </div>
              </div>
            </a>

            {% if user.is_authenticated %}
            <a
              href="{% url 'accounts:profile' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-user text-purple-600 mr-3"></i>
              <div>
                <div class="font-medium text-gray-900">Account Settings</div>
                <div class="text-sm text-gray-500">Manage your profile</div>
              </div>
            </a>
            {% else %}
            <a
              href="{% url 'accounts:signup' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-user-plus text-orange-600 mr-3"></i>
              <div>
                <div class="font-medium text-gray-900">Create Account</div>
                <div class="text-sm text-gray-500">
                  Get started with copy trading
                </div>
              </div>
            </a>
            {% endif %}
          </div>
        </div>

        <!-- Business Hours -->
        <div class="bg-blue-50 rounded-lg p-6">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">
            Business Hours
          </h3>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-600">Monday - Friday:</span>
              <span class="font-medium">9:00 AM - 6:00 PM EST</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">Saturday:</span>
              <span class="font-medium">10:00 AM - 4:00 PM EST</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">Sunday:</span>
              <span class="font-medium">Closed</span>
            </div>
          </div>
          <div class="mt-4 p-3 bg-white rounded-lg">
            <p class="text-xs text-gray-600">
              <i class="fas fa-info-circle mr-1"></i>
              For urgent technical issues, our automated support system is
              available 24/7.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}