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

<div class="container my-5">
<!-- Header -->
        <div class="text-center mb-5">
            <h1 class="fw-bold display-5">NexusMart Help Center</h1>
            <p class="lead text-muted">Your complete guide to using the platform</p>
        </div>
    <!-- HEADER -->
    <div class="text-center mb-5">
        
        <h1 class="fw-bold">🧭 Help Center</h1>
        <p class="text-muted">
            Everything you need to know to shop, pay, and manage your orders smoothly.
        </p>
    </div>

    <!-- SEARCH HELP -->
    <div class="row justify-content-center mb-5">
        <div class="col-md-8">
            <input type="text" class="form-control form-control-lg"
                   placeholder="Search help topics... (e.g. payment, order, delivery)">
        </div>
    </div>

    <!-- HELP GRID -->
    <div class="row g-4 d-flex">

        <!-- SHOPPING -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>🛍 Shopping Guide</h5>
                    <ul class="mt-3">
                        <li>How to browse products</li>
                        <li>How to search for items</li>
                        <li>How to add products to cart</li>
                        <li>Understanding product ratings</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- ORDERS -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>📦 Orders</h5>
                    <ul class="mt-3">
                        <li>How to place an order</li>
                        <li>How to track your order</li>
                        <li>Canceling an order</li>
                        <li>Order history & invoices</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- PAYMENTS -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>💳 Payments</h5>
                    <ul class="mt-3">
                        <li>Paystack payment guide</li>
                        <li>Full vs installment payments</li>
                        <li>Payment failure issues</li>
                        <li>Refund processing</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- DELIVERY -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>🚚 Delivery</h5>
                    <ul class="mt-3">
                        <li>Delivery timeframes</li>
                        <li>Shipping fees</li>
                        <li>Tracking shipments</li>
                        <li>Delayed delivery support</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- ACCOUNT -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>👤 Account</h5>
                    <ul class="mt-3">
                        <li>Creating an account</li>
                        <li>Login & password reset</li>
                        <li>Updating profile</li>
                        <li>Security settings</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- SUPPORT -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5>📞 Support</h5>
                    <ul class="mt-3">
                        <li>Contact customer support</li>
                        <li>Report an issue</li>
                        <li>Live chat (coming soon)</li>
                        <li>FAQs</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- FAQ SECTION -->
    <div class="mt-5">
        <h3 class="mb-3">❓ Frequently Asked Questions</h3>

        <div class="accordion" id="faqAccordion">

            <!-- FAQ 1 -->
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">
                        How do I place an order?
                    </button>
                </h2>
                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Browse products, add them to cart, then proceed to checkout and complete payment.
                    </div>
                </div>
            </div>

            <!-- FAQ 2 -->
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">
                        Can I pay in installments?
                    </button>
                </h2>
                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Yes. You can make partial payments until your full balance is cleared.
                    </div>
                </div>
            </div>

            <!-- FAQ 3 -->
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq3">
                        How do I track my order?
                    </button>
                </h2>
                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Go to "My Orders" and click on any order to view live tracking updates.
                    </div>
                </div>
            </div>

            <!-- FAQ 4 -->
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq4">
                        What happens if payment fails?
                    </button>
                </h2>
                <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        You can retry payment or choose another method. No money is deducted for failed transactions.
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- CONTACT SUPPORT -->
    <div class="text-center mt-5 p-4 bg-light rounded">
        <h4>Still need help?</h4>
        <p class="text-muted">Our support team is ready to assist you.</p>
        <a href="mailto:support@yourstore.com" class="btn btn-primary">
            📧 Contact Support
        </a>
    </div>

