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

Resumo:
Página inicial estilo Spotify.
Renderiza:
- Hero com música destaque
- Seção de categorias por gênero
- Ranking (trending)
- Grid de músicas recentes
- Layout otimizado para UX moderna
Integra com CPT musica, ranking e player global.
*/

if (!defined('ABSPATH')) exit;

get_header();
?>

<div class="home">

    <!-- =========================
         🎧 HERO (DESTAQUE)
    ========================= -->
    <?php
    $destaque = cancao_get_top_musicas(1);

    if ($destaque->have_posts()) :
        while ($destaque->have_posts()) : $destaque->the_post();

            $meta = cancao_get_musica_meta(get_the_ID());
            $capa = get_the_post_thumbnail_url(get_the_ID(), 'large');
    ?>
    <div class="hero">

        <div class="hero-bg" style="background-image:url('<?php echo esc_url($capa); ?>')"></div>

        <div class="hero-content">

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

            <p><?php echo esc_html($meta['artista'] ?? ''); ?></p>

            <button class="btn-play"
                data-mp3="<?php echo esc_url($meta['mp3']); ?>"
                data-title="<?php the_title(); ?>"
                data-artist="<?php echo esc_attr($meta['artista']); ?>"
                data-cover="<?php echo esc_url($capa); ?>">
                ▶ Tocar agora
            </button>

        </div>

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


    <!-- =========================
         🎼 CATEGORIAS
    ========================= -->
    <div class="section">
        <h2>🎼 Gêneros</h2>

        <div class="categorias">

            <a href="/genero/sertanejo" class="cat sertanejo">Sertanejo</a>
            <a href="/genero/gospel" class="cat gospel">Gospel</a>
            <a href="/genero/romantico" class="cat romantico">Romântico</a>

        </div>
    </div>


    <!-- =========================
         🔥 TRENDING
    ========================= -->
    <div class="section">
        <h2>🔥 Em alta</h2>

        <div class="grid-musicas">
            <?php
            $trending = cancao_get_top_musicas(8);

            if ($trending->have_posts()) :
                while ($trending->have_posts()) : $trending->the_post();
                    get_template_part('template-parts/card', 'musica');
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </div>


    <!-- =========================
         🎵 RECENTES
    ========================= -->
    <div class="section">
        <h2>🎵 Adicionadas recentemente</h2>

        <div class="grid-musicas">
            <?php
            $recentes = new WP_Query([
                'post_type' => 'musica',
                'posts_per_page' => 8,
                'orderby' => 'date',
                'order' => 'DESC'
            ]);

            if ($recentes->have_posts()) :
                while ($recentes->have_posts()) : $recentes->the_post();
                    get_template_part('template-parts/card', 'musica');
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </div>

</div>

<?php get_footer(); ?>