<?php
/* 
Arquivo: /wp-content/themes/cancao/index.php

Finalidade:
1. Renderizar página inicial limpa (sem interferência WP)
2. Exibir imagem diferente para mobile e desktop
3. Centralizar layout perfeitamente
4. Exibir texto com hierarquia visual
5. Integrar player musical automático
6. Garantir carregamento leve e rápido
7. Preparar base para futuras melhorias
*/

$tracks = function_exists('cancao_get_audio_files') ? cancao_get_audio_files() : array();
?>
<!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">

    <!-- IMAGEM RESPONSIVA -->
    <picture class="cv-picture">
        <source srcset="<?php echo get_template_directory_uri(); ?>/assets/imagens/logo.png" media="(max-width: 768px)">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/imagens/youtube.png" class="cv-logo">
    </picture>

    <!-- 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($tracks)) : ?>
    <div class="cv-player">

        <div class="cv-track" id="track">Carregando...</div>

        <div class="cv-controls">
            <button id="prev">⏮</button>
            <button id="play">▶</button>
            <button id="next">⏭</button>
        </div>

        <div class="cv-progress" id="progress">
            <div class="cv-bar" id="bar"></div>
        </div>

        <input type="range" id="volume" min="0" max="1" step="0.01">

        <audio id="audio"></audio>

    </div>
    <?php endif; ?>

</main>

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

    const tracks = <?php echo wp_json_encode($tracks); ?>;
    if (!tracks.length) return;

    let i = 0;
    const audio = document.getElementById("audio");
    const play = document.getElementById("play");
    const next = document.getElementById("next");
    const prev = document.getElementById("prev");
    const volume = document.getElementById("volume");
    const bar = document.getElementById("bar");
    const progress = document.getElementById("progress");
    const track = document.getElementById("track");

    volume.value = localStorage.getItem("vol") || 0.6;
    audio.volume = volume.value;

    function load() {
        audio.src = tracks[i].url;
        track.textContent = tracks[i].name;
    }

    function playMusic() {
        audio.play();
        play.innerText = "⏸";
    }

    function pauseMusic() {
        audio.pause();
        play.innerText = "▶";
    }

    play.onclick = () => audio.paused ? playMusic() : pauseMusic();
    next.onclick = () => { i = (i+1)%tracks.length; load(); playMusic(); };
    prev.onclick = () => { i = (i-1+tracks.length)%tracks.length; load(); playMusic(); };

    volume.oninput = () => {
        audio.volume = volume.value;
        localStorage.setItem("vol", volume.value);
    };

    audio.ontimeupdate = () => {
        bar.style.width = (audio.currentTime / audio.duration * 100) + "%";
    };

    progress.onclick = e => {
        const pct = e.offsetX / progress.offsetWidth;
        audio.currentTime = pct * audio.duration;
    };

    audio.onended = () => next.onclick();

    load();
    playMusic();
});
</script>

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