@page "/payment-confirmation"

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 text-center">
            <div class="mb-4">
                <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <h1 class="fw-bold mb-3">Order Confirmed</h1>
                <p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
                <div class="bg-light p-3 rounded mt-4">
                    <p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
                    <h5 class="fw-bold mb-0">#MB-2026-8834</h5>
                </div>
            </div>

            <div class="d-grid gap-3 mt-5">
                <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
                <div class="row g-3">
                    <div class="col-6">
                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
                    </div>
                    <div class="col-6">
                        <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
                    </div>
                </div>
            </div>

            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
        </div>
    </div>
</div>