(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Function to create elements and return the element
        function injectStyles(css) {
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerText = css.trim();
            document.head.appendChild(style);
        }

        // CSS styles as provided
        var css = `
            *,::after,::before{box-sizing:border-box;}
            label{display:inline-block;margin-bottom:.5rem;}
            button{border-radius:0;}
            button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color;}
            button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;}
            button,input{overflow:visible;}
            button{text-transform:none;}
            [type=submit],button{-webkit-appearance:button;}
            [type=submit]:not(:disabled),button:not(:disabled){cursor:pointer;}
            .form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
            @media (prefers-reduced-motion:reduce){
                .form-control{transition:none;}
            }
            .form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);}
            .form-control::placeholder{color:#6c757d;opacity:1;}
            .form-control:disabled{background-color:#e9ecef;opacity:1;}
            .form-group{margin-bottom:1rem;}
            .btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
            @media (prefers-reduced-motion:reduce){
                .btn{transition:none;}
            }
            .btn:hover{color:#212529;text-decoration:none;}
            .btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);}
            .btn:disabled{opacity:.65;}
            .btn:not(:disabled):not(.disabled){cursor:pointer;}
            .btn-primary{color:#fff;background-color:#007bff;border-color:#007bff;}
            .btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc;}
            .btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5);}
            .btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff;}
            .btn-primary:not(:disabled):not(.disabled):active{color:#fff;background-color:#0062cc;border-color:#005cbf;}
            .btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5);}
            @media print{
                *,::after,::before{text-shadow:none!important;box-shadow:none!important;}
            }
        `;

        // Inject styles into the document
        injectStyles(css);
        function createElement(type, attributes) {
            var element = document.createElement(type);
            for (var key in attributes) {
                if (attributes.hasOwnProperty(key)) {
                    element[key] = attributes[key];
                }
            }
            return element;
        }

        // Function to append children to a parent
        function appendChildren(parent, children) {
            children.forEach(function(child) {
                parent.appendChild(child);
            });
        }

        // Function to initialize the magic link form
        function initMagicLinkForm(target) {
            var form = createElement('form', { id: 'magicLinkForm' });
            var formGroup = createElement('div', { className: 'form-group' });
            var label = createElement('label', { htmlFor: 'emailInput', textContent: 'Email address' });
            var input = createElement('input', {
                type: 'email',
                className: 'form-control',
                id: 'emailInput',
                ariaDescribedby: 'emailHelp',
                placeholder: 'Enter email',
                required: true
            });
            var button = createElement('button', {
                type: 'submit',
                className: 'btn btn-primary',
                textContent: 'Register'
            });

            // Append label and input to formGroup
            appendChildren(formGroup, [label, input]);

            // Append formGroup and button to form
            appendChildren(form, [formGroup, button]);

            // Event listener for form submission
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                sendMagicLink(input.value);
            });

            // Append the form to the target div
            target.appendChild(form);
        }

        // Function to send the magic link
        function sendMagicLink(email) {
            fetch('//spf.logichop.com/portal/magiclink', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email: email }),
            })
                .then(response => {
                    if (response.ok) {
                        alert('Magic link sent successfully. Check your email to continue.');
                    } else {
                        alert('Failed to send the magic link. Please try again.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                });
        }

        // Find all divs with the class 'magiclinkhop' and initialize forms
        var targetDivs = document.querySelectorAll('.magiclinkhop');
        targetDivs.forEach(initMagicLinkForm);
    });
})();