{% extends 'base.html' %}
{% load static i18n %}
{% load i18n %}
{% block content %}
<div class="container py-5">
    <div class="row mb-5">
        <div class="col-md-8 offset-md-2">
            <h1 class="text-center fw-bold mb-2">{% trans "Get in Touch" %}</h1>
            <p class="text-center text-muted mb-4">
                {% trans "We're here to help! Reach out to us through any of the following channels." %}
            </p>
        </div>
    </div>

    <!-- Contact Methods -->
    <div class="row g-4 mb-5">
        <!-- Email -->
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100 text-center">
                <div class="card-body p-4">
                    <div class="fs-1 text-primary mb-3">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-2">{% trans "Email" %}</h5>
                    <p class="card-text text-muted mb-3">
                        {% trans "Send us an email anytime" %}
                    </p>
                    <a href="mailto:support@banshix.com" class="btn btn-outline-primary btn-sm">
                        support@banshix.com
                    </a>
                </div>
            </div>
        </div>

        <!-- Phone -->
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100 text-center">
                <div class="card-body p-4">
                    <div class="fs-1 text-success mb-3">
                        <i class="fas fa-phone"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-2">{% trans "Phone" %}</h5>
                    <p class="card-text text-muted mb-3">
                        {% trans "Call us during business hours" %}
                    </p>
                    <a href="tel:+1234567890" class="btn btn-outline-success btn-sm">
                        +1 (234) 567-890
                    </a>
                </div>
            </div>
        </div>

        <!-- WhatsApp -->
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100 text-center">
                <div class="card-body p-4">
                    <div class="fs-1 text-success mb-3">
                        <i class="fab fa-whatsapp"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-2">WhatsApp</h5>
                    <p class="card-text text-muted mb-3">
                        {% trans "Chat with us on WhatsApp" %}
                    </p>
                    <a href="https://wa.me/1234567890" target="_blank" rel="noopener noreferrer" class="btn btn-outline-success btn-sm">
                        {% trans "Chat Now" %}
                    </a>
                </div>
            </div>
        </div>

        <!-- Live Chat -->
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100 text-center">
                <div class="card-body p-4">
                    <div class="fs-1 text-info mb-3">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-2">{% trans "Support" %}</h5>
                    <p class="card-text text-muted mb-3">
                        {% trans "Chat with our AI assistant" %}
                    </p>
                    <a href="{% url 'shop:ai_chat' %}" class="btn btn-outline-info btn-sm">
                        {% trans "Start Chat" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Office Location & Hours -->
    <div class="row g-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3">
                        <i class="fas fa-map-marker-alt text-danger me-2"></i>
                        {% trans "Visit Us" %}
                    </h5>
                    <p class="text-muted mb-3">
                        <strong>{% trans "Headquarters" %}</strong><br>
                        123 Business Street<br>
                        New York, NY 10001<br>
                        United States
                    </p>
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00601592346903!3d40.71455707138055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316fd83001%3A0x5f2e9e7b3e3e3e3e!2s123%20Business%20Street%2C%20New%20York%2C%20NY%2010001!5e0!3m2!1sen!2sus!4v1234567890" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3">
                        <i class="fas fa-clock text-warning me-2"></i>
                        {% trans "Business Hours" %}
                    </h5>
                    <table class="table table-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="fw-semibold">{% trans "Monday - Friday" %}</td>
                                <td class="text-end">9:00 AM - 6:00 PM EST</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold">{% trans "Saturday" %}</td>
                                <td class="text-end">10:00 AM - 4:00 PM EST</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold">{% trans "Sunday" %}</td>
                                <td class="text-end">{% trans "Closed" %}</td>
                            </tr>
                        </tbody>
                    </table>

                    <hr class="my-3">

                    <h6 class="fw-bold mb-2">{% trans "Social Media" %}</h6>
                    <div class="d-flex gap-3 fs-5">
                        <a href="https://twitter.com/BanshiX" target="_blank" rel="noopener noreferrer" class="text-primary text-decoration-none" title="Twitter">
                            <i class="fab fa-x-twitter"></i>
                        </a>
                        <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="text-danger text-decoration-none" title="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="text-primary text-decoration-none" title="Facebook">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="text-info text-decoration-none" title="LinkedIn">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" class="text-danger text-decoration-none" title="YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Form -->
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <div class="card border-0 shadow-lg">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4">{% trans "Send us a Message" %}</h5>
                    <form>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">{% trans "Full Name" %}</label>
                                <input type="text" class="form-control" id="name" placeholder="{% trans 'Your name' %}" required>
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">{% trans "Email Address" %}</label>
                                <input type="email" class="form-control" id="email" placeholder="{% trans 'your.email@example.com' %}" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="subject" class="form-label">{% trans "Subject" %}</label>
                            <input type="text" class="form-control" id="subject" placeholder="{% trans 'How can we help?' %}" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">{% trans "Message" %}</label>
                            <textarea class="form-control" id="message" rows="5" placeholder="{% trans 'Your message here...' %}" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg w-100">
                            <i class="fas fa-paper-plane me-2"></i>
                            {% trans "Send Message" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- FAQ Quick Link -->
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <div class="alert alert-info border-0 rounded-3">
                <h6 class="fw-bold mb-2">
                    <i class="fas fa-question-circle me-2"></i>
                    {% trans "Have questions?" %}
                </h6>
                <p class="mb-2">
                    {% trans "Check out our" %} <a href="{% url 'shop:faq' %}" class="alert-link">{% trans "Frequently Asked Questions" %}</a> {% trans "page for quick answers." %}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}