<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuickReserve - Efficient Reservation Management</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            color: #34495e;
            line-height: 1.6;
        }

        header {
            background-color: #2980b9;
            color: #ffffff;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            margin: 0;
            font-size: 2.5em;
        }

        main {
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        main h2 {
            color: #2980b9;
            font-size: 2em;
        }

        .button {
            background-color: #27ae60;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
            text-align: center;
            display: inline-block;
        }

        .button:hover {
            background-color: #219653;
        }

        footer {
            background-color: #34495e;
            color: #ffffff;
            text-align: center;
            padding: 10px;
            position: relative;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        footer p {
            margin: 0;
            font-size: 0.9em;
        }

        .contact, .download-section {
            margin-top: 30px;
            padding: 15px;
            border: 1px solid #2980b9;
            border-radius: 8px;
            background-color: #ecf0f1;
        }

        .download-section input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 80%;
            max-width: 400px;
            transition: border-color 0.3s ease;
        }

        .download-section button {
            margin-top: 10px;
            padding: 10px 15px;
            background-color: #27ae60;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
        }

        .download-section button:hover {
            background-color: #219653;
        }

        .download-section #download-message {
            margin-top: 10px;
            color: red;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            border-color: #2980b9;
            outline: none;
        }

        .currency-logos {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }

        .currency-logos img {
            width: 40px;
            height: auto;
        }

        .purchase-option {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }

        .purchase-option h3 {
            color: #2980b9;
            font-size: 1.8em;
        }

        .purchase-option p {
            margin: 10px 0;
        }

        .purchase-option .form-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .quickreserve-screenshot {
            text-align: center;
            margin: 40px 0;
        }

        .quickreserve-screenshot img {
            width: 100%;
            height: auto;
            max-width: 800px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <header>
        <h1>QuickReserve</h1>
    </header>

    <main>
        <h2 id="welcome-title">Welcome to QuickReserve!</h2>
        <p id="welcome-text">QuickReserve offers fast, reliable, and secure reservation management. Whether you're booking services or managing your reservations, we provide an all-in-one solution that makes it effortless.</p>

        <div class="quickreserve-screenshot">
            <img src="quickreserve_1.png" alt="QuickReserve Screenshot 1">
        </div>
        <div class="purchase-option">
            <h3>Purchase QuickReserve</h3>
            <p>Buy QuickReserve (license) to get started. Price: $99.99 per PC (valid for 1 month).</p>
            <div class="form-group">
                <label for="pc-quantity">Number of PCs:</label>
                <input type="number" id="pc-quantity" name="quantity" min="1" value="1">
            </div>
            <button class="button" onclick="selectPC()">Select</button>
        </div>

        <div id="purchase-inquiry-form" style="display:none;">
            <h2 id="purchase-inquiry-title">Purchase Inquiry</h2>
            <form>
                <div class="form-group">
                    <label for="purchaser-name">Your Name:</label>
                    <input type="text" id="purchaser-name" required>
                </div>
        
                <div class="form-group">
                    <label for="purchaser-email">Your Email:</label>
                    <input type="email" id="purchaser-email" required>
                </div>
        
                <div class="form-group">
                    <label for="purchaser-pack">Selected Pack:</label>
                    <input type="text" id="purchaser-pack" readonly>
                </div>
        
                <div class="form-group">
                    <label for="payment-method">Choose Payment Method:</label>
                    <select id="payment-method" required>
                        <option value="">Select</option>
                        <option value="Tether (USDT) TRC20">Tether (USDT) TRC20</option>
                    </select>
                </div>
        
                <button type="submit" class="button" onclick="sendPurchaseEmail()">Submit Inquiry</button>
            </form>
        </div>

        <div class="contact">
            <h3>Contact Us</h3>
            <p>If you have any questions or need assistance, feel free to <a href="mailto:blsquickreserve@gmail.com">contact us</a>.</p>
        </div>

        <div class="download-section">
            <h2>Download QuickReserve</h2>
            <p>Enter your license key to download QuickReserve.</p>
            <input type="text" id="license-key" placeholder="Enter your license key" required>
            <button class="button" onclick="checkLicense()">Download Now</button>
            <p id="download-message" style="color: red;"></p>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 QuickReserve. All rights reserved.</p>
    </footer>

    <script>
        function selectPC() {
            const quantity = document.getElementById("pc-quantity").value;
            let totalPrice = 99.99 * quantity;
            if (quantity > 1) {
                totalPrice = totalPrice * 0.85; 
            }

            document.getElementById('purchaser-pack').value = `QuickReserve - Number of PCs: ${quantity} - Total: $${totalPrice.toFixed(2)} (Valid for 1 month)`; 
            document.getElementById('purchase-inquiry-form').style.display = 'block';
        }

        function sendPurchaseEmail() {
            const name = document.getElementById("purchaser-name").value;
            const email = document.getElementById("purchaser-email").value;
            const pack = document.getElementById("purchaser-pack").value;
            const paymentMethod = document.getElementById("payment-method").value;

            const subject = `Purchase Inquiry: ${pack}`;
            const body = `Name: ${encodeURIComponent(name)}%0D%0AEmail: ${encodeURIComponent(email)}%0D%0APack: ${encodeURIComponent(pack)}%0D%0APayment Method: ${encodeURIComponent(paymentMethod)}`;
            const mailtoLink = `mailto:blsquickreserve@gmail.com?subject=${subject}&body=${body}`;
            window.location.href = mailtoLink;
        }

        function checkLicense() {
            const licenseKey = document.getElementById('license-key').value;
            const messageElement = document.getElementById('download-message');

            fetch('check_license_to_download.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ license_key: licenseKey }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = 'download.php?license_key=' + encodeURIComponent(licenseKey);
                } else {
                    messageElement.innerText = data.message;
                }
            })
            .catch(error => {
                messageElement.innerText = 'An error occurred. Please try again later.';
            });
        }
    </script>
</body>
</html>
