const popupCSS = `
<style>
    .popup-window-bg {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 100;
    }

    .popup-window {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        z-index: 101;
        width: 70%;
        padding: 10px;
        border-radius: 10px;
    }

    .popup-window-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 20px;
    }

    .popup-window-body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0px 20px;
        gap: 40px;
    }

    .popup-window-s1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        color: white;
        box-shadow: 0px 0px 5px 0px #565656;
    }

    .popup-window-s1:hover {
        box-shadow: 0px 0px 10px 0px #565656;
        transition: box-shadow 0.5s ease;
    }

    .popup-window-s1-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 40px;
    }

    .popup-window-s1-content-link {
        padding: 5px 10px;
        border-radius: 5px;
        background: #fff;
        color: #000;
        text-decoration: none;
        box-shadow: 0px 0px 5px 0px #ccc;
    }

    .popup-window-s1-content-link:hover {
        box-shadow: 0px 0px 10px 0px #ccc;
    }


    .popup-window-s2 {
        gap: 20px;
        border-radius: 10px;
        padding-bottom: 10px;
        width: 100%;
    }

    .popup-window-s2-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .popup-window-s3 img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 10px;
    }


    .popup-window-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .popup-window-footer-s1 {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }

    .ownby-url {    
        font-size: 12px;
        color: #615DFF;
        text-decoration: none;
    }

    .ownby-url:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .popup-window {
            width: 90%;
            height: 90%;
            padding: 10px;
            overflow: auto;

        }

        .popup-window-body {
            grid-template-columns: 1fr;
            padding: 0px 20px;
            gap: 40px;
        }

        .popup-window-s1-content {
            padding: 10px 20px;
        }

        .popup-window-s1-content-link {
            padding: 5px 10px;
        }

        .popup-window-s3 img {
            height: 150px;
        }

        .popup-window-footer {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }

        .popup-window-footer-s1 {
            display: flex;
            width: 100%;
            align-items: center;
            
        }
    }
</style>

`

