document.addEventListener('DOMContentLoaded', function () {
    if (localStorage.getItem('welcomeSeen') === 'true') return;

    var host = location.hostname.toLowerCase();
    var isMainDomain = !(host.startsWith('en.') || host.startsWith('blog.'));
    var isHomePath = location.pathname === '/' || location.pathname === '';
    if (!isMainDomain || !isHomePath) return;

    var userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
    var isGerman = userLang.startsWith('de');
    var postUrl = isGerman ? 'https://blog.nirastich.com/willkommen' : 'https://en.nirastich.com/welcome';
    var titleText = isGerman ? 'Willkommen auf Nirastich.com!' : 'Welcome to Nirastich.com!';
    var messageText = isGerman
        ? 'Ich habe einen kurzen Willkommensbeitrag geschrieben, um mich und die Webseite vorzustellen :)'
        : 'I wrote a short welcome post to introduce myself and the website :)';
    var readNowText = isGerman ? 'Beitrag lesen' : 'Read post';
    var laterText = isGerman ? 'Nein danke' : 'No thanks';
    var closeLabel = isGerman ? 'Schließen' : 'Close';

    var css = `
#welcomeOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: rgba(0,0,0,.75);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlay-in .3s ease-out both;
}
#welcomePopup {
    background: #1e1e1e;
    color: #e9e9e9;
    border: 1px solid #2a2a2a;
    border-left: 4px solid #76b852;
    border-radius: 12px;
    padding: 22px 52px 22px 22px;
    max-width: min(92vw, 460px);
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
    animation: popup-in .3s ease-out both;
}
#welcomePopup h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    line-height: 1.3;
}
#welcomePopup p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.45;
    color: #cfcfcf;
}
#welcomePopup .wp-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#welcomePopup .wp-btn {
    background: #76b852;
    color: #111;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .95rem;
    text-decoration: none;
}
#welcomePopup .wp-btn:hover { opacity: .8; text-decoration: none; }
#welcomePopup .wp-secondary {
    background: transparent;
    color: #bdbdbd;
    cursor: pointer;
    border: 1px solid #3a3a3a;
}
#welcomePopup .wp-secondary:hover { color: #fff; border-color: #4a4a4a; }
#welcomePopup .wp-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: none;
    color: #cfcfcf;
    border: 0;
    cursor: pointer;
    border-radius: 6px;
}
#welcomePopup .wp-close:hover { background: rgba(255,255,255,.06); color: #fff; }
@keyframes popup-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #welcomeOverlay, #welcomePopup { animation: none; }
}`;
    var styleEl = document.createElement('style');
    styleEl.setAttribute('data-welcome-popup', 'true');
    styleEl.textContent = css;
    document.head.appendChild(styleEl);

    var overlay = document.createElement('div');
    overlay.id = 'welcomeOverlay';
    overlay.setAttribute('role', 'dialog');
    overlay.setAttribute('aria-live', 'polite');
    overlay.setAttribute('aria-label', titleText);
    overlay.innerHTML = `
        <div id="welcomePopup">
            <button class="wp-close" aria-label="${closeLabel}">×</button>
            <h3>${titleText}</h3>
            <p>${messageText}</p>
            <div class="wp-actions">
                <a class="wp-btn" href="proxy.php?url=https%3A%2F%2Fnirastich.com%2F%24%7BpostUrl%7D" rel="noopener" target="_blank">${readNowText}</a>
                <button class="wp-btn wp-secondary" type="button">${laterText}</button>
            </div>
        </div>
    `;
    document.body.appendChild(overlay);

    var popup = overlay.querySelector('#welcomePopup');
    var closeBtn = popup.querySelector('.wp-close');
    var readBtn = popup.querySelector('.wp-btn');
    var laterBtn = popup.querySelector('.wp-secondary');

    function dismiss() {
        try { localStorage.setItem('welcomeSeen', 'true'); } catch (_) {}
        overlay.remove();
    }

    closeBtn.addEventListener('click', dismiss);
    laterBtn.addEventListener('click', dismiss);
    readBtn.addEventListener('click', dismiss);
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) dismiss();
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') dismiss();
    }, { once: true });
});