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

    var userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
    if (userLang.startsWith('de')) return;
    if (location.hostname.toLowerCase().startsWith('en.')) return;

    if (document.getElementById('translateBannerMain')) return;

    var css = `
#translateBannerMain.translate-banner {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(92vw, 720px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    padding: 10px 40px 10px 20px;
    background: #323232;
    border: 1px solid #2a2a2a;
    border-left: 4px solid #76b852;
    color: #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,.4);
    animation: tb-in .35s ease-out both;
}
#translateBannerMain .tb-text strong { 
    line-height: 1.4;
}
#translateBannerMain .tb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
#translateBannerMain .tb-btn {
    background: #76b852;
    color: #111;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}
#translateBannerMain .tb-btn:hover { 
    opacity: .7; 
    text-decoration: none;
}
#translateBannerMain .tb-skip {
    color: #bdbdbd;
    text-decoration: underline;
    font-size: 0.9em;
    white-space: nowrap;
}
#translateBannerMain .tb-skip:hover { color: #fff; }
#translateBannerMain .tb-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    line-height: 22px;
    text-align: center;
    background: none;
    color: #ccc;
    border: 0;
    cursor: pointer;
    z-index: 3;
}
@keyframes tb-in {
    from { opacity: 0; transform: translate(-50%, 15px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 600px) {
    #translateBannerMain.translate-banner {
        grid-template-columns: 1fr;
        padding-right: 54px; /* keep space for close button */
        width: calc(100vw - 16px); /* slight gutter on mobile */
        margin-bottom: 0;
    }
    #translateBannerMain .tb-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    #translateBannerMain.translate-banner { animation: none; }
}`;
    var styleEl = document.createElement('style');
    styleEl.setAttribute('data-lang-banner', 'true');
    styleEl.textContent = css;
    document.head.appendChild(styleEl);

    var banner = document.createElement('div');
    banner.id = 'translateBannerMain';
    banner.className = 'translate-banner';
    banner.setAttribute('role', 'region');
    banner.setAttribute('aria-live', 'polite');
    banner.innerHTML = `
        <div class="tb-text">
            <strong>Prefer English?</strong><br>
            <small>An English version of this website is available at <b>en.nirastich.com</b></small>
        </div>
        <div class="tb-actions">
            <a class="tb-btn" href="proxy.php?url=https%3A%2F%2Fen.nirastich.com">Go to en.nirastich.com</a>
            <a class="tb-skip" href="#" aria-label="Don’t show again">Don’t show again</a>
        </div>
        <button class="tb-close" aria-label="Close">×</button>
    `;

    document.body.appendChild(banner);

    var closeBtn = banner.querySelector('.tb-close');
    var skipLink = banner.querySelector('.tb-skip');

    closeBtn.addEventListener('click', function () {
        banner.remove();
    });

    skipLink.addEventListener('click', function (e) {
        e.preventDefault();
        localStorage.setItem('noBanner', 'true');
        banner.remove();
    });

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