// ======================================
?>

<!-- ======================================
ALURA PRICE OFFER POPUP
====================================== -->

<style>
#alura-demand-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#alura-demand-popup {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.22);
    padding: 24px;
    font-family: Arial, sans-serif;
    position: relative;
    animation: aluraPopupIn 0.25s ease;
}

@keyframes aluraPopupIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#alura-demand-popup h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #111;
    line-height: 1.25;
}

#alura-demand-popup p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

#alura-demand-popup label {
    display: block;
    margin: 11px 0 5px;
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

#alura-demand-popup input,
#alura-demand-popup select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8dde3;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
}

#alura-demand-popup input:focus,
#alura-demand-popup select:focus {
    border-color: #009879;
}

.alura-popup-close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: none;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    color: #777;
}

.alura-popup-close:hover {
    color: #111;
}

.alura-popup-submit {
    width: 100%;
    margin-top: 17px;
    border: none;
    background: #009879;
    color: #fff;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.alura-popup-submit:hover {
    background: #007f66;
}

#alura-demand-message {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.4;
    display: none;
}

#alura-demand-message.success {
    color: #007f66;
}

#alura-demand-message.error {
    color: #b42318;
}

.alura-popup-small {
    margin-top: 10px;
    font-size: 11px;
    color: #888;
    text-align: center;
}

@media (max-width: 520px) {
    #alura-demand-popup {
        padding: 20px;
        border-radius: 15px;
    }

    #alura-demand-popup h3 {
        font-size: 20px;
    }
}
</style>

<div id="alura-demand-popup-overlay">
    <div id="alura-demand-popup">
        <button type="button" class="alura-popup-close" id="alura-popup-close">&times;</button>

        <h3>Get an Immediate Price Offer</h3>
        <p>
            Share your required capacity, suspension type and destination port.
            Our export team will prepare a price offer shortly.
        </p>

        <form id="alura-demand-form">
            <input 
                type="hidden" 
                name="source_page" 
                value="/price-offer-popup.php"
            >

            <label for="capacity">Required Capacity</label>
            <input 
                type="text" 
                id="capacity" 
                name="capacity" 
                placeholder="Example: 60 tons, 80 tons, 100 tons" 
                required
            >

            <label for="suspension">Suspension Type</label>
            <select id="suspension" name="suspension" required>
                <option value="">Select suspension type</option>
                <option value="Hydraulic">Hydraulic</option>
                <option value="Pneumatic">Pneumatic</option>
                <option value="Multi-leaf steel suspension">Multi-leaf steel suspension</option>
            </select>

            <label for="ramp">Hydraulic Ramp</label>
            <select id="ramp" name="ramp" required>
                <option value="">Select option</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>

            <label for="port">Final Destination Port for C&F Price</label>
            <input 
                type="text" 
                id="port" 
                name="port" 
                placeholder="Example: Mombasa Port, Jebel Ali Port" 
                required
            >

            <label for="email">E-mail</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                placeholder="your@email.com" 
                required
            >

            <button type="submit" class="alura-popup-submit">
                Get Price Offer
            </button>

            <div id="alura-demand-message"></div>

            <div class="alura-popup-small">
                No spam. Only price offer communication.
            </div>
        </form>
    </div>
</div>

<script>
window.addEventListener('load', function() {
    var overlay = document.getElementById('alura-demand-popup-overlay');
    var closeBtn = document.getElementById('alura-popup-close');
    var form = document.getElementById('alura-demand-form');
    var messageBox = document.getElementById('alura-demand-message');

    if (!overlay) {
        console.log('Popup overlay not found');
        return;
    }

    setTimeout(function() {
        overlay.style.display = 'flex';
        console.log('Alura popup opened');
    }, 3000);

    if (closeBtn) {
        closeBtn.onclick = function() {
            overlay.style.display = 'none';
        };
    }

    overlay.onclick = function(e) {
        if (e.target === overlay) {
            overlay.style.display = 'none';
        }
    };

    if (form) {
        form.onsubmit = function(e) {
            e.preventDefault();

            var formData = new FormData(form);
            var submitBtn = form.querySelector('.alura-popup-submit');

            if (messageBox) {
                messageBox.style.display = 'none';
                messageBox.className = '';
                messageBox.textContent = '';
            }

            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.textContent = 'Sending...';
            }

            fetch('/save-demand.php', {
                method: 'POST',
                body: formData
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (messageBox) {
                    messageBox.style.display = 'block';

                    if (data.success) {
                        messageBox.className = 'success';
                        messageBox.textContent = data.message || 'Your demand has been received.';

                        setTimeout(function() {
                            overlay.style.display = 'none';
                            form.reset();
                        }, 1800);
                    } else {
                        messageBox.className = 'error';
                        messageBox.textContent = data.message || 'Please check the form fields.';
                    }
                }
            })
            .catch(function(error) {
                console.log(error);

                if (messageBox) {
                    messageBox.style.display = 'block';
                    messageBox.className = 'error';
                    messageBox.textContent = 'Something went wrong. Please try again.';
                }
            })
            .finally(function() {
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Get Price Offer';
                }
            });
        };
    }
});
</script>