{% extends 'base.html' %}
{% load i18n %}
{% block content %}

<div class="container py-2">
    <div class="row justify-content-center">
        <div class="col-lg-11">

            <!-- Page Header -->
            <div class="text-center mb-2">
                <h3 class="display-5 fw-bold text-primary">BanshiX Help Center</h3>
                <p class="lead text-muted">Your questions answered • Support you can trust</p>
                <hr class="w-25 mx-auto">
            </div>

            <!-- Navigation Tabs -->
            <ul class="nav nav-pills nav-fill mb-2" id="helpTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq" type="button">
                        <i class="fas fa-question-circle me-2"></i> FAQ
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button">
                        <i class="fas fa-envelope me-2"></i> Contact Us
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button">
                        <i class="fas fa-undo me-2"></i> Return &amp; Refund Policy
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="helpTabContent">

                <!-- ==================== FAQ TAB ==================== -->
                <div class="tab-pane fade show active" id="faq" role="tabpanel">
                    <h3 class="fw-bold mb-4">Frequently Asked Questions (FAQ)</h3>
                    
                    <div class="accordion" id="faqAccordion">

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1">
                                    What is BanshiX?
                                </button>
                            </h2>
                            <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    BanshiX is a modern online marketplace where customers can buy, sell, and explore a wide range of products including electronics, home appliances, fashion items, and more.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q2">
                                    How long has BanshiX been in business?
                                </button>
                            </h2>
                            <div id="q2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We have over 12 years of business experience, with our platform established in 2014.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q3">
                                    What payment methods do you accept?
                                </button>
                            </h2>
                            <div id="q3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We accept secure payment options available on our platform, including full payment and installment plans.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q4">
                                    Can I pay in installments?
                                </button>
                            </h2>
                            <div id="q4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, we offer flexible installment plans: 6 months, 1 year, or 2 years.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q5">
                                    Can I sell my items to BanshiX?
                                </button>
                            </h2>
                            <div id="q5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, customers can sell items directly to us after evaluation by our team.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q6">
                                    Do you deliver worldwide?
                                </button>
                            </h2>
                            <div id="q6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, we provide worldwide delivery services.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q7">
                                    Do your products come with warranty?
                                </button>
                            </h2>
                            <div id="q7" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, we offer warranties between 1 to 3 years depending on the product category.
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- ==================== CONTACT US TAB ==================== -->
                <div class="tab-pane fade" id="contact" role="tabpanel">
                    <div class="card shadow-sm">
                        <div class="card-body p-5 text-center">
                            <h3 class="fw-bold mb-4">Contact Us</h3>
                            <p class="lead mb-4">We’re Always Here for You</p>
                            
                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <p>
                                        Our support team is available to assist you with orders, payments, delivery, 
                                        selling items, and general inquiries.
                                    </p>
                                    <div class="my-4">
                                        <p><strong>Email:</strong> support@banshix.com</p>
                                        <p><strong>Phone:</strong> +234 XXX XXX XXXX</p>
                                    </div>
                                    <a href="#" class="btn btn-primary btn-lg px-5">
                                        <i class="fas fa-headset me-2"></i> Start Live Chat
                                    </a>
                                </div>
                            </div>

                            <hr class="my-5">
                            <p class="fw-bold text-primary">Our Promise</p>
                            <p>We are committed to providing fast responses, clear communication, and reliable solutions.</p>
                        </div>
                    </div>
                </div>

                <!-- ==================== RETURN & REFUND POLICY TAB ==================== -->
                <div class="tab-pane fade" id="return" role="tabpanel">
                    <div class="card shadow-sm">
                        <div class="card-body p-5">
                            <h3 class="fw-bold mb-4">Return &amp; Refund Policy</h3>
                            <p class="lead">Clear, Fair, and Customer-Friendly</p>

                            <h5 class="mt-4">Return Eligibility</h5>
                            <p>Items may be returned if:</p>
                            <ul>
                                <li>The product is defective or damaged</li>
                                <li>The wrong item was delivered</li>
                                <li>The item does not match the description</li>
                            </ul>

                            <h5 class="mt-4">Return Conditions</h5>
                            <ul>
                                <li>The item must be returned within 7–14 days</li>
                                <li>The product must be in its original condition</li>
                                <li>All accessories and packaging must be included</li>
                            </ul>

                            <h5 class="mt-4">Non-Returnable Items</h5>
                            <ul>
                                <li>Used or damaged items caused by the customer</li>
                                <li>Certain personal or hygiene products</li>
                                <li>Pets (once sold, except under special conditions)</li>
                            </ul>

                            <h5 class="mt-4">How to Request a Return</h5>
                            <ol>
                                <li>Contact our support team</li>
                                <li>Provide your order details</li>
                                <li>Explain the issue</li>
                                <li>Follow the instructions given</li>
                            </ol>

                            <div class="alert alert-info mt-4">
                                <strong>Note:</strong> BanshiX reserves the right to inspect all returned items before approving refunds or replacements.
                            </div>

                            <p class="text-center fw-bold mt-4 text-primary">
                                BanshiX — Trusted Service, Reliable Support.
                            </p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

{% endblock %}