// ponytail: list built once from the folder contents; add a clip, reload.
const CLIPS = [
    "vids/Larp 1.mp4", "vids/Larp 2.mp4", "vids/Larp 3.mp4", "vids/Larp 4.mp4",
    "vids/Larp 5.mp4", "vids/Larp 7.mp4", "vids/Larp 9.mp4", "vids/Larp 14.mp4",
    "vids/Larp 15.mp4", "vids/Larp 17.mp4", "vids/Larp 19.mp4", "vids/Larp 28.mp4",
    "vids/Larp 30.mp4", "vids/Larp 32.mp4", "vids/Larp 33.mp4", "vids/Larp 35.mp4",
    "vids/Larp 37.mp4", "vids/Larp 38.mp4", "vids/Larp 39.mp4", "vids/Larp 40.mp4",
    "vids/Larp 41.mp4", "vids/Larp 42.mp4", "vids/Larp 43.mp4", "vids/Larp 44.mp4",
    "vids/Larp 45.mp4", "vids/Larp 46.mp4", "vids/Larp 47.mp4", "vids/Larp 48.mp4",
    "vids/kbun.mp4", "vids/l f.mp4", "vids/l for.mp4"
];

const ROTATION_MS = 9000;
let index = 0;
let revealed = false;

function makeSlide(src) {
    const slide = document.createElement("div");
    slide.className = "slide";
    const v = document.createElement("video");
    v.src = src; v.muted = true; v.loop = true; v.playsInline = true;
    v.autoplay = true;
    slide.appendChild(v);
    return slide;
}

function cycle() {
    const container = document.getElementById("art-container");
    const fade = document.getElementById("fade-in");
    const incoming = makeSlide(CLIPS[index]);
    container.appendChild(incoming);

    const v = incoming.querySelector("video");
    const play = () => {
        v.play().catch(() => {});
        incoming.classList.add("zoom-in");
        requestAnimationFrame(() => incoming.classList.add("show")); // fades in via opacity
        // fade out previous
        [...container.querySelectorAll(".slide")].forEach(s => {
            if (s !== incoming) s.style.opacity = "0";
        });
        // lift the black overlay + fade in all UI once the first clip is playing
        if (!revealed) {
            revealed = true;
            if (fade) fade.classList.add("done");
            document.querySelector(".center-stage")?.classList.add("show");
            document.querySelector(".bottom-ui")?.classList.add("show");
        }
    };
    if (v.readyState >= 2) play();
    else v.addEventListener("loadeddata", play, { once: true });

    index = (index + 1) % CLIPS.length;

    setTimeout(() => {
        // remove old slides
        [...container.querySelectorAll(".slide")].forEach(s => {
            if (s !== incoming) s.remove();
        });
        cycle();
    }, ROTATION_MS);
}

function enter() {
    document.getElementById("btn-enter").blur();
    // restart intro animation
    document.querySelectorAll(".center-stage, .bottom-ui")
        .forEach(el => { el.classList.remove("show"); void el.offsetWidth; el.classList.add("show"); });
}

function restart() {
    index = 0;
    document.getElementById("art-container").innerHTML = "";
    cycle();
    enter();
}

function buildEmbers() {
    const wrap = document.getElementById("embers");
    if (!wrap) return;
    const count = 24;
    for (let i = 0; i < count; i++) {
        const e = document.createElement("div");
        e.className = "ember";
        e.style.left = Math.random() * 100 + "%";
        e.style.animationDuration = (8 + Math.random() * 10) + "s";
        e.style.animationDelay = (Math.random() * 12) + "s";
        e.style.setProperty("--drift", (Math.random() * 80 - 40) + "px");
        const s = 2 + Math.random() * 3;
        e.style.width = s + "px"; e.style.height = s + "px";
        wrap.appendChild(e);
    }
}

window.addEventListener("DOMContentLoaded", () => {
    buildEmbers();
    cycle();
    initAudio();
    document.getElementById("btn-enter").addEventListener("click", enter);
    document.getElementById("btn-restart").addEventListener("click", restart);
});

function initAudio() {
    const audio = document.getElementById("bg-audio");
    const toggle = document.getElementById("audio-toggle");
    const icon = document.getElementById("audio-icon");
    if (!audio || !toggle) return;

    audio.volume = 0.5;
    audio.muted = true;
    toggle.classList.add("muted");

    // start muted playback immediately so the track buffers/plays silently;
    // on first interaction we just unmute → instant sound, no buffer delay.
    audio.play().catch(() => {});

    // unmute on first interaction (browser autoplay policy)
    const start = () => {
        audio.muted = false;
        toggle.classList.remove("muted");
        icon.textContent = "♪";
        audio.play().catch(() => {});
        document.removeEventListener("click", start);
        document.removeEventListener("keydown", start);
    };
    document.addEventListener("click", start, { once: false });
    document.addEventListener("keydown", start, { once: false });

    // manual toggle
    toggle.addEventListener("click", (e) => {
        e.stopPropagation();
        audio.muted = !audio.muted;
        toggle.classList.toggle("muted", audio.muted);
        icon.textContent = audio.muted ? "♪" : "♫";
        if (!audio.muted) audio.play().catch(() => {});
    });
}
