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

{% block content %}
<div class="container py-5">
    <div class="row g-5">
        <!-- Contact Info -->
        <div class="col-lg-5">
            <h1 class="display-4 fw-bold mb-4">{% trans "Get in Touch" %}</h1>
            <p class="lead text-muted mb-5">
                {% trans "Have questions about an order or want to partner with us? Our team in Jimma is ready to help you." %}
            </p>

            <div class="d-flex mb-4">
                <div class="flex-shrink-0 me-3">
                    <div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">{% trans "Our Office" %}</h5>
                    <p class="text-muted mb-0">{% trans "Jimma City Center, Near Hotel Central, Jimma, Ethiopia" %}</p>
                </div>
            </div>

            <div class="d-flex mb-4">
                <div class="flex-shrink-0 me-3">
                    <div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="bi bi-telephone-fill"></i>
                    </div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">{% trans "Call Us" %}</h5>
                    <p class="text-muted mb-0">+251 980 375 465</p>
                </div>
            </div>

            <div class="d-flex mb-4">
                <div class="flex-shrink-0 me-3">
                    <div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="bi bi-envelope-fill"></i>
                    </div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">{% trans "Email Us" %}</h5>
                    <p class="text-muted mb-0">bilalmaa614@gmail.com</p>
                </div>
            </div>

            <div class="card border-0 bg-light rounded-4 p-4 mt-5 mb-4">
                <h5 class="fw-bold mb-3"><i class="bi bi-code-slash me-2 text-primary"></i>{% trans "Developer Collaboration" %}</h5>
                <p class="small text-muted mb-3">{% trans "Interested in the technical side or want to collaborate on the platform's development?" %}</p>
                <div class="mb-2">
                    <p class="mb-0 fw-bold small text-dark">Bilal</p>
                    <p class="mb-1 small text-muted"><i class="bi bi-envelope me-2"></i>bilalmaa614@gmail.com</p>
                    <p class="mb-1 small text-muted"><i class="bi bi-telephone me-2"></i>+251 980 375 465</p>
                    <p class="mb-1 small text-muted"><i class="bi bi-telegram me-2"></i>@Bilnett</p>
                    <p class="mb-0 small text-muted"><i class="bi bi-github me-2"></i>Osman-1234</p>
                </div>
            </div>

            <div class="d-flex gap-3 h4 mt-4">
                <a href="#" class="text-primary"><i class="bi bi-facebook"></i></a>
                <a href="https://t.me/Bilnett" class="text-primary" target="_blank"><i class="bi bi-telegram"></i></a>
                <a href="#" class="text-primary"><i class="bi bi-instagram"></i></a>
                <a href="https://github.com/Osman-1234" class="text-primary" target="_blank"><i class="bi bi-github"></i></a>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-lg p-4 p-lg-5 rounded-4">
                <h3 class="fw-bold mb-4">{% trans "Send us a Message" %}</h3>
                <form method="POST">
                    {% csrf_token %}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{% trans "Your Name" %}</label>
                            <input type="text" name="name" class="form-control bg-light border-0 py-3" placeholder="Abebe Bikila" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{% trans "Your Phone" %}</label>
                            <input type="tel" name="phone" class="form-control bg-light border-0 py-3" placeholder="+251 ..." required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold small">{% trans "Subject" %}</label>
                            <select name="subject" class="form-select bg-light border-0 py-3">
                                <option value="general">{% trans "General Inquiry" %}</option>
                                <option value="order">{% trans "Order Support" %}</option>
                                <option value="vendor">{% trans "Become a Seller" %}</option>
                                <option value="delivery">{% trans "Delivery Question" %}</option>
                                <option value="dev">{% trans "Developer Collaboration" %}</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold small">{% trans "Message" %}</label>
                            <textarea name="message" class="form-control bg-light border-0 py-3" rows="5" placeholder="{% trans 'How can we help you today?' %}" required></textarea>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary btn-lg w-100 py-3 fw-bold rounded-3">{% trans "Send Message" %}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}