// File: wp-content/themes/cancao-verdadeira/single-musica.php

<?php
/**
 * Template: Página individual da Música
 * Responsável por SEO, player, letra e experiência do usuário
 */

get_header();

if (have_posts()) :
while (have_posts()) : the_post();

/**
 * ===============================
 * 🔹 DADOS DA MÚSICA
 * ===============================
 */

$mp3      = get_post_meta(get_the_ID(), '_cv_mp3_url', true);
$youtube  = get_post_meta(get_the_ID(), '_cv_youtube_url', true);
$composer = get_post_meta(get_the_ID(), '_cv_compositor', true);
$key      = get_post_meta(get_the_ID(), '_cv_tonalidade', true);
$plays    = get_post_meta(get_the_ID(), '_cv_plays', true);

/**
 * Thumbnail
 */
$thumb = get_the_post_thumbnail_url(get_the_ID(), 'large');

/**
 * Conteúdo (letra)
 */
$lyrics = get_the_content();

?>

<article class="cv-music-page">

    <!-- ===============================
         🔥 HERO (Capa + Info + Player)
    =============================== -->

    <section class="cv-hero">

        <div class="cv-cover">
            <img src="<?php echo esc_url($thumb); ?>" alt="<?php the_title(); ?>">
        </div>

        <div class="cv-info">

            <h1><?php the_title(); ?></h1>

            <p class="cv-meta">
                <?php echo esc_html($composer); ?> • Tom <?php echo esc_html($key); ?>
            </p>

            <div class="cv-actions">

                <?php if ($mp3): ?>
                    <button class="cv-play-btn" data-audio="<?php echo esc_url($mp3); ?>">
                        ▶ Ouvir
                    </button>
                <?php endif; ?>

                <?php if ($youtube): ?>
                    <button class="cv-youtube-btn" data-video="<?php echo esc_url($youtube); ?>">
                        ▶ Ver Vídeo
                    </button>
                <?php endif; ?>

            </div>

        </div>

    </section>


    <!-- ===============================
         🎵 PLAYER YOUTUBE (LAZY LOAD)
    =============================== -->

    <?php if ($youtube): ?>
    <div class="cv-youtube-wrapper" id="cv-youtube-container">

        <div class="cv-youtube-thumb" data-video="<?php echo esc_attr($youtube); ?>">
            <img src="https://img.youtube.com/vi/<?php echo cv_get_youtube_id($youtube); ?>/hqdefault.jpg">
            <span class="cv-play-overlay">▶</span>
        </div>

    </div>
    <?php endif; ?>


    <!-- ===============================
         📜 LETRA (SEO PRINCIPAL)
    =============================== -->

    <section class="cv-lyrics">

        <h2>Letra da música <?php the_title(); ?></h2>

        <div class="cv-lyrics-content">
            <?php echo wpautop($lyrics); ?>
        </div>

    </section>


    <!-- ===============================
         🧠 SOBRE A MÚSICA (SEO BOOST)
    =============================== -->

    <section class="cv-about">

        <h2>Sobre a música</h2>

        <p>
            <?php the_title(); ?> é uma música do gênero 
            <?php echo strip_tags(get_the_term_list(get_the_ID(), 'genero', '', ', ')); ?>.
        </p>

        <p>
            Composição: <?php echo esc_html($composer); ?>.
            <?php if ($key): ?> Tom: <?php echo esc_html($key); ?>. <?php endif; ?>
        </p>

    </section>


    <!-- ===============================
         🔥 PRÓXIMA MÚSICA (ENGAJAMENTO)
    =============================== -->

    <section class="cv-next">

        <h2>Você também pode gostar</h2>

        <?php
        $related = new WP_Query(array(
            'post_type' => 'musica',
            'posts_per_page' => 4,
            'post__not_in' => array(get_the_ID()),
        ));

        if ($related->have_posts()):
            echo '<div class="cv-grid">';
            while ($related->have_posts()): $related->the_post();
        ?>

            <a href="<?php the_permalink(); ?>" class="cv-card">
                <?php the_post_thumbnail('medium'); ?>
                <span><?php the_title(); ?></span>
            </a>

        <?php endwhile; echo '</div>'; endif; wp_reset_postdata(); ?>

    </section>

</article>

<?php endwhile; endif;

get_footer();