---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### THEME CONFIG ###
theme:
  main:
    align: "start"

### WEB MANAGER CONFIG ###
web_manager:
  auth:
    config:
      policy: "authenticated"
  cookieConsent:
    enabled: false

### PAGE CONFIG ###
---

<!-- Capture payment buttons content to reuse in both desktop and mobile layouts -->
{% capture payment_buttons_content %}
  <!-- Credit/Debit Card Button -->
  <button type="submit" class="btn btn-adaptive btn-md d-flex align-items-center justify-content-center payment-button"
          data-payment-method="card"
          data-action="pay-card"
          data-wm-bind="@show checkout.paymentMethods.card"
          hidden>
    {% uj_icon "credit-card", "me-2 fa-3xl" %}
    <span class="fw-semibold">Credit/Debit</span>
  </button>

  <!-- PayPal Button -->
  <button type="submit" class="btn btn-paypal btn-md d-flex align-items-center justify-content-center payment-button"
          data-payment-method="paypal"
          data-action="pay-paypal"
          data-wm-bind="@show checkout.paymentMethods.paypal"
          hidden>
    <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png"
        alt="PayPal"
        height="28"
        style="max-height: 28px;">
  </button>

  <!-- Apple Pay Button -->
  <button type="submit" class="btn btn-dark btn-md d-flex align-items-center justify-content-center payment-button"
          data-payment-method="apple-pay"
          data-action="pay-apple-pay"
          data-wm-bind="@show checkout.paymentMethods.applePay"
          hidden>
    {% uj_icon "apple", "me-2 fa-3xl" %}
    <span class="fw-semibold">Apple Pay</span>
  </button>

  <!-- Google Pay Button -->
  <button type="submit" class="btn btn-outline-dark btn-md d-flex align-items-center justify-content-center payment-button"
          data-payment-method="google-pay"
          data-action="pay-google-pay"
          data-wm-bind="@show checkout.paymentMethods.googlePay"
          hidden>
    <img src="https://www.gstatic.com/instantbuy/svg/dark_gpay.svg"
        alt="Google Pay"
        height="24"
        class="me-2">
    <span class="fw-semibold">Google Pay</span>
  </button>

  <!-- Crypto Button -->
  <button type="submit" class="btn btn-outline-adaptive btn-md d-flex align-items-center justify-content-center payment-button"
          data-payment-method="crypto"
          data-action="pay-crypto"
          data-wm-bind="@show checkout.paymentMethods.crypto"
          hidden>
    {% uj_icon "bitcoin", "me-2 fa-3xl" %}
    <span class="fw-semibold">Crypto</span>
  </button>

  <p class="text-muted small text-center mb-0">
    By purchasing, you agree to our <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
  </p>
{% endcapture %}

