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

Finalidade:
Garantir layout estável, centralizado e independente de falhas do WordPress
*/

$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">

<!-- 🔴 CSS INLINE (GARANTE FUNCIONAMENTO) -->
<style>

body {
    margin:0;
    background:#000;
    color:#fff;
    font-family:'Montserrat', sans-serif;
}

.cv-main {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100vh;
    text-align:center;
}

/* IMAGEM */
.cv-logo {
    width:90vw;
    max-height:60vh;
    object-fit:contain;
}

/* TEXTO */
.cv-aguarde {
    font-size:2.2rem;
    color:#FFD700;
    font-weight:900;
}

.cv-frase {
    font-size:1.2rem;
}

/* PLAYER */
.cv-player {
    width:90%;
    max-width:400px;
    margin-top:20px;
}

.cv-controls {
    display:flex;
    justify-content:space-around;
    margin:15px 0;
}

.cv-controls button {
    font-size:28px;
    border:none;
    background:none;
    color:#fff;
}

.cv-progress {
    height:5px;
    background:#333;
}

.cv-bar {
    height:100%;
    width:0;
    background:#FFD700;
}

/* DESKTOP */
@media(min-width:768px){
    .cv-logo {
        height:80vh;
        width:auto;
    }

    .cv-aguarde { font-size:4rem; }
}

</style>

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

<body>

<main class="cv-main">

<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>

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

<?php if (!empty($tracks)) : ?>
<div class="cv-player">

<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>

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

</div>
<?php endif; ?>

</main>

<script>
const tracks = <?php echo wp_json_encode($tracks); ?>;

if(tracks.length){

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

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

play.onclick=()=> audio.paused ? (audio.play(), play.innerText="⏸") : (audio.pause(), play.innerText="▶");
next.onclick=()=>{ i=(i+1)%tracks.length; load(); audio.play(); };
prev.onclick=()=>{ i=(i-1+tracks.length)%tracks.length; load(); audio.play(); };

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

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

load();
}
</script>

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