function hero(it) { clearTimeout(ht); ht = setTimeout(() => applyHero(it), 130) }
async function applyHero(it) {
    if (heroIt === it) return; heroIt = it; $('.hc').classList.remove('sl');
    const bp = it.backdrop_path || it.poster_path;
    xf(bgb, I + 'w780' + bp); xf(hb, I + 'w1280' + bp);
    const t = it.title || it.name;
    $('#hlogo').innerHTML = `<h1>${t}</h1>`;
    $('#hmeta').innerHTML = `<span>&#9733; ${(it.vote_average || 0).toFixed(1)}</span><span>${yr(it)}</span><span class="b">${it._t === 'movie' ? 'Movie' : 'Series'}</span><span>${gn(it)}</span>`;
    $('#hov').textContent = it.overview || '';
    const l = await logo(it);
    if (heroIt === it && l) $('#hlogo').innerHTML = `<img src="${l}" alt="${t.replace(/"/g, '')}">`
}

function card(it, h = true) {
    const c = document.createElement('div'); c.className = 'card f'; c.tabIndex = -1;
    c.innerHTML = `<img loading="lazy" src="${I}w342${it.poster_path}" alt="">`;
    if (h) c._it = it; c._a = () => openDetail(it); return c
}

function mkRow(i) {
    const mv = mode === "movie" || (mode === "discover" && i % 2 === 0), k = mode === "discover" ? i >> 1 : i, list = mv ? MG : TG, g = list[k % list.length], pg = 1 + Math.floor(k / list.length) % 20;
    const sec = document.createElement('section'); sec.className = 'sec';
    sec.innerHTML = `<h2>${g.name} ${mv ? 'Movies' : 'TV Shows'}</h2><div class="row">${SK.cards(14)}</div>`;
    rowsEl.appendChild(sec);
    return api(`/discover/${mv ? 'movie' : 'tv'}`, `&with_genres=${g.id}&sort_by=popularity.desc&vote_count.gte=100&include_adult=false&page=${pg}`).then(d => {
        const rs = (d.results || []).filter(x => x.poster_path);
        if (!rs.length) { sec.remove(); return }
        sec.lastChild.innerHTML = ''; rs.forEach(x => { x._t = mv ? 'movie' : 'tv'; sec.lastChild.appendChild(card(x)) })
    })
}

async function more(n) {
    if (busy) return; busy = true; const g = gen;
    const ps = []; for (let j = 0; j < n; j++)ps.push(mkRow(idx++));
    await Promise.all(ps); if (g === gen) busy = false
}

async function go(k) {
    if (k === 'search') { closeLib(true); openSearch(); return }
    closeSearch(true);
    if (k === 'wl' || k === 'fav') { openLib(k); return }
    closeLib(true);
    if (k === mode && rowsEl.children.length) { setAct(k); setFocus(document.querySelector('#rows .card')); return }
    mode = k; setAct(k); gen++; busy = false; idx = 0; heroIt = null; lastMain = null; rowsEl.innerHTML = ''; main.scrollTop = 0; $('.hc').classList.add('sl');
    await more(6);
    const first = document.querySelector('#rows .card');
    if (first) { applyHero(first._it); setFocus(first) }
}

main.addEventListener('scroll', () => {
    const h = innerHeight;
    $('#dim2').style.opacity = Math.min(main.scrollTop / (h * .6), 1) * .55;
    if (main.scrollTop + h * 2.5 > main.scrollHeight) more(4)
});

$('#hplay')._a = () => openPlayer(heroIt);
$('#hinfo')._a = () => heroIt && openDetail(heroIt);