<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment - R2Predictor</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="payment.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">R2Predictor</h1>
        </div>
    </header>

    <section id="payment-section" class="content-section">
        <div class="container">
            <h2 class="section-title">Purchase Premium Access</h2>
            <div class="plan-comparison">
                <div class="plan-card">
                    <h3>Free Tier</h3>
                    <div class="plan-price">Free</div>
                    <p>Basic prediction access with limited features</p>
                    <button class="btn btn-primary" onclick="PaymentModule.openPaymentPopup('Free')">Select</button>
                </div>
    
                <div class="plan-card">
                    <h3>Premium Tier</h3>
                    <div class="plan-price">$9.99/month</div>
                    <p>Advanced predictions with premium features</p>
                    <button class="btn btn-primary" onclick="PaymentModule.openPaymentPopup('Premium')">Select</button>
                </div>
            </div>
        </div>
    </section>
    

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 R2Cheats™. All rights reserved.</p>
        </div>
    </footer>

    <script src="payment.js"></script>
</body>
</html>
