@page "/payment-failed"
@rendermode InteractiveServer
@inject NavigationManager Navigation
@attribute [Authorize]

<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-danger bg-opacity-10 text-danger 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">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                </div>
                <h1 class="fw-bold mb-3">Payment Cancelled</h1>
                <p class="text-muted fs-5">We couldn't process your transaction. Don't worry, no money was deducted from your account.</p>

                <div class="bg-light p-3 rounded mt-4">
                    <p class="mb-0 text-muted small text-uppercase fw-bold">Common Causes</p>
                    <p class="mb-0 fs-6 text-dark mt-1">The order was cancelled / insufficient funds, incorrect card details, or a temporary bank gateway timeout.</p>
                </div>
            </div>

            <div class="d-grid gap-3 mt-5">                
                <div class="row g-3">
                    <div class="col-6">
                        <a href="/" class="btn btn-outline-dark w-100 rounded-pill py-3">View Store</a>
                    </div>
                    <div class="col-6">
                        <a href="/support" class="btn btn-outline-dark w-100 rounded-pill py-3">Get Help</a>
                    </div>
                </div>
            </div>

            <p class="mt-5 text-muted small">If you noticed a charge or have any order questions, please contact our support desk with your account email <strong>shop@litecharms.co.za</strong>.</p>
        </div>
    </div>
</div>