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

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

            <!-- Header -->
            <div class="text-center mb-2">
                <h1 class="display-5 fw-bold text-primary">BanshiX Help Center</h1>
                <p class="lead text-muted">We’re Here to Help You Every Step of the Way</p>
                <hr class="w-25 mx-auto">
            </div>

            <div class="card shadow-sm border-0 mb-2">
                <div class="card-body p-5">
                    <p class="lead">
                        Welcome to the BanshiX Help Center, your dedicated support space designed to make your experience 
                        smooth, simple, and stress-free.
                    </p>
                    <p>
                        Whether you are shopping, selling, making payments, or tracking your order, this page provides 
                        answers and guidance to help you every step of the way.
                    </p>
                </div>
            </div>

            <!-- How Can We Help You -->
            <h3 class="fw-bold mb-4">How Can We Help You?</h3>
            <div class="row g-4 mb-5">
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold">Placing Orders</h5>
                            <p class="small text-muted">Browse, select, and complete your purchase easily.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold">Payments &amp; Installments</h5>
                            <p class="small text-muted">Full payment or flexible installment plans.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold">Selling Items</h5>
                            <p class="small text-muted">Sell your items directly to BanshiX.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="accordion" id="helpAccordion">

                <!-- Ordering Made Simple -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                            Ordering Made Simple
                        </button>
                    </h2>
                    <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>To place an order on BanshiX:</p>
                            <ol>
                                <li>Browse or search for your desired product</li>
                                <li>Select the item and review details</li>
                                <li>Choose your preferred payment option</li>
                                <li>Confirm your order</li>
                            </ol>
                            <p class="text-success">
                                Once your order is placed, you will receive confirmation and updates until delivery.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Payment & Installment Support -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                            Payment &amp; Installment Support
                        </button>
                    </h2>
                    <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>We offer flexible payment options:</p>
                            <ul>
                                <li>Pay in full</li>
                                <li>Choose installment plans (6 months, 1 year, or 2 years)</li>
                            </ul>
                            <p><strong>If you experience any difficulty during payment:</strong></p>
                            <ul>
                                <li>Double-check your payment details</li>
                                <li>Ensure sufficient balance</li>
                                <li>Contact our support team for assistance</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Selling Your Items -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                            Selling Your Items to BanshiX
                        </button>
                    </h2>
                    <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>Steps to sell your items:</p>
                            <ol>
                                <li>Submit details of your item</li>
                                <li>Our team reviews and evaluates it</li>
                                <li>Receive a fair price offer</li>
                                <li>Complete the transaction securely</li>
                            </ol>
                            <p class="text-success">We aim to make selling fast, transparent, and convenient.</p>
                        </div>
                    </div>
                </div>

                <!-- Make an Offer -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
                            Make an Offer Feature
                        </button>
                    </h2>
                    <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>For selected electronic items, you can:</p>
                            <ul>
                                <li>Submit your own price offer</li>
                                <li>Negotiate directly through the platform</li>
                            </ul>
                            <p>This feature gives you more control and helps you get the best deal possible.</p>
                        </div>
                    </div>
                </div>

                <!-- Delivery & Shipping -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
                            Delivery &amp; Shipping
                        </button>
                    </h2>
                    <div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>BanshiX offers worldwide delivery.</p>
                            <ul>
                                <li>Orders are processed quickly</li>
                                <li>Delivery time depends on your location</li>
                                <li>Tracking updates are provided</li>
                            </ul>
                            <p>If your order is delayed or missing, please contact support immediately.</p>
                        </div>
                    </div>
                </div>

                <!-- Warranty & Product Support -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6">
                            Warranty &amp; Product Support
                        </button>
                    </h2>
                    <div id="collapse6" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>We provide warranties ranging from 1 to 3 years, depending on the product.</p>
                            <p>If you experience any issues:</p>
                            <ul>
                                <li>Contact support with your order details</li>
                                <li>Provide a description of the problem</li>
                                <li>Our team will guide you through repair, replacement, or solution options</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Common Issues -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse7">
                            Common Issues &amp; Quick Solutions
                        </button>
                    </h2>
                    <div id="collapse7" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <strong>Problem:</strong> Payment not going through<br>
                            <small>Solution: Check your internet, verify payment details, or try another method.</small><br><br>
                            
                            <strong>Problem:</strong> Order not confirmed<br>
                            <small>Solution: Check your email or account notifications.</small><br><br>
                            
                            <strong>Problem:</strong> Delay in delivery<br>
                            <small>Solution: Track your order and contact support for updates.</small>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Need More Help -->
            <div class="card shadow-sm mt-5 border-0 bg-light">
                <div class="card-body p-5 text-center">
                    <h4 class="fw-bold mb-3">Need More Help?</h4>
                    <p class="mb-4">
                        If you cannot find what you’re looking for, our support team is always ready to assist you.
                    </p>
                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                        <a href="#" class="btn btn-primary">
                            <i class="fas fa-envelope me-2"></i> Email Support
                        </a>
                        <a href="#" class="btn btn-outline-primary">
                            <i class="fas fa-comment-dots me-2"></i> Live Chat
                        </a>
                    </div>
                </div>
            </div>

            <!-- Support Promise -->
            <div class="text-center mt-2">
                <h5 class="fw-bold text-primary">Our Support Promise</h5>
                <p class="lead">
                    At BanshiX, we are committed to providing fast and helpful responses, solving problems efficiently, 
                    and ensuring customer satisfaction.
                </p>
                <p class="fw-bold mt-3">BanshiX Help Center — Support You Can Trust.</p>
            </div>

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

{% endblock %}