{% extends 'index.html' %}
{% load static %}

{% block content %}
<div class="container" style="padding: 60px 0;">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h1 style="margin-bottom: 30px;">Contact Us</h1>
      
      <div class="row">
        <div class="col-md-6">
          <h3>Get in Touch</h3>
          <p>Have questions about our auto parts? We're here to help!</p>
          
          <div style="margin-top: 30px;">
            <p><strong>Email:</strong> info@4x4pro.com</p>
            <p><strong>Phone:</strong> +1 (555) 123-4567</p>
            <p><strong>Address:</strong> 123 Auto Parts Street, Car City, CC 12345</p>
          </div>
          
          <div style="margin-top: 30px;">
            <h4>Business Hours</h4>
            <p>Monday - Friday: 8:00 AM - 6:00 PM</p>
            <p>Saturday: 9:00 AM - 4:00 PM</p>
            <p>Sunday: Closed</p>
          </div>
        </div>
        
        <div class="col-md-6">
          <h3>Send us a Message</h3>
          <form method="post" action="/contact/">
            {% csrf_token %}
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary" style="background-color: #e30613; border-color: #e30613;">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}