<div class="discount-code-wrap" id="discountCodeWrap">
    Use code <span id="textToCopy">BF24</span>
    <button id="copyButton" style="border: none; background: none; cursor: pointer;">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" viewBox="0 0 24 24" version="1.1">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
            <title>ic_fluent_copy_24_regular</title>
            <desc>Created with Sketch.</desc>
            <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="ic_fluent_copy_24_regular" fill="#676767" fill-rule="nonzero">
                    <path d="M5.50280381,4.62704038 L5.5,6.75 L5.5,17.2542087 C5.5,19.0491342 6.95507456,20.5042087 8.75,20.5042087 L17.3662868,20.5044622 C17.057338,21.3782241 16.2239751,22.0042087 15.2444057,22.0042087 L8.75,22.0042087 C6.12664744,22.0042087 4,19.8775613 4,17.2542087 L4,6.75 C4,5.76928848 4.62744523,4.93512464 5.50280381,4.62704038 Z M17.75,2 C18.9926407,2 20,3.00735931 20,4.25 L20,17.25 C20,18.4926407 18.9926407,19.5 17.75,19.5 L8.75,19.5 C7.50735931,19.5 6.5,18.4926407 6.5,17.25 L6.5,4.25 C6.5,3.00735931 7.50735931,2 8.75,2 L17.75,2 Z M17.75,3.5 L8.75,3.5 C8.33578644,3.5 8,3.83578644 8,4.25 L8,17.25 C8,17.6642136 8.33578644,18 8.75,18 L17.75,18 C18.1642136,18 18.5,17.6642136 18.5,17.25 L18.5,4.25 C18.5,3.83578644 18.1642136,3.5 17.75,3.5 Z" id="🎨-Color"></path>
                </g>
            </g>
        </svg>
    </button>
</div>

<script>
    document.getElementById("copyButton").addEventListener("click", function () {
        const textToCopy = document.getElementById("textToCopy").textContent;

        // Use Clipboard API for modern browsers
        navigator.clipboard.writeText(textToCopy).then(function () {
            // Hide the current content and show "Copied to clipboard!"
            const discountWrap = document.getElementById("discountCodeWrap");
            discountWrap.innerHTML = '<span class="copied-message" id="copiedMessage">Copied to clipboard!</span>';

            // Fade-in effect
            const copiedMessage = document.getElementById("copiedMessage");
            copiedMessage.style.opacity = 0;
            copiedMessage.style.transition = "opacity 1s";

            setTimeout(function () {
                copiedMessage.style.opacity = 1;
            }, 10);
        }).catch(function (err) {
            console.error("Failed to copy: ", err);
        });
    });
</script>

<style>
    .discount-code-wrap {
        display: flex;
        justify-content: center;
        font-size: 13px;
        background: #f2f2f2;
        border-radius: 8px;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 20px;
        font-weight: 600;
        color: #676767;
        align-items: center;
    }

    #textToCopy {
        text-decoration: underline;
        margin-left: 4px;
        color: #0098d9;
    }


    .copied-message {
        font-size: 13px;
        font-weight: bold;
        color: #0098d9;
    }
</style>