<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>SpaceX Foundation - Checkout</title>
    <meta name="description" content="Secure crypto checkout for your SPCX investment.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/checkout.css">
</head>

<body class="cx-page">

    <!-- Top bar -->
    <div id="cx-topbar" class="cx-topbar">
        <a href="index.php" class="cx-brand">
            <span></span>
        </a>
        <!-- <a href="index.php" class="cx-topbar-link"><i class="fas fa-arrow-left"></i> </a> -->
    </div>

    <!-- Checkout layout -->
    <div id="cx-checkout-wrap" class="cx-wrap">

        <!-- Left panel -->
        <div class="cx-card cx-left">

            <div class="cx-panel-header">
                <div class="cx-merchant">
                    <div>
                        <div class="cx-merchant-name">SpaceX Foundation</div>
                    </div>
                </div>
                <div id="cx-timer" class="cx-timer">
                    <i class="fas fa-clock cx-timer-icon"></i>
                    <span class="cx-timer-value" id="cx-timer-value">10:00</span>
                </div>
            </div>

            <div class="cx-section-title">Select Cryptocurrency</div>
            <div class="cx-coin-grid">
                <div class="cx-coin is-active" data-coin="BTC">
                    <span>BTC</span>
                </div>
                <div class="cx-coin" data-coin="ETH">
                    <span>ETH</span>
                </div>
                <div class="cx-coin" data-coin="USDT">
                    <span>USDT</span>
                </div>
                <div class="cx-coin" data-coin="USDC">
                    <span>USDC</span>
                </div>
                <div class="cx-coin" data-coin="SOL">
                    <span>SOL</span>
                </div>
            </div>

            <div id="cx-network-row" class="cx-network-row" style="display:none; margin-top:14px;"></div>

            <div class="cx-section-title">Payment Address</div>
            <div class="cx-address-block">
                <div class="cx-address-info">
                    <div class="cx-address-label">Send exactly this amount to the address below</div>
                    <div class="cx-address-value-row">
                        <span class="cx-address-text cx-mono" id="cx-address">—</span>
                        <button type="button" class="cx-copy-btn" id="cx-copy-btn" aria-label="Copy address">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <div class="cx-amount-to-send">
                        <span class="cx-address-label">Amount to send:</span>
                        <strong id="cx-amount-to-send">—</strong>
                    </div>
                </div>
            </div>

            <div class="cx-notice" id="cx-expiry-notice">
                <i class="fas fa-info-circle"></i>
                <span>This payment request expires in 10 minutes. After expiration, a new payment session must be created.</span>
            </div>

            <div class="cx-warning-box">
                <i class="fas fa-exclamation-triangle"></i>
                <span>Only send the selected cryptocurrency on the selected network. Sending assets on the wrong network may result in permanent loss of funds.</span>
            </div>

            <div class="cx-security-badge">
                <i class="fas fa-lock"></i>
                <span>Secure encrypted payment powered by blockchain verification.</span>
            </div>
        </div>

        <!-- Right panel -->
        <div class="cx-right">
            <div class="cx-card">
                <div class="cx-right-title">Payment Summary</div>
                <div class="cx-right-sub">Review the details before confirming your payment.</div>

                <div class="cx-right-summary">
                
                    <div class="cx-summary-row">
                        <span class="cx-summary-label">Product</span>
                        <span class="cx-summary-value">Shares Purchase</span>
                    </div>
                    <div class="cx-summary-row">
                        <span class="cx-summary-label">Cryptocurrency</span>
                        <span class="cx-summary-value" id="cx-right-coin">Bitcoin</span>
                    </div>
                    <div class="cx-summary-row">
                        <span class="cx-summary-label">Network</span>
                        <span class="cx-summary-value" id="cx-right-network">Bitcoin</span>
                    </div>
                    <div class="cx-summary-row">
                        <span class="cx-summary-label">Exchange rate</span>
                        <span class="cx-summary-value" id="cx-right-rate">—</span>
                    </div>
                    <div class="cx-summary-row">
                        <span class="cx-summary-label">Remaining time</span>
                        <span class="cx-summary-value" id="cx-right-timer-value">10:00</span>
                    </div>
                </div>

                <div class="cx-field">
                    <label for="cx-amount-input">Amount due (USD)</label>
                    <div class="cx-amount-input-wrap">
                        <span class="cx-currency-prefix">$</span>
                        <input type="number" id="cx-amount-input" class="cx-amount-input" placeholder="1000.00" min="1000" step="0.01">
                    </div>
                    <div class="cx-amount-hint" id="cx-amount-hint">Minimum payment amount is $1,000.00.</div>
                </div>

                <button type="button" class="cx-cta" id="cx-cta-btn">
                    <i class="fas fa-shield-alt"></i> I've Made the Payment
                </button>
                <div class="cx-cta-note">By clicking, you confirm the transaction was broadcast to the network.</div>
            </div>
        </div>
    </div>

    <!-- Success state -->
    <div id="cx-success" class="cx-success cx-card">
        <div class="cx-success-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="cx-success-title">Thank You for Your Payment</div>
        <p class="cx-success-text">Your payment has been received and is awaiting blockchain confirmation. You will receive a confirmation email once your deposit has been confirmed.</p>
        <div class="cx-confirm-loader">
            <span class="cx-spinner"></span>
            <span>Waiting for blockchain confirmations…</span>
        </div>
        <a href="index.php" class="cx-return-btn"><i class="fas fa-arrow-left"></i> Return to Merchant</a>
    </div>

    <!-- JS here -->
    <script src="assets/js/checkout.js"></script>
</body>

</html>
