<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Game Kebun Dola</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f0f8ff; }
        .btn { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }
        .btn:hover { background-color: #45a049; }
        /* Gaya untuk Pop-up */
        .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: white; margin: 15% auto; padding: 20px; width: 300px; border-radius: 8px; text-align: center; }
        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover { color: black; }
        .pay-btn { background-color: #008CBA; color: white; padding: 8px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>

    <h1>🌱 Game Kebun Sederhana 🌱</h1>
    <p>Koleksi koin kamu: <span id="koin">0</span></p>
    
    <button class="btn" onclick="beliBenih()">Beli Benih Spesial (Rp 5.000)</button>

    <!-- Pop-up Pembayaran -->
    <div id="modalPembayaran" class="modal">
        <div class="modal-content">
            <span class="close" onclick="tutupModal()">&times;</span>
            <h3>Konfirmasi Pembelian</h3>
            <p>Silakan sambungkan dompet digital untuk melanjutkan pembayaran benih.</p>
            <button class="pay-btn" onclick="prosesBayar('DANA')">Bayar via DANA</button><br>
            <button class="pay-btn" onclick="prosesBayar('ShopeePay')">Bayar via ShopeePay</button>
        </div>
    </div>

    <script>
        function beliBenih() {
            // Memunculkan pop-up pembayaran
            document.getElementById('modalPembayaran').style.display = 'block';
        }

        function tutupModal() {
            document.getElementById('modalPembayaran').style.display = 'none';
        }

        function prosesBayar(metode) {
            alert("Menghubungkan ke " + metode + "... Silakan selesaikan pembayaran.");
            tutupModal();
            // Nanti di sini kode asli API pembayaran kamu dimasukin
        }
    </script>

</body>
</html>
