{{define "onboarding-checkout"}}
<div class="onboarding-container">
    <div class="onboarding-card onboarding-card--wide">
        <!-- Progress -->
        <div class="onboarding-progress">
            <div class="progress-step completed clickable" onclick="goToStep('/onboarding/product')">
                <div class="progress-box">✓</div>
                <span class="progress-label">Product</span>
            </div>
            <div class="progress-line completed"></div>
            <div class="progress-step completed clickable" onclick="goToStep('/onboarding/login')">
                <div class="progress-box">✓</div>
                <span class="progress-label">Account</span>
            </div>
            <div class="progress-line completed"></div>
            <div class="progress-step completed clickable" onclick="goToStep('/onboarding/details')">
                <div class="progress-box">✓</div>
                <span class="progress-label">Details</span>
            </div>
            <div class="progress-line completed"></div>
            <div class="progress-step completed clickable" onclick="goToStep('/onboarding/terms')">
                <div class="progress-box">✓</div>
                <span class="progress-label">Terms</span>
            </div>
            <div class="progress-line completed"></div>
            <div class="progress-step active">
                <div class="progress-box">5</div>
                <span class="progress-label">Payment</span>
            </div>
        </div>

        <!-- Header -->
        <div class="onboarding-header">
            <p class="label accent mb-3">Step 5 of 5</p>
            <h1 class="mb-4">Start your 7-day trial</h1>
            <p class="lead">No credit card required. After 7 days, you'll be charged $12/year. Cancel anytime.</p>
        </div>

        <!-- Order Summary -->
        <div class="order-summary">
            <div class="summary-row summary-header">
                <span>Order Summary</span>
                <a href="/onboarding/product" class="btn-text">Change</a>
            </div>
            
            <div class="summary-row">
                <div class="summary-item">
                    <div class="summary-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    </div>
                    <div class="summary-info">
                        <div class="summary-title">Clavitor Hosted</div>
                        <div class="summary-meta">US-East region • Annual billing</div>
                    </div>
                </div>
                <div class="summary-price">$12<span>/year</span></div>
            </div>
            
            <div class="summary-divider"></div>
            
            <div class="summary-row summary-total">
                <span>Total after trial</span>
                <span class="total-price">$12<span>/year</span></span>
            </div>
            <div class="summary-note">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                <span>You won't be charged today. Trial ends in 7 days.</span>
            </div>
        </div>

        <!-- Payment Methods -->
        <div class="payment-section">
            <h3 class="section-title">Payment method</h3>
            
            <div class="payment-options">
                <label class="payment-option" data-method="card">
                    <input type="radio" name="payment" value="card" checked>
                    <div class="payment-content">
                        <div class="payment-radio">
                            <div class="radio-box">
                                <span class="radio-check">✓</span>
                            </div>
                        </div>
                        <div class="payment-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                        </div>
                        <div class="payment-info">
                            <div class="payment-label">Credit or debit card</div>
                            <div class="payment-hint">Visa, Mastercard, Amex, Discover</div>
                        </div>
                        <div class="payment-icons">
                            <svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#1A1F71" x="0" y="0" width="48" height="32" rx="3"/><text x="24" y="21" font-family="sans-serif" font-size="11" font-weight="700" fill="white" text-anchor="middle">VISA</text></svg>
                            <svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#FF5F00" x="0" y="0" width="48" height="32" rx="3"/><circle fill="#EB001B" cx="18" cy="16" r="8"/><circle fill="#F79E1B" cx="30" cy="16" r="8"/></svg>
                            <svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#016FD0" x="0" y="0" width="48" height="32" rx="3"/><text x="24" y="21" font-family="sans-serif" font-size="10" font-weight="700" fill="white" text-anchor="middle">AMEX</text></svg>
                        </div>
                    </div>
                </label>

                <label class="payment-option" data-method="paypal">
                    <input type="radio" name="payment" value="paypal">
                    <div class="payment-content">
                        <div class="payment-radio">
                            <div class="radio-box">
                                <span class="radio-check">✓</span>
                            </div>
                        </div>
                        <div class="payment-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#003087" d="M7.076 21.337H2.47a.667.667 0 0 1-.66-.598L.006 3.12a.667.667 0 0 1 .66-.76h7.965c3.36 0 6.103 2.362 6.021 5.388-.057 2.102-1.658 3.694-3.693 4.021-1.53.255-3.18.379-4.926.379H7.08l.24 2.489-.013.058.005-.012z"/><path fill="#0070E0" d="M17.541 9.686c-.058.167-.124.334-.198.5-.67 1.484-1.95 2.5-3.49 2.86l-.05.011a8.64 8.64 0 0 1-1.753.205h-2.32l-.025.159-.548 3.5-.058.37h4.008a.7.7 0 0 0 .69-.59l.028-.14.54-3.44.029-.185a.7.7 0 0 1 .69-.59h.41c1.534 0 2.81-.464 3.783-1.338.267-.246.507-.52.72-.821.022.023.043.047.065.07.217.235.407.49.57.764.43.719.657 1.538.657 2.406 0 1.552-.698 2.938-1.814 3.862l-.13.108c-.336.281-.69.548-1.058.798-1.428.95-3.152 1.495-5.028 1.495H7.08l.24 2.489.26.027c2.79.297 5.208.198 7.24-.874 1.38-.752 2.476-1.897 3.238-3.388.486-.963.76-2.078.76-3.26 0-.866-.176-1.69-.498-2.442a5.61 5.61 0 0 0-.521-.996z"/><path fill="#FFC439" d="M10.358 9.686h4.178a8.64 8.64 0 0 0 1.753-.205l.05-.011c1.54-.36 2.82-1.376 3.49-2.86.074-.166.14-.333.198-.5.07-.2.135-.405.196-.616.261-.92.41-1.894.41-2.904 0-2.473-1.258-4.474-3.398-5.386C15.98.618 14.41.56 12.704.56H5.947a.667.667 0 0 0-.66.76l1.804 17.619a.667.667 0 0 0 .66.598h4.126l.548-3.5.025-.159h2.32c1.753 0 3.403-.124 4.926-.379 2.035-.327 3.636-1.919 3.693-4.021.082-3.026-2.661-5.388-6.021-5.388H7.626l.24 2.489h2.493z"/></svg>
                        </div>
                        <div class="payment-info">
                            <div class="payment-label">PayPal</div>
                            <div class="payment-hint">Fast and secure checkout</div>
                        </div>
                    </div>
                </label>

                <label class="payment-option" data-method="apple">
                    <input type="radio" name="payment" value="apple">
                    <div class="payment-content">
                        <div class="payment-radio">
                            <div class="radio-box">
                                <span class="radio-check">✓</span>
                            </div>
                        </div>
                        <div class="payment-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.74.82 0 2.1-.93 3.72-.8 1.25.1 2.16.55 2.85 1.37-2.57 1.54-2.14 4.5.44 5.38-.49 1.37-1.03 2.74-1.09 2.28zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
                        </div>
                        <div class="payment-info">
                            <div class="payment-label">Apple Pay</div>
                            <div class="payment-hint">Pay with Face ID or Touch ID</div>
                        </div>
                    </div>
                </label>
            </div>
        </div>

        <!-- Card Form (shown when card selected) -->
        <div id="cardForm" class="card-form">
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Card number</label>
                    <input type="text" class="form-input" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19">
                    <div class="card-brand" id="cardBrand"></div>
                </div>
            </div>
            
            <div class="form-row two-col">
                <div class="form-group">
                    <label class="form-label">Expiry date</label>
                    <input type="text" class="form-input" id="expiryDate" placeholder="MM / YY" maxlength="7">
                </div>
                <div class="form-group">
                    <label class="form-label">Security code <span class="cvv-hint" data-tooltip="3 digits on back of card, 4 on front for Amex">?</span></label>
                    <input type="text" class="form-input" id="cvv" placeholder="123" maxlength="4">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Name on card</label>
                    <input type="text" class="form-input" id="cardName" placeholder="JOHN DOE">
                </div>
            </div>
        </div>

        <!-- Trial Notice -->
        <div class="trial-box">
            <div class="trial-header">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                <span>Your trial starts now</span>
            </div>
            <div class="trial-body">
                <ul>
                    <li>Full access to all features immediately</li>
                    <li>Reminder email 2 days before trial ends</li>
                    <li>Cancel anytime — no questions asked</li>
                    <li>After trial: $12/year (billed annually)</li>
                </ul>
            </div>
        </div>

        <!-- Actions -->
        <div class="form-actions payment-actions">
            <button type="button" class="btn btn-ghost" onclick="history.back()">Back</button>
            <button type="submit" class="btn btn-primary btn-large" id="startTrialBtn" onclick="startTrial()">
                Start free trial →
            </button>
        </div>

        <p class="payment-security">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            <span>Payment processed by Paddle. We never store your card details.</span>
        </p>
    </div>
