{{> header}}
<script src="https://js.stripe.com/v3/"></script>
<section class="checkout-section" style="padding: var(--section-padding) 0;">
  <div class="container">
    <h1>Checkout</h1>
    <div class="checkout-layout" style="display: grid; grid-template-columns: 1fr 380px; gap: 2rem;">
      <div style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 2rem;">
        <form id="checkoutForm">
          <div style="margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border);">
            <h3 style="margin-bottom: 1rem;">Contact Information</h3>
            {{#if user}}<p style="color: var(--color-text-muted); margin-bottom: 1rem;">Logged in as <strong>{{user.email}}</strong></p>{{/if}}
            <div style="margin-bottom: 1rem;"><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Email *</label><input type="email" name="email" id="checkoutEmail" required value="{{#if user}}{{user.email}}{{/if}}" style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
          </div>
          <div style="margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border);">
            <h3 style="margin-bottom: 1rem;">Billing Address</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">First Name</label><input type="text" name="firstName" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Last Name</label><input type="text" name="lastName" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
            </div>
            <div style="margin-bottom: 1rem;"><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Address</label><input type="text" name="address" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">City</label><input type="text" name="city" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">State</label><input type="text" name="state" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Postal Code</label><input type="text" name="postalCode" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"></div>
              <div><label style="display: block; font-weight: 500; margin-bottom: 0.5rem;">Country</label><select name="country" required style="width: 100%; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text);"><option value="">Select</option><option value="US">United States</option><option value="CA">Canada</option><option value="GB">United Kingdom</option></select></div>
            </div>
          </div>
          <div style="margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border);">
            <h3 style="margin-bottom: 1rem;">Payment Details</h3>
            <div id="card-element" style="padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px;"></div>
            <div id="card-errors" style="color: #dc2626; margin-top: 0.5rem; font-size: 0.875rem;"></div>
          </div>
          <button type="submit" class="btn btn-primary" style="width: 100%; padding: 1rem; font-size: 1.1rem;" id="placeOrderBtn"><span class="btn-text">Pay Now</span><span class="btn-loading" style="display: none;">Processing...</span></button>
        </form>
      </div>
      <div style="height: fit-content;">
        <div style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 1rem;">
          <h3 style="margin-bottom: 1rem;">Order Summary</h3>
          <div id="orderItems" style="margin-bottom: 1rem; max-height: 300px; overflow-y: auto;"><div class="loading-state">Loading...</div></div>
          <div style="border-top: 1px solid var(--color-border); padding-top: 1rem;">
            <div style="display: flex; justify-content: space-between; padding: 0.5rem 0;"><span>Subtotal</span><span id="subtotal">$0.00</span></div>
            <div style="display: flex; justify-content: space-between; padding: 0.5rem 0;"><span>Tax</span><span id="tax">$0.00</span></div>
            <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; font-weight: 600; font-size: 1.1rem;"><span>Total</span><span id="total">$0.00</span></div>
          </div>
        </div>

        {{!-- Premium Upsell for Free Users --}}
        {{#isFreePlan}}
        <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid #bae6fd; border-radius: var(--border-radius); padding: 1.25rem; margin-bottom: 1rem;">
          <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <span style="font-size: 1.5rem;">✨</span>
            <div>
              <h4 style="margin: 0 0 0.5rem 0; color: #0369a1; font-size: 1rem;">Upgrade to Pro</h4>
              <p style="margin: 0 0 0.75rem 0; color: #0c4a6e; font-size: 0.875rem; line-height: 1.5;">Get 10% off all purchases, free shipping, and exclusive member discounts.</p>
              <a href="/admin/pricing" style="display: inline-block; background: #0284c7; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; text-decoration: none;">View Plans →</a>
            </div>
          </div>
        </div>
        {{/isFreePlan}}

        {{!-- Premium Member Benefits --}}
        {{#hasActiveSubscription}}
        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; border-radius: var(--border-radius); padding: 1rem;">
          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
            <span style="font-size: 1.25rem;">🎉</span>
            <span style="font-weight: 600; color: #166534;">{{subscription.planName}} Member Benefits</span>
          </div>
          <ul style="margin: 0; padding-left: 1.5rem; color: #15803d; font-size: 0.875rem;">
            <li>Priority order processing</li>
            <li>Exclusive member discounts applied</li>
            <li>Free shipping on orders over $50</li>
          </ul>
        </div>
        {{/hasActiveSubscription}}
      </div>
    </div>
  </div>
</section>
<script src="/themes/my-theme/assets/js/checkout.js"></script>
{{> footer}}