const popupHtml = popupCSS + `

<div class="popup-window-bg">
</div>

<div class="popup-window">
    <div class="popup-window-head">
        <div>
            <span style="font-size: 20px; font-weight: 600;">
                Attend our upcoming series on Generative AI
            </span>
            <a 
                style="padding: 5px 10px; border-radius: 5px; background: #615DFF; color: #fff; text-decoration: none; box-shadow: 0px 0px 5px 0px #ccc;"
                rel="noopener"
                href="https://lu.ma/everydayseries"
                target="_blank"
            >
                Join the series
            </a>

        </div>
        <div class="popup-window-close" onclick="closeWindow()">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M12 20.4998C16.6944 20.4998 20.5 16.6942 20.5 11.9998C20.5 7.30534 16.6944 3.49976 12 3.49976C7.30558 3.49976 3.5 7.30534 3.5 11.9998C3.5 16.6942 7.30558 20.4998 12 20.4998ZM12 21.9998C17.5228 21.9998 22 17.5226 22 11.9998C22 6.47691 17.5228 1.99976 12 1.99976C6.47715 1.99976 2 6.47691 2 11.9998C2 17.5226 6.47715 21.9998 12 21.9998ZM8.58437 8.70457C8.87253 8.40701 9.34734 8.39939 9.64489 8.68754L11.9796 10.9485L14.2473 8.60675C14.5354 8.30919 15.0103 8.30157 15.3078 8.58972C15.6054 8.87787 15.613 9.35269 15.3248 9.65024L13.0571 11.992L15.3918 14.2529C15.6894 14.541 15.697 15.0158 15.4089 15.3134C15.1207 15.611 14.6459 15.6186 14.3483 15.3304L12.0136 13.0695L9.75951 15.3972C9.47135 15.6947 8.99654 15.7024 8.69898 15.4142C8.40143 15.1261 8.3938 14.6512 8.68196 14.3537L10.9361 12.026L8.6014 9.76509C8.30384 9.47694 8.29622 9.00213 8.58437 8.70457Z"
                    fill="#BBBBBB" />
            </svg>
        </div>
    </div>

    <div class="popup-window-body">
        <div class="popup-window-s1" style="background: #615DFF;">
            <div class="popup-window-s2" style="background: #5754E5;">
                <div class="popup-window-s3">
                    <img src="https://images.unsplash.com/photo-1548393488-ae8f117cbc1c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDI0fHxzdHVkeXxlbnwwfHx8fDE3MDg2MDY0MDB8MA&ixlib=rb-4.0.3&q=80&w=2000"
                        alt="Image">
                </div>
                <div class="popup-window-s2-content">
                    <span style="font-size: 20px; font-weight: 600;">
                        Learn
                    </span>
                    <a 
                        rel="noopener" 
                        href="https://everydayseries.com" 
                        target="_blank"
                        style="color: white; font-size: 17px;"
                    >
                        everydayseries.com
                    </a>
                </div>
            </div>


            <div class="popup-window-s1-content">
                <span style="font-size: 12px; ">
                    A cutting-edge platform that leverages artificial intelligence to provide personalized and
                    adaptive learning experiences for individuals and organizations. (Mobile App coming soon)
                </span>
                <a rel="noopener" class="popup-window-s1-content-link" href="https://everydayseries.com"
                    target="_blank">
                    Learn More
                </a>
            </div>
        </div>



        <div class="popup-window-s1" style="background: #A93BFF;">
            <div class="popup-window-s2" style="background: #9835E5;">
                <div class="popup-window-s3">
                    <img src="https://images.unsplash.com/photo-1664526937033-fe2c11f1be25?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE5fHxub2RlfGVufDB8fHx8MTcwODYwNjU1NXww&ixlib=rb-4.0.3&q=80&w=2000"
                        alt="Image">
                </div>
                <div class="popup-window-s2-content">
                    <span style="font-size: 20px; font-weight: 600;">
                        Build
                    </span>
                    <a 
                        rel="noopener" 
                        href="https://everydayseries.io" 
                        target="_blank"
                        style="color: white; font-size: 17px;"
                    >
                        everydayseries.io
                    </a>
                </div>
            </div>


            <div class="popup-window-s1-content">
                <span style="font-size: 12px; ">
                    Empower your users and add AI to your products. An AI platform with customizable building blocks for creating and deploying intelligent applications with ease.
                </span>
                <a class="popup-window-s1-content-link" href="https://meetings-eu1.hubspot.com/meetings/gaurav-gandhi" target="_blank"
                    rel="noopener">
                    Book a Demo
                </a>
            </div>
        </div>


        <div class="popup-window-s1" style="background: #36D1B7;">
            <div class="popup-window-s2" style="background: #30BCB5;">
                <div class="popup-window-s3">
                    <img src="https://images.unsplash.com/photo-1708275245585-ec4e217e4ed5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8YWxsfDV8fHx8fHwyfHwxNzA4NDI4OTcxfA&ixlib=rb-4.0.3&q=80&w=1080"
                        alt="Image">
                </div>
                <div class="popup-window-s2-content">
                    <span style="font-size: 20px; font-weight: 600;">
                        Enterprise
                    </span>
                    <a 
                        rel="noopener" 
                        href="https://everydayseries.ai" 
                        target="_blank"
                        style="color: white; font-size: 17px;"
                    >
                        everydayseries.ai
                    </a>
                </div>
            </div>


            <div class="popup-window-s1-content">
                <span
                    style="font-size: 12px; "
                >
                    Join forces with us as a partner and unlock new opportunities for growth while delivering
                    cutting-edge AI including Generative AI solutions to your clients.
                </span>
                <a rel="noopener" class="popup-window-s1-content-link" href="https://everydayseries.ai"
                    target="_blank">
                    Partner with us
                </a>
            </div>
        </div>
    </div>

    <div class="popup-window-footer">

        <div class="popup-window-footer-s1">
            <span
                style="font-size: 16px; "
            >
                We run on Microsoft Azure
            </span>
            <a 
                rel="noopener"
                href="https://azure.microsoft.com/en-us/"
                target="_blank"
                style="width: 20px; height: 20px;"
            >
                <img 
                    src="data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OS4yNDIiIGhlaWdodD0iNDcuMjcxIj48cGF0aCBmaWxsPSIjMDA3MmM2IiBkPSJNMzIuMzY4IDAgMTQuOSAxNS4xNDUgMCA0MS44OTVoMTMuNDM3Wm0yLjMyMyAzLjU0My03LjQ1NCAyMS4wMDggMTQuMjkxIDE3Ljk1NkwxMy44IDQ3LjI3MWg0NS40NDJaIi8+PC9zdmc+"
                    alt="azure" 
                    style="width: 20px; height: 20px;"
                />
            </a>
        </div>

        <div class="popup-window-footer-s1">
            <span
                style="font-size: 16px; "
            >
                Supported by Microsoft For Startups
            </span>
            <a 
                rel="noopener" 
                href="https://startups.microsoft.com/en-us/" 
                target="_blank"
                style="width: 20px; height: 20px;"
            >
                <img 
                    src="data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTguNSA3LjVIMTZ2LTdhLjUuNSAwIDAgMC0uNS0uNWgtN3Y3LjV6IiBmaWxsPSIjNENBRjUwIi8+PHBhdGggZD0iTTcuNSA3LjVWMGgtN2EuNS41IDAgMCAwLS41LjV2N2g3LjV6IiBmaWxsPSIjRjQ0MzM2Ii8+PHBhdGggZD0iTTcuNSA4LjVIMHY3YS41LjUgMCAwIDAgLjUuNWg3VjguNXoiIGZpbGw9IiMyMTk2RjMiLz48cGF0aCBkPSJNOC41IDguNVYxNmg3YS41LjUgMCAwIDAgLjUtLjV2LTdIOC41eiIgZmlsbD0iI0ZGQzEwNyIvPjwvc3ZnPg=="
                    alt="microsoft" 
                    style="width: 20px; height: 20px;"
                />
            </a>
        </div>

    </div>

    <div
        style="padding: 10px 20px; display: flex; gap: 10px;"
    >
        
            <span style="font-size: 12px; ">
                Owned by:
            </span>
        
        <div
            style="display: flex; flex-direction: column;"
        >
            <a
                rel="noopener"
                href="https://find-and-update.company-information.service.gov.uk/company/12086529"
                target="_blank"
                class="ownby-url"
            >
                Advanced Nonlinear Technologies Ltd.
                
            </a>
            <a
                rel="noopener"
                href="https://find-and-update.company-information.service.gov.uk/company/12086529"
                target="_blank"
                class="ownby-url"
            >
                20-22 Wenlock Road, London, England.
            </a>
        </div>

        
        
    </div>
</div>

`
const body = document.querySelector('body');

