<?php
$audios = cancao_get_audio_files();
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?php bloginfo('name'); ?></title>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">

<?php wp_head(); ?>
</head>

<body>

<main class="cv-main">

    <!-- LOGO -->
        <img 
        src="<?php echo get_template_directory_uri(); ?>/assets/imagens/youtube.png" 
        alt="Canção Verdadeira"
        class="cv-logo"
    >

    <!-- TEXTO -->
    <div class="cv-texto">
        <div class="cv-aguarde">AGUARDE</div>
        <div class="cv-frase">nosso site estará no ar</div>
    </div>

    <!-- PLAYER -->
    <?php if (!empty($audios)) : ?>
    <div class="cv-player">
        <button id="playBtn">▶</button>
        <audio id="audioPlayer" preload="auto">
            <?php foreach ($audios as $audio): ?>
                <source src="<?php echo $audio; ?>">
            <?php endforeach; ?>
        </audio>
    </div>
    <?php endif; ?>

</main>

<script>
document.addEventListener("DOMContentLoaded", function() {

    const player = document.getElementById("audioPlayer");
    const btn = document.getElementById("playBtn");

    if (!player) return;

    let tracks = Array.from(player.querySelectorAll("source")).map(s => s.src);
    let current = 0;

    player.src = tracks[current];
    player.volume = 0.6;

    // autoplay (alguns navegadores bloqueiam)
    player.play().catch(() => {
        btn.style.display = "block";
    });

    // botão play/pause
    btn.addEventListener("click", () => {
        if (player.paused) {
            player.play();
            btn.innerText = "⏸";
        } else {
            player.pause();
            btn.innerText = "▶";
        }
    });

    // troca automática de faixa
    player.addEventListener("ended", () => {
        current = (current + 1) % tracks.length;
        player.src = tracks[current];
        player.play();
    });

});
</script>

<?php wp_footer(); ?>
</body>
</html>