</div>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            

            <div class="accordion" id="helpAccordion">

                <!-- 1. Getting Started -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                            <i class="fas fa-rocket me-3"></i> Getting Started
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <h5>Welcome to NexusMart!</h5>
                            <p>NexusMart is your modern online marketplace for everyday living. Here's how to get started:</p>
                            <ol>
                                <li><strong>Register or Login</strong> – Create an account or sign in to start shopping.</li>
                                <li><strong>Browse Products</strong> – Use the search bar or browse by categories.</li>
                                <li><strong>Add to Cart</strong> – Click "Add to Cart" on any product.</li>
                                <li><strong>Checkout</strong> – Review your cart and proceed to secure payment.</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- 2. Account & Profile -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                            <i class="fas fa-user me-3"></i> Account & Profile
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <ul>
                                <li><strong>Update Profile</strong>: Go to <strong>Dashboard → My Profile</strong> to update your phone, address, and profile picture.</li>
                                <li><strong>Shipping Addresses</strong>: Manage multiple delivery addresses under <strong>Profile → Shipping Addresses</strong>.</li>
                                <li><strong>Order History</strong>: View all your past orders in <strong>My Orders</strong>.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 3. Shopping & Cart -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                            <i class="fas fa-shopping-cart me-3"></i> Shopping & Cart
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p><strong>How to add items:</strong></p>
                            <ul>
                                <li>Browse products and click <strong>"Add to Cart"</strong></li>
                                <li>Use the cart icon in the navbar to view your items</li>
                                <li>Update quantity or remove items directly in the cart</li>
                            </ul>
                            <p><strong>Checkout Process:</strong></p>
                            <ol>
                                <li>Select a shipping address</li>
                                <li>Enter contact information (optional)</li>
                                <li>Choose payment method: Full payment or Installments</li>
                                <li>Complete payment via Paystack</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- 4. Orders & Tracking -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                            <i class="fas fa-truck me-3"></i> Orders & Tracking
                        </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>You can track your orders in real-time from the <strong>My Orders</strong> page.</p>
                            <ul>
                                <li>View detailed order information</li>
                                <li>Download or email your invoice</li>
                                <li>Cancel pending orders before payment</li>
                                <li>Track delivery status with live updates</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 5. Payments & Installments -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
                            <i class="fas fa-credit-card me-3"></i> Payments & Installments
                        </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>We accept secure payments via <strong>Paystack</strong>.</p>
                            <ul>
                                <li><strong>Full Payment</strong>: Pay the entire amount at once.</li>
                                <li><strong>Installment Payment</strong>: Choose 3 or 6 months plan.</li>
                                <li>All transactions are encrypted and secure.</li>
                            </ul>
                            <p class="text-success"><strong>Tip:</strong> You can apply discount codes during checkout.</p>
                        </div>
                    </div>
                </div>

                <!-- 6. Wishlist & Likes -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix">
                            <i class="fas fa-heart me-3"></i> Wishlist & Likes
                        </button>
                    </h2>
                    <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>Save products you love for later:</p>
                            <ul>
                                <li>Click the <strong>heart icon</strong> to like a product</li>
                                <li>Click the <strong>bookmark icon</strong> to add to your wishlist</li>
                                <li>Access your wishlist from the profile menu</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 7. Contact & Support -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven">
                            <i class="fas fa-headset me-3"></i> Contact & Support
                        </button>
                    </h2>
                    <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                        <div class="accordion-body">
                            <p>Need help? We're here for you:</p>
                            <ul>
                                <li>Use the <strong>AI Chat Support</strong> (bottom right corner)</li>
                                <li>Email us at: <strong>support@nexusmart.ng</strong></li>
                                <li>Call/WhatsApp: +234 XXX XXX XXXX</li>
                            </ul>
                            <p class="mt-3"><strong>Our AI Assistant</strong> is available 24/7 to answer questions about orders, products, and payments.</p>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Footer Note -->
            <div class="text-center mt-5 text-muted small">
                <p>Still have questions? Feel free to contact our support team anytime.</p>
                <p>© {{ now.year }} NexusMart - Built for Benjamin in Port Harcourt, Nigeria</p>
            </div>

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


{% endblock %}