<!-- Error Message Container (hidden by default, shown via bindings) -->
<div id="checkout-error-container" data-wm-bind="@show checkout.error.show" hidden>
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="alert alert-danger" role="alert">
        <h4 class="alert-heading">Oops! Something went wrong</h4>
        <p data-wm-bind="@text checkout.error.message"></p>
        <hr>
        <button class="btn btn-outline-danger" onclick="window.location.reload()">
          Try again
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Checkout Section (visible by default, hidden only when error is shown) -->
<section id="checkout-content" class="col-12 col-xl-10 mw-xl" data-wm-bind="@hide checkout.error.show">
  <div class="row mb-4">
    <div class="col-12 d-flex align-items-center justify-content-between">
      <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
      {% if jekyll.environment == "development" %}
      <!-- Dev Tools Toggle -->
      <div id="checkout-dev-panel" class="dropdown" hidden>
        <button id="checkout-dev-toggle" class="btn btn-outline-primary btn-sm avatar avatar-sm rounded-circle d-flex align-items-center justify-content-center" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">{% uj_icon "gear", "fa-sm" %}</button>
        <div id="checkout-dev-body" class="dropdown-menu dropdown-menu-end shadow-lg small p-0" style="width:280px;">
          <div class="p-3">
            <div class="fw-bold mb-3 text-primary">Dev Tools</div>
            <div class="mb-2">
              <label class="form-label mb-1 text-body-secondary">Product</label>
              <select data-dev-param="product" class="form-select form-select-sm"></select>
            </div>
            <div class="mb-2">
              <label class="form-label mb-1 text-body-secondary">Frequency</label>
              <select data-dev-param="frequency" class="form-select form-select-sm">
                <option value="annually">Annually</option>
                <option value="monthly">Monthly</option>
                <option value="weekly">Weekly</option>
                <option value="daily">Daily</option>
              </select>
            </div>
            <hr class="my-2">
            <div class="mb-2">
              <label class="form-label mb-1 text-body-secondary">Trial eligible</label>
              <select data-dev-param="_dev_trialEligible" class="form-select form-select-sm">
                <option value="">(use API)</option>
                <option value="true">Force true</option>
                <option value="false">Force false</option>
              </select>
            </div>
            <div class="mb-2">
              <label class="form-label mb-1 text-body-secondary">Card processor</label>
              <select data-dev-param="_dev_cardProcessor" class="form-select form-select-sm">
                <option value="">(auto)</option>
                <option value="test">Test</option>
                <option value="stripe">Stripe</option>
                <option value="chargebee">Chargebee</option>
              </select>
            </div>
            <div class="mb-2">
              <label class="form-label mb-1 text-body-secondary">reCAPTCHA</label>
              <select data-dev-param="_dev_recaptcha" class="form-select form-select-sm">
                <option value="">(normal)</option>
                <option value="invalid">Send invalid token</option>
                <option value="empty">Send empty token</option>
              </select>
            </div>
            <button id="checkout-dev-apply" class="btn btn-primary btn-sm w-100 fw-bold">Apply &amp; reload</button>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="card border-0 shadow-lg">
    <div class="card-body p-3 p-md-5">
      <!-- Title Row -->
      <!-- <div class="row mb-4">
        <div class="col-12">
          <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
        </div>
      </div> -->

      <!-- Main Checkout Form -->
      <form id="checkout-form" autocomplete="on" novalidate onsubmit="return false">
        <!-- Content Row -->
        <div class="row d-lg-flex">
          <!-- Section 1: Billing Cycle & Customer Info -->
          <div class="col-12 col-lg-7 mb-lg-0 order-1">
            <!-- Billing Cycle Selection (subscriptions only) -->
            <div class="accordion checkout-accordion _card _border-1 _border-secondary _shadow-sm"
                 data-wm-bind="@show checkout.product.isSubscription">
              <div class="accordion-item border-0 card-body">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed bg-transparent shadow-none p-0" type="button"
                          data-bs-toggle="collapse" data-bs-target="#collapse-billing" aria-expanded="false">
                    <span class="h5 fw-bold mb-0">Billing cycle</span>
                  </button>
                  <div class="checkout-accordion-summary text-body-tertiary mt-1 wm-binding-skeleton" data-wm-bind="@text checkout.pricing.frequencyPaymentText">&nbsp;</div>
                </h2>
                <div id="collapse-billing" class="accordion-collapse collapse">
                  <div class="accordion-body p-0">
                    <div class="d-flex justify-content-between align-items-center mb-3 _wm-binding-skeleton" _data-wm-bind="@show checkout" hidden>
                      <h6 class="fw-bold mb-0">
                        <span data-wm-bind="@text checkout.product.name">Loading...</span> Plan
                      </h6>
                      <a href="/pricing" class="small text-decoration-none">
                        {% uj_icon "arrow-left", "me-1" %}
                        Change plan
                      </a>
                    </div>

                    <!-- Subscription Toggle (shown for subscriptions only) -->
                    <div id="subscription-toggle">
                      <div class="row g-3">
                        <div class="col-6" data-wm-bind="@show checkout.frequencies.annually" hidden>
                          <div class="wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.annually">
                            <input type="radio" class="btn-check" name="frequency" id="annually" value="annually">
                            <label class="btn btn-outline-adaptive text-body w-100 p-3 position-relative border-2 rounded-3 wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.annually" for="annually">
                              <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary px-3 py-2"
                                    data-wm-bind="@text checkout.pricing.savingsBadge, @show checkout.pricing.showSavingsBadge"
                                    hidden
                                    >Save --</span>
                              <div class="d-flex align-items-center justify-content-center mb-2">
                                <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
                                  {% uj_icon "check", "fa-md p-1" %}
                                </span>
                              </div>
                              <div class="fs-4 mb-1 wm-binding-skeleton" data-wm-bind="@show checkout">
                                <span data-wm-bind="@text checkout.pricing.annualMonthlyRate">$--</span>
                                <span class="opacity-60 fs-6 fw-normal">/mo</span>
                              </div>
                              <div class="opacity-80 small">Annual plan</div>
                            </label>
                          </div>
                        </div>
                        <div class="col-6" data-wm-bind="@show checkout.frequencies.monthly" hidden>
                          <div class="wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.monthly">
                            <input type="radio" class="btn-check" name="frequency" id="monthly" value="monthly">
                            <label class="btn btn-outline-adaptive text-body w-100 p-3 border-2 rounded-3 wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.monthly" for="monthly">
                              <div class="d-flex align-items-center justify-content-center mb-2">
                                <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
                                  {% uj_icon "check", "fa-md p-1" %}
                                </span>
                              </div>
                              <div class="fs-4 mb-1 wm-binding-skeleton" data-wm-bind="@show checkout">
                                <span data-wm-bind="@text checkout.pricing.monthlyPrice">$--</span>
                                <span class="opacity-60 fs-6 fw-normal">/mo</span>
                              </div>
                              <div class="opacity-80 small">Monthly plan</div>
                            </label>
                          </div>
                        </div>
                        <div class="col-6" data-wm-bind="@show checkout.frequencies.weekly" hidden>
                          <div class="wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.weekly">
                            <input type="radio" class="btn-check" name="frequency" id="weekly" value="weekly">
                            <label class="btn btn-outline-adaptive text-body w-100 p-3 border-2 rounded-3 wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.weekly" for="weekly">
                              <div class="d-flex align-items-center justify-content-center mb-2">
                                <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
                                  {% uj_icon "check", "fa-md p-1" %}
                                </span>
                              </div>
                              <div class="fs-4 mb-1 wm-binding-skeleton" data-wm-bind="@show checkout">
                                <span data-wm-bind="@text checkout.pricing.weeklyPrice">$--</span>
                                <span class="opacity-60 fs-6 fw-normal">/wk</span>
                              </div>
                              <div class="opacity-80 small">Weekly plan</div>
                            </label>
                          </div>
                        </div>
                        <div class="col-6" data-wm-bind="@show checkout.frequencies.daily" hidden>
                          <div class="wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.daily">
                            <input type="radio" class="btn-check" name="frequency" id="daily" value="daily">
                            <label class="btn btn-outline-adaptive text-body w-100 p-3 border-2 rounded-3 wm-binding-skeleton" data-wm-bind="@show checkout.frequencies.daily" for="daily">
                              <div class="d-flex align-items-center justify-content-center mb-2">
                                <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
                                  {% uj_icon "check", "fa-md p-1" %}
                                </span>
                              </div>
                              <div class="fs-4 mb-1 wm-binding-skeleton" data-wm-bind="@show checkout">
                                <span data-wm-bind="@text checkout.pricing.dailyPrice">$--</span>
                                <span class="opacity-60 fs-6 fw-normal">/day</span>
                              </div>
                              <div class="opacity-80 small">Daily plan</div>
                            </label>
                          </div>
                        </div>
                      </div>

                      <!-- Payment text under the boxes -->
                      <div class="text-muted small text-center mt-2 wm-binding-skeleton" data-wm-bind="@show checkout.product.isSubscription">
                        * Pay <span data-wm-bind="@text checkout.pricing.frequencyPaymentText">$-- monthly</span>
                      </div>

                      <!-- Subscription info badge (default: money-back guarantee, replaced by trial if eligible) -->
                      <div class="alert alert-secondary mt-3 mb-0 p-2"
                           data-wm-bind="@show !checkout.trial.show">
                        <small class="d-flex align-items-center mb-0">
                          {% uj_icon "shield-check", "me-2 text-success" %}
                          Backed by our 7-day money-back guarantee.
                        </small>
                      </div>

                      <!-- Free Trial Badge -->
                      <div class="alert alert-success mt-3 mb-0 p-2"
                           data-wm-bind="@show checkout.trial.show"
                           hidden>
                        <small class="d-flex align-items-center mb-0">
                          {% uj_icon "gift", "me-2" %}
                          <span data-wm-bind="@text checkout.trial.message"></span>
                        </small>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <hr class="my-3" data-wm-bind="@show checkout.product.isSubscription">

            <!-- Customer Information Card -->
            <div class="accordion checkout-accordion _card _border-1 _border-secondary _shadow-sm">
              <div class="accordion-item border-0 card-body">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed bg-transparent shadow-none p-0" type="button"
                          data-bs-toggle="collapse" data-bs-target="#collapse-customer" aria-expanded="false">
                    <span class="h5 fw-bold mb-0">Customer information</span>
                  </button>
                  <div class="checkout-accordion-summary text-body-tertiary mt-1 wm-binding-skeleton" data-wm-bind="@text auth.user.email">&nbsp;</div>
                </h2>
                <div id="collapse-customer" class="accordion-collapse collapse">
                  <div class="accordion-body p-0">
                    <div class="text-start wm-binding-skeleton" data-wm-bind="@show checkout">
                      Managing order for <strong data-wm-bind="@text auth.user.email">loading@example.com</strong>, <a href="#" id="switch-account">switch account</a>.
                    </div>

                    <!-- Customer form fields will go here when needed -->
                    <div id="customer-fields" class="text-start">
                      <!-- Future form fields like shipping address, VAT number, etc. -->
                      <!-- <div class="mb-3">
                        <label for="customer-name" class="form-label fw-semibold">
                          Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-md" id="customer-name" name="customer_name" placeholder="Enter your full name" autocomplete="name" required>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <hr class="my-3 d-none d-lg-block">

            <!-- Payment Method Card (Desktop only - duplicate for layout) -->
            <div class="accordion checkout-accordion _card _border-1 _border-secondary _shadow-sm mb-0 d-none d-lg-block">
              <div class="accordion-item border-0 card-body">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed bg-transparent shadow-none p-0" type="button"
                          data-bs-toggle="collapse" data-bs-target="#collapse-payment" aria-expanded="false">
                    <span class="h5 fw-bold mb-0">Payment method</span>
                  </button>
                </h2>
                <div id="collapse-payment" class="accordion-collapse collapse">
                  <div class="accordion-body p-0">
                    <!-- Direct Payment Buttons -->
                    <div class="d-grid gap-3 wm-binding-skeleton" data-wm-bind="@show checkout.paymentMethods">
                      {{ payment_buttons_content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- HR before Order summary (mobile only) -->
          <div class="col-12 order-2 d-lg-none">
            <hr class="my-3">
          </div>

          <!-- Section 2: Order summary -->
          <div class="col-12 col-lg-5 mb-lg-0 order-2 ms-lg-auto">
            <div class="order-summary-sticky">
              <div class="accordion checkout-accordion _card _border-1 _border-secondary _shadow-sm">
                <div class="accordion-item border-0 card-body">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed bg-transparent shadow-none p-0" type="button"
                            data-bs-toggle="collapse" data-bs-target="#collapse-summary" aria-expanded="false">
                      <span class="h5 fw-bold mb-0">Order summary</span>
                    </button>
                    <div class="checkout-accordion-summary text-body-tertiary mt-1 wm-binding-skeleton" data-wm-bind="@text checkout.pricing.totalDueText">&nbsp;</div>
                  </h2>
                  <div id="collapse-summary" class="accordion-collapse collapse">
                    <div class="accordion-body p-0">
                      <!-- Product Item -->
                      <div class="order-item mb-4">
                        <div class="d-flex align-items-center wm-binding-skeleton" data-wm-bind="@show checkout">
                          <div class="position-relative me-3">
                            <div class="product-thumbnail bg-light rounded-3 d-flex align-items-center justify-content-center">
                              <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" class="img-fluid p-2" alt="{{ site.brand.name }} Plan Icon"/>
                            </div>
                            <span class="quantity-badge position-absolute top-0 start-100 translate-middle badge rounded-circle bg-primary">
                              1
                              <span class="visually-hidden">quantity</span>
                            </span>
                          </div>
                          <div class="flex-grow-1 text-start wm-binding-skeleton" data-wm-bind="@show checkout">
                            <h6 class="mb-1">{{ site.brand.name }} <span data-wm-bind="@text checkout.product.name">Loading...</span></h6>
                            <!-- <p class="text-muted small mb-0" data-wm-bind="@text checkout.product.description">Loading product details...</p> -->
                          </div>
                          <div class="text-end d-none">
                            <div class="fw-bold" data-wm-bind="@text checkout.pricing.productPrice">$--</div>
                          </div>
                        </div>
                      </div>

                      <!-- Discount Code -->
                      <div class="mb-4 wm-binding-skeleton" data-wm-bind="@show checkout">
                        <div class="input-group" data-wm-bind="@show checkout" hidden>
                          <label for="discount-code" class="visually-hidden">Discount code</label>
                          <input type="text" class="form-control rounded-start-3 border py-2 px-3 text-start" id="discount-code" name="discount" placeholder="Discount code" autocomplete="off">
                          <button class="btn btn-adaptive rounded-end-3 border px-4" type="button" id="apply-discount" data-action="apply-discount">Apply</button>
                        </div>

                        <!-- Discount Messages -->
                        <div class="text-start">
                          <div class="mt-2 text-primary small" data-wm-bind="@show checkout.discount.loading" hidden>
                            {% uj_icon "clock", "me-1" %} Checking code...
                          </div>
                          <div class="mt-2 text-success small" data-wm-bind="@show checkout.discount.success" hidden>
                            {% uj_icon "check-circle", "me-1" %} <span data-wm-bind="@text checkout.discount.successMessage">Discount applied</span>
                          </div>
                          <div class="mt-2 text-danger small" data-wm-bind="@show checkout.discount.error" hidden>
                            {% uj_icon "times-circle", "me-1" %} <span data-wm-bind="@text checkout.discount.errorMessage">Invalid discount code</span>
                          </div>
                        </div>
                      </div>

                      <!-- Price Breakdown -->
                      <div>
                        <div class="d-flex justify-content-between mb-2 wm-binding-skeleton" data-wm-bind="@show checkout">
                          <span class="text-muted">Subtotal</span>
                          <span data-wm-bind="@text checkout.pricing.subtotal">$--</span>
                        </div>

                        <div class="d-flex justify-content-between mb-2 text-success"
                             data-wm-bind="@show checkout.discount.hasDiscount"
                             hidden>
                          <span>Discount (<span data-wm-bind="@text checkout.discount.percent"></span>)</span>
                          <span>-$<span data-wm-bind="@text checkout.discount.amount"></span></span>
                        </div>

                        <div class="d-flex justify-content-between mb-3 text-success"
                             data-wm-bind="@show checkout.trial.hasFreeTrial"
                             hidden>
                          <span>Free trial discount</span>
                          <span>-$<span data-wm-bind="@text checkout.trial.discountAmount"></span></span>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3 wm-binding-skeleton" data-wm-bind="@show checkout">
                          <span class="fw-bold fs-5">Total due today</span>
                          <span class="fw-bold fs-4" data-wm-bind="@text checkout.pricing.total">$--</span>
                        </div>

                        <hr class="my-3" data-wm-bind="@show checkout.product.isSubscription" hidden>

                        <div class="d-flex justify-content-between align-items-center text-muted wm-binding-skeleton"
                             data-wm-bind="@show checkout.product.isSubscription"
                             hidden>
                          <span>Recurring</span>
                          <span><span data-wm-bind="@text checkout.pricing.recurringAmount">$--</span> <span data-wm-bind="@text checkout.pricing.recurringPeriod">monthly</span></span>
                        </div>

                        <!-- Subscription Terms -->
                        <div class="mt-3 rounded-3 small text-body-tertiary text-start"
                             data-wm-bind="@show checkout.pricing.showTerms"
                             hidden>
                          <span data-wm-bind="@text checkout.pricing.termsText"></span>
                        </div>
                        <!-- Need Help -->
                        <div class="text-center mt-3">
                          <a href="javascript:;" class="text-decoration-none btn-link small" id="checkout-help-button">
                            {% uj_icon "messages-question", "text-primary me-1" %} Need help? Chat with us now!
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Section 3: Payment Method (Mobile only - hidden on desktop) -->
          <div class="col-12 order-3 d-lg-none">
            <hr class="my-3">
          </div>
          <div class="col-12 col-lg-7 order-3 d-lg-none">
            <!-- Payment Method Card (Mobile position) -->
            <div class="accordion checkout-accordion _card _border-1 _border-secondary _shadow-sm mb-0">
              <div class="accordion-item border-0 card-body">
                <h2 class="accordion-header">
                  <button class="accordion-button bg-transparent shadow-none p-0" type="button"
                          data-bs-toggle="collapse" data-bs-target="#collapse-payment-mobile" aria-expanded="true">
                    <span class="h5 fw-bold mb-0">Payment method</span>
                  </button>
                </h2>
                <div id="collapse-payment-mobile" class="accordion-collapse collapse show">
                  <div class="accordion-body p-0">
                    <!-- Direct Payment Buttons -->
                    <div class="d-grid gap-3 wm-binding-skeleton" data-wm-bind="@show checkout.paymentMethods">
                      {{ payment_buttons_content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Security badges (below main card) -->
  <div class="text-center mt-3">
    <div class="d-flex justify-content-center align-items-center gap-3 small text-muted">
      <span>{% uj_icon "handshake", "text-success" %} Secure Checkout</span>
      <span>{% uj_icon "lock", "text-success" %} SSL Encrypted</span>
      <span>{% uj_icon "shield-check", "text-success" %} Money-back guarantee</span>
    </div>
  </div>
</section>

{{ content | uj_content_format }}