/* Add the Google Font link in CSS Settings or HTML Settings */
/* @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); */

body {
    font-family: Arial, sans-serif;
    /* margin: auto 10%; */
    padding: 0;
    background-color: #f0f0f0;
    /* Set display to flex and justify-content to center if you want to center the certificate horizontally on the Codepen page */
    /* display: flex; */
    /* justify-content: center; */
    /* padding-bottom: 100px; Add some padding at the bottom to prevent button overlap */
}

.certificate-container {
    width: 100%;
    margin: 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    background-image: linear-gradient(to bottom, #e8f7f7 0%, white 10%);
    z-index: 0;
}

.bird {
    position: absolute;
    color: #c4e8e8;
    font-size: 12px;
    transform: rotate(-20deg);
}

.content {
    position: relative;
    z-index: 1;
    padding: 0;
    /* NOTE: bg.jpg needs to be hosted online and the URL updated here */
    /* background-image: url('bg.jpg'); */
    background-position: center center;
    background-repeat: no-repeat;
}

.message-container{
    display: flex;
}

.content-wrapper {
    position: relative;
    z-index: 1;
    padding: 0 40px;
}

.certificate-header {
    text-align: center;
    padding-top: 50px;
}

.certificate-header h1 {
    color: #00adef;
    font-size: 40px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: -10px;
}

.certificate-svg {
    width: 100%;
    height: 150px;
    margin: 0 auto;
    display: block;
    margin-bottom: -20px;
}

.ribbon {
    background-color: #f65024;
    color: white;
    display: inline-block;
    padding: 8px 30px;
    font-weight: bold;
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 15px;
    position: relative;
}

.ribbon:before,
.ribbon:after {
    content: '';
    position: absolute;
    top: 0;
    border: 19px solid #f65024;
}

.ribbon:before {
    left: -19px;
    border-left-color: transparent;
}

.ribbon:after {
    right: -19px;
    border-right-color: transparent;
}

.recipient-name {
    font-size: 80px;
    font-weight: bold;
    color: #f65024;
    margin-top: 10px;
    margin-bottom: 5px;
    text-shadow: 2px 0 0 #75b545,
        -2px 0 0 #75b545,
        0 2px 0 #75b545,
        0 -2px 0 #75b545;
    font-family: 'Dancing Script', cursive; /* Apply the imported Google Font */
}

.applause {
    font-size: 26px;
    font-weight: bold;
    color: #1e2f53;
    margin-bottom: 40px;
}

.message {
    font-size: 20px;
    margin-top: 20px;
    line-height: 1.6;
    color: #1e2f53;
    max-width: 80%;
    margin: 0 auto;
}

.heart {
    color: #f65024;
    font-size: 24px;
    margin: 15px 0;
}

.signature-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.date-section {
    text-align: center;
    padding-top: 8px;
    width: 180px;
}

.date {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.date-label {
    text-transform: uppercase;
    font-size: 14px;
    color: #444;
}

.signature-section {
    text-align: center;
    width: 220px;
}

.signature-img {
    margin-bottom: 0px;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-size: 28px;
    font-weight: 700;
}

.badge {
    width: 100px;
    height: 100px;
    margin-top: -10px;
}

.footer-wave {
    width: 100%;
    height: 170px;
    background-color: #00adef;
    position: relative;
    margin-top: 50px;
}

.wave-top {
    position: absolute;
    top: -49px;
    width: 100%;
    height: 50px;
    background-color: transparent;
    overflow: hidden;
    rotate: 180deg;
}

.founder-message {
    color: white;
    padding: 30px 120px;
    font-size: 18px;
    line-height: 1.5;
    position: relative;
}

.message-title {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 10px;
    padding: 0 40px;
}

.quote-left {
    position: absolute;
    left: 80px;
    top: -40px;
    font-size: 140px;
    color: rgba(255, 255, 255, 0.6);
}

.quote-right {
    position: absolute;
    right: 80px;
    bottom: -100px;
    font-size: 140px;
    color: rgba(255, 255, 255, 0.6);
}

.logo {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 2;
}

.logo img {
    height: 100px;
}

/* Basic styling for the Save button */
button {
    padding: 10px 20px;
    background-color: #00adef;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    /* The fixed positioning is in the HTML inline style */
}

button:hover {
    background-color: #007bff;
}

// Add jQuery, dom-to-image, and jsPDF as External Scripts in JS Settings

// Function to get the ordinal suffix for a day (st, nd, rd, th)
function getOrdinal(n) {
    let s = ["th", "st", "nd", "rd"],
        v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
}

// Function to format the date as "Day Month, Year"
function formatDate(date) {
    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const day = getOrdinal(date.getDate());
    const month = months[date.getMonth()];
    const year = date.getFullYear();
    return `${day} ${month}, ${year}`;
}

// Set the current date when the page loads
// Use window.onload to ensure the HTML element exists
window.onload = function() {
    document.getElementById('certDate').textContent = formatDate(new Date());
};


// Function to save the certificate as a PDF
function saveCertificate() {
    // Get the certificate container element by its ID
    var node = document.getElementById('certificateBox');

    // Define a scale factor for better resolution in the PDF
    var scale = 2; // Render image at 2x scale

    // Calculate the scaled width and height for the image conversion
    var width = node.offsetWidth * scale;
    var height = node.offsetHeight * scale;

    // Use dom-to-image to convert the HTML node into a JPEG image
    domtoimage.toJpeg(node, {
        width: width,
        height: height,
        quality: 0.85, // Set JPEG quality (0.0 to 1.0)
        style: {
            // Apply CSS transform scale during rendering
            transform: 'scale(' + scale + ')',
            transformOrigin: 'top left' // Scale from the top-left corner
        }
    })
    .then(function (dataUrl) {
        // The result is a data URL (base64 encoded image)
        // Create a new jsPDF instance
        // 'l' for landscape, 'pt' for points unit, [original_width, original_height] for page dimensions
        var pdf = new jsPDF('l', 'pt', [node.offsetWidth, node.offsetHeight]);

        // Add the image data to the PDF
        // dataUrl: The image data
        // 'JPEG': Image format
        // 0, 0: X and Y coordinates for image placement
        // node.offsetWidth, node.offsetHeight: Width and height the image should take on the PDF page (scales the high-res image down)
        pdf.addImage(dataUrl, 'JPEG', 0, 0, node.offsetWidth, node.offsetHeight);

        // Save the PDF file
        pdf.save("certificate-of-appreciation.pdf");
    })
    .catch(function (error) {
        // Handle any errors during image conversion
        console.error('oops, something went wrong!', error);
    });
}

// Note: The commented out image saving functions from the original code are omitted here
// as the focus is on the PDF download functionality for this Codepen example.
/*
function saveCertificateAsImage(format = 'png') {
    // ... (image export code - not included in this Codepen example)
}
*/