Starborn Shield

(() => {
    const styles = document.createElement('style');
    styles.textContent = `
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes slideUp {
            from { transform: translate(-50%, 60%); opacity: 0; }
            to { transform: translate(-50%, -50%); opacity: 1; }
        }

        [data-demo-purchase] {
            cursor: pointer;
        }

        .demo-modal-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .demo-modal {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 1.5rem;
            box-shadow: 
                0 24px 48px -12px rgba(0, 0, 0, 0.18),
                0 0 1px rgba(0, 0, 0, 0.1);
            padding: 4rem;
            max-width: 40rem;
            width: calc(100% - 3rem);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .demo-modal-content {
            text-align: center;
        }

        .demo-modal-icon {
            width: 6rem;
            height: 6rem;
            margin: 0 auto 2.5rem;
            color: #1d1d1f;
            opacity: 0.9;
        }

        .demo-modal-title {
            font-size: 2.5rem;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 1.5rem;
            letter-spacing: -0.01em;
            line-height: 1.3;
        }

        .demo-modal-text {
            color: #424245;
            margin-bottom: 3rem;
            font-size: 1.5rem;
            line-height: 1.5;
            font-weight: 400;
        }

        .demo-modal-button {
            background-color: #1d1d1f;
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 980px;
            font-weight: 500;
            font-size: 1.25rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            outline: none;
            min-width: 180px;
        }

        .demo-modal-button:hover {
            background-color: #000000;
            transform: scale(1.02);
        }

        .demo-modal-button:active {
            transform: scale(0.98);
        }

        @media (max-width: 768px) {
            .demo-modal {
                padding: 2.5rem;
                width: calc(100% - 2rem);
            }
            
            .demo-modal-title {
                font-size: 2rem;
            }
            
            .demo-modal-text {
                font-size: 1.25rem;
                margin-bottom: 2.5rem;
            }
            
            .demo-modal-button {
                font-size: 1.125rem;
                padding: 0.875rem 2rem;
            }

            .demo-modal-icon {
                width: 4.5rem;
                height: 4.5rem;
                margin-bottom: 2rem;
            }
        }
    `;
    document.head.appendChild(styles);

    const modalHTML = `
        <div class="demo-modal-backdrop" id="demo-modal">
            <div class="demo-modal">
                <div class="demo-modal-content">
                    <div class="demo-modal-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                        </svg>
                    </div>
                    <h3 class="demo-modal-title">Demo Version</h3>
                    <p class="demo-modal-text">This is a demonstration version. The purchase process has been disabled for testing purposes.</p>
                    <button class="demo-modal-button" onclick="document.getElementById('demo-modal').remove()">
                        Got it
                    </button>
                </div>
            </div>
        </div>
    `;

    function showDemoModal(event) {
        event.preventDefault();
        event.stopPropagation();
        const existingModal = document.getElementById('demo-modal');
        if (existingModal) existingModal.remove();
        document.body.insertAdjacentHTML('beforeend', modalHTML);
        const modal = document.getElementById('demo-modal');
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        });
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                const modal = document.getElementById('demo-modal');
                if (modal) modal.remove();
                document.removeEventListener('keydown', handleEscape);
            }
        };
        document.addEventListener('keydown', handleEscape);
    }

    function initializeDemoElements() {
        const demoElements = document.querySelectorAll('[data-demo-purchase]');
        demoElements.forEach(element => {
            element.removeEventListener('click', showDemoModal);
            element.addEventListener('click', showDemoModal);
            element.style.cursor = 'pointer';
            if (element.tagName === 'FORM') {
                element.addEventListener('submit', (e) => {
                    e.preventDefault();
                    showDemoModal(e);
                });
            }
        });
    }

    function handleUrlClick(event) {
        const link = event.target.closest('a');
        if (!link) return;
        if (link.hasAttribute('data-demo-purchase')) return;
        const href = link.getAttribute('href');
        if (href && (
            href.includes('collections/shield') ||
            href.includes('/collections/shield/')
        )) {
            showDemoModal(event);
        }
    }

    initializeDemoElements();

    document.addEventListener('click', handleUrlClick, true);

    const observer = new MutationObserver(initializeDemoElements);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();