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

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <h1 class="fw-bold text-center mb-2" style="color: #0e2e63;">Contact Us</h1>
            <p class="text-center text-muted mb-4">Have a question? We'd love to hear from you.</p>

            <div class="card shadow-sm border-0" style="border-radius: 12px;">
                <div class="card-body p-4">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Full Name *</label>
                                <input type="text" name="name" class="form-control" style="border-radius: 8px; padding: 10px;" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Email Address *</label>
                                <input type="email" name="email" class="form-control" style="border-radius: 8px; padding: 10px;" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Phone Number</label>
                            <input type="text" name="phone" class="form-control" style="border-radius: 8px; padding: 10px;" placeholder="Optional">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Subject *</label>
                            <input type="text" name="subject" class="form-control" style="border-radius: 8px; padding: 10px;" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Message *</label>
                            <textarea name="message" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 150px;" required></textarea>
                        </div>

                        <button type="submit" class="btn w-100" style="background: #0e2e63; color: #fff; padding: 12px; border-radius: 8px; font-weight: 600;">
                            <i class="fas fa-paper-plane me-2"></i> Send Message
                        </button>
                    </form>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="row g-4 mt-4">
                <div class="col-md-4">
                    <div class="card shadow-sm border-0 text-center" style="border-radius: 12px;">
                        <div class="card-body">
                            <i class="fas fa-envelope fa-2x" style="color: #0e2e63;"></i>
                            <h6 class="mt-2">Email</h6>
                            <p class="text-muted small">info@codesofy.com</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow-sm border-0 text-center" style="border-radius: 12px;">
                        <div class="card-body">
                            <i class="fas fa-phone fa-2x" style="color: #0e2e63;"></i>
                            <h6 class="mt-2">Phone</h6>
                            <p class="text-muted small">+94 11 234 5678</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow-sm border-0 text-center" style="border-radius: 12px;">
                        <div class="card-body">
                            <i class="fas fa-map-marker-alt fa-2x" style="color: #0e2e63;"></i>
                            <h6 class="mt-2">Address</h6>
                            <p class="text-muted small">Colombo, Sri Lanka</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}