document.addEventListener("DOMContentLoaded", function () {
    const popupOverlay = document.createElement("div");
    popupOverlay.id = "bpbooster-overlay";
    popupOverlay.innerHTML = `
        <div id="bpbooster-popup">
            <div class="bpbooster-inner">
                <button id="bpbooster-close">&times;</button>
                <h2>${bpboosterSettings.headline}</h2>
                <p>${bpboosterSettings.subheadline}</p>
                <button id="cta1">${bpboosterSettings.cta_text}</button>
                <button id="cta2">Call Us!</button>
                <button id="cta3">Email Us!</button>
            </div>
        </div>`;

    document.body.appendChild(popupOverlay);
    setTimeout(() => popupOverlay.style.display = "flex", 1000);

    const closePopup = () => popupOverlay.style.display = "none";
    document.getElementById("bpbooster-close").addEventListener("click", closePopup);
    popupOverlay.addEventListener("click", e => {
        if (e.target.id === "bpbooster-overlay") closePopup();
    });

    const sendClick = (type) => {
        fetch(bpboosterSettings.ajax_url, {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams({
                action: "bpbooster_register_click",
                button_type: type,
                post_id: bpboosterSettings.post_id
            })
        });
    };

    document.getElementById("cta1").addEventListener("click", () => {
        sendClick("custom");
        window.location = bpboosterSettings.cta_link;
    });
    document.getElementById("cta2").addEventListener("click", () => {
        sendClick("call");
        window.location = 'tel:' + bpboosterSettings.phone;
    });
    document.getElementById("cta3").addEventListener("click", () => {
        sendClick("email");
        window.location = 'mailto:' + bpboosterSettings.email;
    });
});