</div>

<style>
.onboarding-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 24px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.onboarding-container::after {
    content: '';
    flex: 1;
    min-height: 24px;
}

.onboarding-card {
    width: 100%;
    max-width: 520px;
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.onboarding-card--wide {
    max-width: 560px;
}

.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.progress-step.active .progress-dot {
    background: var(--brand-black);
    color: white;
}

.progress-step.completed .progress-dot {
    background: var(--success);
    color: white;
}

.progress-box {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.progress-step.active .progress-box {
    background: var(--brand-black);
    color: white;
    border-color: var(--brand-black);
}

.progress-step.completed .progress-box {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.progress-step.clickable {
    cursor: pointer;
}

.progress-step.clickable:hover .progress-box {
    border-color: var(--brand-black);
    color: var(--text);
}

.progress-step.clickable:hover .progress-label {
    color: var(--text);
}

.progress-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-step.active .progress-label {
    color: var(--text);
    font-weight: 600;
}

.progress-step.completed .progress-label {
    color: var(--success);
}

.progress-line {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
    margin-bottom: 24px;
    transition: background 0.2s;
}

.progress-line.completed {
    background: var(--success);
}

.onboarding-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Order Summary */
.order-summary {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 24px;
    margin-bottom: 32px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.summary-row + .summary-row {
    margin-top: 16px;
}

.summary-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-black);
}

.summary-info {
    flex: 1;
}

.summary-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.summary-meta {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.summary-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.summary-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.summary-total {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.summary-total .total-price {
    font-size: 24px;
    font-weight: 700;
}

.summary-total .total-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.summary-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--success);
}

.summary-note svg {
    flex-shrink: 0;
}

/* Payment Section */
.payment-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    cursor: pointer;
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: white;
    transition: all 0.15s;
}

.payment-option:hover .payment-content {
    border-color: var(--text-tertiary);
}

.payment-option input:checked + .payment-content {
    border-color: var(--brand-black);
    background: var(--bg-secondary);
}

.payment-radio {
    flex-shrink: 0;
}

.radio-box {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    background: white;
}

.payment-option input:checked + .payment-content .radio-box {
    border-color: var(--brand-black);
    background: var(--brand-black);
}

.radio-check {
    color: white;
    font-size: 14px;
    font-weight: 700;
    transform: scale(0);
    transition: transform 0.15s;
}

.payment-option input:checked + .payment-content .radio-check {
    transform: scale(1);
}

.payment-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-info {
    flex: 1;
}

.payment-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.payment-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.payment-icons {
    display: flex;
    gap: 8px;
}

.payment-icons svg {
    flex-shrink: 0;
}

/* Card Form */
.card-form {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.form-row {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.form-row.two-col {
    grid-template-columns: 1fr 1fr;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    position: relative;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.cvv-hint {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 16px;
    cursor: help;
    color: var(--text-tertiary);
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 16px;
    font-family: var(--font-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
    background: white;
}

.form-input:focus {
    outline: none;
    border-color: var(--brand-black);
    box-shadow: 0 0 0 3px rgba(10,10,10,0.04);
}

.card-brand {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Trial Box */
.trial-box {
    background: linear-gradient(135deg, var(--brand-violet-soft) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.2);
    overflow: hidden;
    margin-bottom: 32px;
}

.trial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--brand-violet);
    font-weight: 600;
}

.trial-header svg {
    color: var(--brand-violet);
}

.trial-body {
    padding: 20px;
}

.trial-body ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trial-body li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.trial-body li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Actions */
.form-actions {
    display: flex;
    gap: 16px;
}

.form-actions .btn {
    flex: 1;
    justify-content: center;
    height: 48px;
}

.form-actions .btn-large {
    height: 52px;
    font-size: 16px;
}

.payment-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.payment-security svg {
    color: var(--success);
}

.btn-text {
    background: none;
    border: none;
    color: var(--brand-black);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 640px) {
    .onboarding-card {
        padding: 32px 24px;
        border-radius: 0;
        border: none;
        box-shadow: none;
        max-width: 100%;
    }
    
    .onboarding-container {
        padding: 0;
        background: white;
    }
    
    .progress-line {
        width: 24px;
    }
    
    .summary-row {
        flex-wrap: wrap;
    }
    
    .payment-icons {
        display: none;
    }
    
    .form-row.two-col {
        grid-template-columns: 1fr;
    }
    
    .payment-actions {
        flex-direction: column-reverse;
    }
    
    .payment-actions .btn:first-child {
        margin-top: 8px;
    }
}
</style>

<script>
// Payment method selection
document.querySelectorAll('input[name="payment"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const cardForm = document.getElementById('cardForm');
        const cardFormVisible = this.value === 'card';
        
        if (cardFormVisible) {
            cardForm.style.display = 'block';
        } else {
            cardForm.style.display = 'none';
        }
    });
});

// Card number formatting
document.getElementById('cardNumber').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    let formatted = '';
    
    for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) formatted += ' ';
        formatted += value[i];
    }
    
    e.target.value = formatted;
    
    // Detect card brand
    const brand = document.getElementById('cardBrand');
    if (value.startsWith('4')) {
        brand.innerHTML = '<span style="color:#1A1F71;font-weight:700">VISA</span>';
    } else if (value.startsWith('5')) {
        brand.innerHTML = '<span style="font-weight:700">Mastercard</span>';
    } else if (value.startsWith('3')) {
        brand.innerHTML = '<span style="color:#016FD0;font-weight:700">Amex</span>';
    } else {
        brand.innerHTML = '';
    }
});

// Expiry formatting
document.getElementById('expiryDate').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    
    if (value.length >= 2) {
        value = value.slice(0, 2) + ' / ' + value.slice(2);
    }
    
    e.target.value = value;
});

function goToStep(url) {
    window.location.href = url;
}

function startTrial() {
    const btn = document.getElementById('startTrialBtn');
    const paymentMethod = document.querySelector('input[name="payment"]:checked').value;
    
    btn.disabled = true;
    btn.textContent = 'Processing...';
    
    // Simulate processing (replace with actual Paddle/Stripe integration)
    setTimeout(() => {
        // Success - redirect to done page
        window.location.href = '/onboarding/done';
    }, 1500);
}
</script>
{{end}}