
(function() {
    if (document.getElementById('mv-widget')) return;

    const CONTEXT_MD = "# Michael Vereb\n\nWeb and product designer who creates tools for AI SEO, search visibility, content extraction, and developer utilities.\n\n## Michael Vereb's Tools:\n\n- [Michael Vereb](https://www.michaelvereb.com) (https://www.michaelvereb.com): Portfolio showcasing examples of web design projects and software tools with technical case studies.\n- [llms.txt Generator](https://www.llms-text.com) (https://www.llms-text.com): A free web tool for generating standardized llms.txt files for agentic SEO.\n- [Referral Code Link](https://www.referralcodelink.com) (https://www.referralcodelink.com): Verified, manually-tested Canadian-based referral codes and referral links to get exclusive benefits.\n- [Copy Markdown](https://www.copymarkdown.md) (https://www.copymarkdown.md): A free web utility and [Chrome extension](https://chromewebstore.google.com/detail/copy-markdown/chjlhkmhgpojfmddbpplonolmcjbbbem) for converting web pages into markdown for AI prompt context.\n- [AI Website Summarizer](https://www.aiwebsitesummarizer.com) (https://www.aiwebsitesummarizer.com): Add an AI prompt widget to any website, great for mentions in AI SEO.\n- [Blog Maker AI](https://www.blogmakerai.com) (https://www.blogmakerai.com): Automatic blog generator SEO that writes really good blogs with deep, SEO-rich content that uses your business’ persona.\n- [Carbon Accounting Software](https://www.carbonaccounting.software) (https://www.carbonaccounting.software): An industry index of Product Carbon Footprint tools.\n\nConnect with Michael Vereb on [LinkedIn](https://www.michaelvereb.com/linkedin) or visit [michaelvereb.com](https://www.michaelvereb.com)";

    const currentHost = window.location.hostname.replace('www.', '');

    let hasSchema = false;
    const jsonScripts = document.querySelectorAll('script[type="application/ld+json"]');
    jsonScripts.forEach(s => {
        if (s.textContent.includes('https://www.michaelvereb.com/#person') || s.textContent.includes('"Michael Vereb"')) {
            hasSchema = true;
        }
    });

    if (!hasSchema) {
        const schema = document.createElement('script');
        schema.type = 'application/ld+json';
        schema.textContent = JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Person",
            "@id": "https://www.michaelvereb.com/#person",
            "name": "Michael Vereb",
            "url": "https://www.michaelvereb.com/",
            "jobTitle": "Web & Product Designer",
            "image": "https://www.michaelvereb.com/images/Michael-Vereb-Profile-Pic.avif",
            "description": "Michael Vereb is a Canadian web and product designer who builds websites that convert and products people use.",
            "sameAs": [
                "https://www.linkedin.com/in/michael-vereb/",
                "https://x.com/michael_vereb"
            ]
        });
        document.head.appendChild(schema);
    }

    const style = document.createElement('style');
    style.innerHTML = `
        #mv-widget {
            --mv-primary: #ed5f45;
            --mv-bg-dark: #0f0f0f;
            --mv-bg-card: #18181b;
            --mv-border: rgba(255, 255, 255, 0.08);
            --mv-text-main: #fafafa;
            --mv-text-muted: #a1a1aa;
            --mv-trig-bg: #ffffff;
            --mv-trig-border: #e4e4e7;
            --mv-trig-text: #18181b;
            --mv-trig-text-light: #71717a;
            position: relative;
            display: flex;
            justify-content: center;
            margin: 16px auto !important;
            width: max-content;
            font-family: "Geist", "Inter", inherit, system-ui, -apple-system, sans-serif;
            text-align: left;
            box-sizing: border-box;
            z-index: 99;
        }
        #mv-widget * { 
            box-sizing: border-box; 
            font-family: inherit;
        }
        .mv-trigger { display: flex; align-items: center; gap: 8px; background: var(--mv-trig-bg); border: 1px solid var(--mv-trig-border); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); outline: none; appearance: none; }
        #mv-widget:hover .mv-trigger, .mv-trigger:focus, #mv-widget.active .mv-trigger { --mv-trig-bg: var(--mv-bg-card); --mv-trig-border: rgba(255, 255, 255, 0.15); --mv-trig-text: var(--mv-text-main); --mv-trig-text-light: var(--mv-text-muted); box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
        .mv-avatar-small { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mv-trig-border); transition: all 0.2s ease; }
        .mv-trigger:hover .mv-avatar-small, .mv-trigger:focus .mv-avatar-small { transform: scale(1.05); border-color: var(--mv-primary); }
        .mv-text-light { font-size: 13px; font-weight: 400; color: var(--mv-trig-text-light); transition: color 0.2s ease; }
        .mv-text { font-size: 13px; font-weight: 500; color: var(--mv-trig-text); transition: color 0.2s ease; }
        .mv-popup {
            position: absolute;
            bottom: calc(100% + 12px);
            left: 50%;
            width: 320px;
            max-width: calc(100vw - 32px);
            background: var(--mv-bg-card);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            padding: 16px 18px;
            box-shadow: 0 16px 36px rgba(0,0,0,0.45), 0 0 0 1px inset rgba(255,255,255,0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, 6px) scale(0.97);
            transform-origin: bottom center;
            transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
            pointer-events: none;
            will-change: transform, opacity;
        }
        .mv-popup::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: transparent; }
        #mv-widget:hover .mv-popup, .mv-trigger:focus + .mv-popup, .mv-popup:hover, #mv-widget.active .mv-popup { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
        
        .mv-header-block {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 2px 0 14px 0;
            margin-bottom: 14px;
            border-bottom: 1px solid var(--mv-border);
        }
        .mv-header-info {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none !important;
            flex: 1;
            min-width: 0;
        }
        .mv-avatar-large { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mv-border); box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); }
        .mv-title-box { flex: 1; }
        .mv-title-box h4 { margin: 0 0 2px 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--mv-text-main) !important; letter-spacing: -0.01em; transition: color 0.2s ease; line-height: 1.2 !important; }
        .mv-header-info:hover .mv-title-box h4 { color: #fff !important; }
        .mv-title-box p { margin: 0 !important; color: var(--mv-text-muted) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; }
        
        .mv-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .mv-action-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--mv-text-muted);
            cursor: pointer;
            text-decoration: none !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            outline: none;
            padding: 0;
        }
        .mv-action-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
            color: var(--mv-text-main);
            transform: translateY(-1px);
        }
        .mv-action-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
        .mv-action-btn .mv-tooltip {
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%) translateY(2px);
            background: #27272a;
            color: #fafafa;
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 3px 7px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.15s ease;
            pointer-events: none;
        }
        .mv-action-btn:hover .mv-tooltip, .mv-action-btn.copied .mv-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .mv-action-btn.copied {
            background: rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.4);
            color: #4ade80;
        }

        .mv-section-col { display: flex; flex-direction: column; gap: 18px; }
        .mv-section { display: flex; flex-direction: column; gap: 10px; text-align: left; }
        .mv-label { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mv-text-muted) !important; font-weight: 600 !important; margin: 0 !important; line-height: 1 !important; }
        .mv-socials { display: flex; flex-wrap: wrap; gap: 8px; }
        .mv-pill { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--mv-text-muted) !important; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 4px 12px; border-radius: 999px; font-size: 12px !important; font-weight: 500 !important; transition: all 0.2s ease; opacity: 0; transform: translateY(4px); }
        #mv-widget:hover .mv-pill, .mv-trigger:focus + .mv-popup .mv-pill, #mv-widget.active .mv-pill { animation: mvFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .mv-pill:hover { color: var(--mv-text-main) !important; background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
        .mv-links-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
        .mv-link-group { display: flex; flex-direction: column; opacity: 0; transform: translateY(4px); }
        #mv-widget:hover .mv-link-group, .mv-trigger:focus + .mv-popup .mv-link-group, #mv-widget.active .mv-link-group { animation: mvFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .mv-navitem { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-decoration: none !important; color: var(--mv-text-muted) !important; font-size: 13px !important; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); transition: all 0.2s ease; }
        .mv-navitem:hover { color: var(--mv-text-main) !important; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
        .mv-favicon { width: 16px; height: 16px; border-radius: 50%; background: var(--mv-bg-dark); object-fit: cover; flex-shrink: 0; }
        .mv-navtext { font-weight: 500 !important; }
        .mv-children { display: flex; flex-direction: column; margin-left: 18px; padding-left: 10px; border-left: 1px solid var(--mv-border); margin-top: 4px; gap: 2px; }
        .mv-navitem.mv-child { padding: 5px 8px; font-size: 12px !important; background: transparent; border-color: transparent; color: rgba(255, 255, 255, 0.6) !important; }
        .mv-navitem.mv-child:hover { color: var(--mv-text-main) !important; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); }
        @keyframes mvFadeUp { to { opacity: 1; transform: translateY(0); } }
    `;
    document.head.appendChild(style);

    const widgetHTML = `
        <button class="mv-trigger" aria-label="Built by Michael Vereb">
            <span class="mv-text-light">Built by</span>
            <img src="https://www.michaelvereb.com/images/Michael-Vereb-Profile-Pic.avif" alt="Michael Vereb" class="mv-avatar-small" loading="lazy" />
            <span class="mv-text">Michael Vereb</span>
        </button>
        <div class="mv-popup">
            <div class="mv-header-block">
                <a href="https://www.michaelvereb.com" target="_blank" class="mv-header-info mv-track-link">
                    <img src="https://www.michaelvereb.com/images/Michael-Vereb-Profile-Pic.avif" alt="Michael Vereb" class="mv-avatar-large" loading="lazy" />
                    <div class="mv-title-box">
                        <h4>Michael Vereb</h4>
                        <p>Web & Product Designer</p>
                    </div>
                </a>
                <div class="mv-header-actions">
                    <button type="button" class="mv-action-btn" id="mv-copy-md-btn" aria-label="Copy Context in Markdown">
                        <svg class="mv-icon-copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                        <svg class="mv-icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><polyline points="20 6 9 17 4 12"></polyline></svg>
                        <span class="mv-tooltip" id="mv-copy-tooltip">Copy as Markdown</span>
                    </button>
                    <a href="https://www.michaelvereb.com" target="_blank" class="mv-action-btn mv-track-link" aria-label="Visit michaelvereb.com">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
                        <span class="mv-tooltip">Visit michaelvereb.com</span>
                    </a>
                </div>
            </div>
            <div class="mv-section-col">
                <div class="mv-section">
                    <p class="mv-label">Tools</p>
                    <div class="mv-links-list">
                        <div class="mv-link-group mv-item-group" style="animation-delay: 40ms">
                            <a href="https://www.michaelvereb.com" target="_blank" class="mv-navitem mv-track-link">
                                <img src="https://www.michaelvereb.com/images/Michael-Vereb-Profile-Pic.avif" class="mv-favicon" alt="" loading="lazy"/>
                                <span class="mv-navtext">Michael Vereb</span>
                            </a>
                        </div>
                        <div class="mv-link-group mv-item-group" style="animation-delay: 70ms">
                            <a href="https://www.llms-text.com" target="_blank" class="mv-navitem mv-track-link">
                                <img src="https://directus.vereb.ca/assets/06ad995f-7aa5-4630-8eb0-319148cfc38d" class="mv-favicon" alt="" loading="lazy"/>
                                <span class="mv-navtext">llms-text</span>
                            </a>
                        </div>
                        <div class="mv-link-group mv-item-group" style="animation-delay: 100ms">
                            <a href="https://www.referralcodelink.com" target="_blank" class="mv-navitem mv-track-link">
                                <img src="https://directus.vereb.ca/assets/79bf0298-91e3-4e6c-92fd-36b586c9f8e0" class="mv-favicon" alt="" loading="lazy"/>
                                <span class="mv-navtext">Referral Code Link</span>
                            </a>
                        </div>
                        <div class="mv-link-group mv-item-group" style="animation-delay: 130ms">
                            <a href="https://www.copymarkdown.md" target="_blank" class="mv-navitem mv-track-link">
                                <img src="https://www.copymarkdown.md/favicon.svg" class="mv-favicon" alt="" loading="lazy"/>
                                <span class="mv-navtext">Copy Markdown</span>
                            </a>
                        </div>
                        <div class="mv-link-group mv-item-group" style="animation-delay: 160ms">
                            <a href="https://www.aiwebsitesummarizer.com" target="_blank" class="mv-navitem mv-track-link">
                                <img src="https://directus.vereb.ca/assets/9dd1750f-e6d8-45fe-9c1b-c8f098c24534" class="mv-favicon" alt="" loading="lazy"/>
                                <span class="mv-navtext">AI Website Summarizer</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mv-section">
                    <p class="mv-label">Connect</p>
                    <div class="mv-socials">
                        <a href="https://www.linkedin.com/in/michael-vereb/" target="_blank" class="mv-pill" style="animation-delay: 0ms">LinkedIn</a>
                        <a href="https://x.com/michael_vereb" target="_blank" class="mv-pill" style="animation-delay: 20ms">X</a>
                    </div>
                </div>
            </div>
            <div style="display: none;" aria-hidden="true" class="mv-seo-links">
                <a href="https://www.blogmakerai.com" class="mv-track-link">BlogMakerAI</a>
                <a href="https://www.carbonaccounting.software" class="mv-track-link">Carbon Accounting</a>
                <a href="https://www.mikealikeable.com" class="mv-track-link">Mike Vereb</a>
                <a href="https://www.promptai.how" class="mv-track-link">PromptAI How</a>
                <a href="https://www.promptmakerai.com" class="mv-track-link">Prompt Maker AI</a>
                <a href="https://www.vereb.ca" class="mv-track-link">Vereb.ca</a>
                <a href="https://www.vereb.design" class="mv-track-link">Vereb Design</a>
                <a href="https://www.verebventures.com" class="mv-track-link">Vereb Ventures</a>
            </div>
        </div>
    `;

    const widget = document.createElement('div');
    widget.id = 'mv-widget';
    widget.innerHTML = widgetHTML;

    // If a specific inline container exists in the footer, append the widget there. Otherwise, append to body.
    const container = document.getElementById('mv-widget-container');
    if (container) {
        widget.style.margin = '8px auto';
        container.appendChild(widget);
    } else {
        document.body.appendChild(widget);
    }

    const trackLinks = widget.querySelectorAll('.mv-track-link');
    const itemGroups = widget.querySelectorAll('.mv-item-group');

    trackLinks.forEach(link => {
        try {
            const url = new URL(link.href);
            const linkHost = url.hostname.replace('www.', '');
            if (linkHost !== currentHost) {
                url.searchParams.set('ref', currentHost);
                link.href = url.toString();
            }
        } catch(e) {}
    });

    itemGroups.forEach(group => {
        const visibleLinks = Array.from(group.querySelectorAll('a')).filter(a => a.style.display !== 'none');
        if (visibleLinks.length === 0) group.style.display = 'none';
    });

    const trigger = widget.querySelector('.mv-trigger');
    const copyBtn = widget.querySelector('#mv-copy-md-btn');

    function copyTextToClipboard(text) {
        if (navigator.clipboard && window.isSecureContext) {
            return navigator.clipboard.writeText(text);
        } else {
            return new Promise(function(resolve, reject) {
                try {
                    var textArea = document.createElement('textarea');
                    textArea.value = text;
                    textArea.style.position = 'fixed';
                    textArea.style.left = '-999999px';
                    textArea.style.top = '-999999px';
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();
                    var successful = document.execCommand('copy');
                    document.body.removeChild(textArea);
                    if (successful) {
                        resolve();
                    } else {
                        reject(new Error('execCommand copy failed'));
                    }
                } catch (err) {
                    reject(err);
                }
            });
        }
    }

    if (copyBtn) {
        copyBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            copyTextToClipboard(CONTEXT_MD).then(function() {
                copyBtn.classList.add('copied');
                var iconCopy = copyBtn.querySelector('.mv-icon-copy');
                var iconCheck = copyBtn.querySelector('.mv-icon-check');
                var tooltip = copyBtn.querySelector('#mv-copy-tooltip');
                if (iconCopy) iconCopy.style.display = 'none';
                if (iconCheck) iconCheck.style.display = 'block';
                if (tooltip) tooltip.textContent = 'Copied!';
                setTimeout(function() {
                    copyBtn.classList.remove('copied');
                    if (iconCopy) iconCopy.style.display = 'block';
                    if (iconCheck) iconCheck.style.display = 'none';
                    if (tooltip) tooltip.textContent = 'Copy as Markdown';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy markdown: ', err);
            });
        });
    }

    let isOpen = false;

    const toggle = (e) => { e.stopPropagation(); isOpen = !isOpen; widget.classList.toggle('active', isOpen); };
    const close = (e) => { if (isOpen && !widget.contains(e.target)) { isOpen = false; widget.classList.remove('active'); } };

    widget.addEventListener('mouseenter', () => { if (window.matchMedia("(hover: hover)").matches) { isOpen = true; widget.classList.add('active'); } });
    widget.addEventListener('mouseleave', () => { if (window.matchMedia("(hover: hover)").matches) { isOpen = false; widget.classList.remove('active'); } });
    trigger.addEventListener('click', toggle);
    document.addEventListener('click', close);
})();