console.log('popup.js loaded');

body.innerHTML = popupHtml + body.innerHTML;


const popupWindowBg = document.querySelector('.popup-window-bg');
const popupWindow = document.querySelector('.popup-window');
const lastOpenedTime = localStorage.getItem('lastOpenedTime');
console.log('lastOpenedTime', lastOpenedTime);

const closeWindow = () => {
    popupWindowBg.style.display = 'none';
    popupWindow.style.display = 'none';
}

// display after 10 seconds
const displayAfter = 1000 * 60 * 5;
// const displayAfter = 1000;


if (lastOpenedTime) {
    const currentTime = new Date().getTime();
    const timeDifference = currentTime - lastOpenedTime;

    if (timeDifference > displayAfter) {
        localStorage.setItem('lastOpenedTime', new Date().getTime());
        popupWindowBg.style.display = 'block';
        popupWindow.style.display = 'block';
    }
} else {
    localStorage.setItem('lastOpenedTime', new Date().getTime());
    popupWindowBg.style.display = 'block';
    popupWindow.style.display = 'block';
}



// update footer 

const footer__copy = document.querySelector('.footer__copy');
console.log("🚀 ~ footer__copy:", footer__copy)
// update footer
footer__copy.innerHTML = `
&copy;
<a href="https://find-and-update.company-information.service.gov.uk/company/12086529" target="_blank" rel="noopener">Advanced Nonlinear Technologies Ltd 2024.</a> Published with Ghost and Reino.
`