<?php
// front-page.php — wp-content/themes/cancao-verdadeira/front-page.php
// Gerado em: 25/05/2026 — Canção Verdadeira v1.0
//
// Template da página inicial (home). Carregado quando "Página inicial estática"
// está definida nas configurações de leitura do WordPress.
// Seções: Hero (banner + bloco destaque), Lançamentos, Mais Tocadas,
// Ranking, Newsletter + Contato, Redes Sociais.
// Hero: display:grid com overflow:hidden + isolation:isolate (solução confirmada).
// Cards: usa cv_render_card_grid() do plugin — NÃO usa cv_iframe_card().
// Mobile: banner 200px, bloco hero oculto. Seções empilhadas verticalmente.
// Todas as queries WP_Query usam apenas CPT "musica" com post_status publish.

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

get_header();

/* ----------------------------------------------------------
   Helper local: busca músicas por critério
   Funções do plugin usadas: cv_render_card_grid()
   ---------------------------------------------------------- */
function cv_home_get_musicas( $orderby = 'date', $meta_key = '', $limit = 3 ) {
    $args = [
        'post_type'      => 'musica',
        'posts_per_page' => $limit,
        'post_status'    => 'publish',
        'no_found_rows'  => true,
    ];
    if ( $orderby === 'meta_value_num' && $meta_key ) {
        $args['meta_key'] = $meta_key;
        $args['orderby']  = 'meta_value_num';
        $args['order']    = 'DESC';
        // Garante que só retorna posts que têm o meta
        $args['meta_query'] = [[
            'key'     => $meta_key,
            'compare' => 'EXISTS',
        ]];
    } else {
        $args['orderby'] = 'date';
        $args['order']   = 'DESC';
    }
    return new WP_Query( $args );
}

/* ----------------------------------------------------------
   Banner do hero via plugin (admin > Aparência)
   ---------------------------------------------------------- */
$banner_url = function_exists( 'cv_get_banner_url' ) ? cv_get_banner_url() : '';
$banner_style = $banner_url
    ? 'style="background-image:url(' . esc_url( $banner_url ) . ');"'
    : '';
?>

<main id="cv-main" class="cv-main cv-home">

    <!-- ================================================
         HERO
         Layout: display:grid (2 colunas). Col esquerda
         vazia = banner ocupa. Col direita = bloco.
         overflow:hidden + isolation:isolate no section.
         SEM position:absolute no bloco filho.
    ================================================ -->
    <section
        id="cv-hero-home"
        class="cv-hero"
        <?php echo $banner_style; ?>
        aria-label="<?php esc_attr_e( 'Destaque principal', 'cancao-verdadeira' ); ?>"
    >
        <!-- Overlay escuro sobre o banner -->
        <div class="cv-hero__overlay" aria-hidden="true"></div>

        <!-- Grid interno: col vazia | col bloco -->
        <div class="cv-hero__grid">

            <!-- Coluna esquerda: vazia (banner visível atrás) -->
            <div class="cv-hero__col-left" aria-hidden="true"></div>

            <!-- Coluna direita: bloco de destaque -->
            <div class="cv-hero__bloco">
                <span class="cv-hero__label">
                    <?php _e( '🎵 Lançamento', 'cancao-verdadeira' ); ?>
                </span>

                <?php
                // Pega a música mais recente para o destaque do hero
                $hero_query = cv_home_get_musicas( 'date', '', 1 );
                if ( $hero_query->have_posts() ) :
                    $hero_query->the_post();
                    $hero_id        = get_the_ID();
                    $hero_titulo    = get_the_title();
                    $hero_artista   = function_exists( 'cv_get_artista' ) ? cv_get_artista( $hero_id ) : '';
                    $hero_thumb     = function_exists( 'cv_get_thumbnail' ) ? cv_get_thumbnail( $hero_id ) : '';
                    $hero_plays     = function_exists( 'cv_get_play_count' ) ? cv_get_play_count( $hero_id ) : 0;
                    $hero_url       = get_permalink( $hero_id );
                    $hero_yt_url    = function_exists( 'cv_get_youtube_url' ) ? cv_get_youtube_url( $hero_id ) : '';
                    $hero_yt_id     = function_exists( 'cv_get_youtube_id' ) && $hero_yt_url ? cv_get_youtube_id( $hero_yt_url ) : '';
                ?>

                <?php if ( $hero_thumb ) : ?>
                    <div class="cv-hero__thumb">
                        <img
                            src="<?php echo esc_url( $hero_thumb ); ?>"
                            alt="<?php echo esc_attr( $hero_titulo ); ?>"
                            width="200"
                            height="200"
                            loading="eager"
                        >
                    </div>
                <?php endif; ?>

                <h1 class="cv-hero__titulo"><?php echo esc_html( $hero_titulo ); ?></h1>

                <?php if ( $hero_artista ) : ?>
                    <p class="cv-hero__artista"><?php echo esc_html( $hero_artista ); ?></p>
                <?php endif; ?>

                <?php if ( $hero_plays ) : ?>
                    <p class="cv-hero__plays">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
                        <?php echo number_format( intval( $hero_plays ), 0, ',', '.' ); ?>
                        <?php _e( 'reproduções', 'cancao-verdadeira' ); ?>
                    </p>
                <?php endif; ?>

                <div class="cv-hero__acoes">
                    <!-- Botão tocar: usa data-yt-id para o player JS -->
                    <?php if ( $hero_yt_id ) : ?>
                        <button
                            class="cv-btn cv-btn--play cv-play-btn"
                            data-yt-id="<?php echo esc_attr( $hero_yt_id ); ?>"
                            data-post-id="<?php echo esc_attr( $hero_id ); ?>"
                            data-titulo="<?php echo esc_attr( $hero_titulo ); ?>"
                            data-artista="<?php echo esc_attr( $hero_artista ); ?>"
                            data-thumb="<?php echo esc_attr( $hero_thumb ); ?>"
                            aria-label="<?php echo esc_attr( sprintf( __( 'Tocar %s', 'cancao-verdadeira' ), $hero_titulo ) ); ?>"
                        >
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
                            <?php _e( 'Tocar', 'cancao-verdadeira' ); ?>
                        </button>
                    <?php endif; ?>

                    <a href="<?php echo esc_url( $hero_url ); ?>" class="cv-btn cv-btn--outline">
                        <?php _e( 'Ver Letra', 'cancao-verdadeira' ); ?>
                    </a>

                    <?php if ( function_exists( 'cv_favorito_btn' ) ) : ?>
                        <?php echo cv_favorito_btn( $hero_id ); ?>
                    <?php endif; ?>
                </div>

                <?php
                wp_reset_postdata();
                endif; // hero_query
                ?>

                <!-- Barra de busca no hero -->
                <div class="cv-hero__busca">
                    <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <div class="cv-hero-search">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                                <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                            <input
                                type="search"
                                name="s"
                                placeholder="<?php esc_attr_e( 'Buscar músicas sertanejas…', 'cancao-verdadeira' ); ?>"
                                class="cv-hero-search__input"
                                autocomplete="off"
                            >
                            <button type="submit" class="cv-hero-search__btn">
                                <?php _e( 'Buscar', 'cancao-verdadeira' ); ?>
                            </button>
                        </div>
                    </form>
                </div>

            </div><!-- /.cv-hero__bloco -->
        </div><!-- /.cv-hero__grid -->
    </section><!-- /#cv-hero-home -->


    <!-- ================================================
         SEÇÃO: LANÇAMENTOS (3 mais recentes)
    ================================================ -->
    <section class="cv-secao cv-secao--lancamentos" aria-label="<?php esc_attr_e( 'Lançamentos', 'cancao-verdadeira' ); ?>">
        <div class="cv-container">
            <div class="cv-secao__header">
                <h2 class="cv-secao__titulo">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--cv-gold)" aria-hidden="true"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
                    <?php _e( 'Lançamentos', 'cancao-verdadeira' ); ?>
                </h2>
                <a href="<?php echo esc_url( home_url( '/musicas/' ) ); ?>" class="cv-secao__ver-mais">
                    <?php _e( 'Ver todas', 'cancao-verdadeira' ); ?>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                </a>
            </div>

            <?php
            $lancamentos = cv_home_get_musicas( 'date', '', 3 );
            if ( $lancamentos->have_posts() ) :
            ?>
            <div class="cv-card-grid">
                <?php
                while ( $lancamentos->have_posts() ) {
                    $lancamentos->the_post();
                    if ( function_exists( 'cv_render_card_grid' ) ) {
                        echo cv_render_card_grid( get_the_ID() );
                    }
                }
                wp_reset_postdata();
                ?>
            </div>
            <?php else : ?>
                <p class="cv-empty"><?php _e( 'Nenhuma música encontrada.', 'cancao-verdadeira' ); ?></p>
            <?php endif; ?>
        </div>
    </section>


    <!-- ================================================
         SEÇÃO: MAIS TOCADAS
    ================================================ -->
    <section class="cv-secao cv-secao--mais-tocadas" aria-label="<?php esc_attr_e( 'Músicas mais tocadas', 'cancao-verdadeira' ); ?>">
        <div class="cv-container">
            <div class="cv-secao__header">
                <h2 class="cv-secao__titulo">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--cv-gold)" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
                    <?php _e( 'Mais Tocadas', 'cancao-verdadeira' ); ?>
                </h2>
                <a href="<?php echo esc_url( home_url( '/musicas/' ) ); ?>" class="cv-secao__ver-mais">
                    <?php _e( 'Ver todas', 'cancao-verdadeira' ); ?>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                </a>
            </div>

            <?php
            $mais_tocadas = cv_home_get_musicas( 'meta_value_num', '_cv_play_count', 3 );
            if ( $mais_tocadas->have_posts() ) :
            ?>
            <div class="cv-card-grid">
                <?php
                while ( $mais_tocadas->have_posts() ) {
                    $mais_tocadas->the_post();
                    if ( function_exists( 'cv_render_card_grid' ) ) {
                        echo cv_render_card_grid( get_the_ID() );
                    }
                }
                wp_reset_postdata();
                ?>
            </div>
            <?php else : ?>
                <p class="cv-empty"><?php _e( 'Nenhuma música encontrada.', 'cancao-verdadeira' ); ?></p>
            <?php endif; ?>
        </div>
    </section>


    <!-- ================================================
         SEÇÃO: RANKING (top 3 por score)
    ================================================ -->
    <section class="cv-secao cv-secao--ranking" aria-label="<?php esc_attr_e( 'Ranking de músicas', 'cancao-verdadeira' ); ?>">
        <div class="cv-container">
            <div class="cv-secao__header">
                <h2 class="cv-secao__titulo">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--cv-gold)" aria-hidden="true"><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z"/></svg>
                    <?php _e( 'Ranking', 'cancao-verdadeira' ); ?>
                </h2>
                <a href="<?php echo esc_url( home_url( '/ranking/' ) ); ?>" class="cv-secao__ver-mais">
                    <?php _e( 'Ver ranking completo', 'cancao-verdadeira' ); ?>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                </a>
            </div>

            <?php
            $ranking = cv_home_get_musicas( 'meta_value_num', '_cv_ranking_score', 3 );
            if ( $ranking->have_posts() ) :
                $rank_pos = 1;
            ?>
            <div class="cv-card-grid cv-card-grid--ranking">
                <?php
                while ( $ranking->have_posts() ) {
                    $ranking->the_post();
                    $post_id = get_the_ID();
                    echo '<div class="cv-card-ranking-wrap" data-posicao="' . $rank_pos . '">';
                    echo '<span class="cv-rank-badge">#' . $rank_pos . '</span>';
                    if ( function_exists( 'cv_render_card_grid' ) ) {
                        echo cv_render_card_grid( $post_id );
                    }
                    echo '</div>';
                    $rank_pos++;
                }
                wp_reset_postdata();
                ?>
            </div>
            <?php else : ?>
                <p class="cv-empty"><?php _e( 'Nenhuma música no ranking ainda.', 'cancao-verdadeira' ); ?></p>
            <?php endif; ?>
        </div>
    </section>


    <!-- ================================================
         SEÇÃO: NEWSLETTER + CONTATO (lado a lado)
    ================================================ -->
    <section class="cv-secao cv-secao--newsletter-contato" aria-label="<?php esc_attr_e( 'Newsletter e Contato', 'cancao-verdadeira' ); ?>">
        <div class="cv-container">
            <div class="cv-newsletter-contato-grid">

                <!-- Newsletter -->
                <div class="cv-newsletter-box">
                    <h2 class="cv-newsletter-box__titulo">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--cv-gold)" aria-hidden="true">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" fill="none"/>
                            <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" fill="none"/>
                        </svg>
                        <?php _e( 'Receba novidades', 'cancao-verdadeira' ); ?>
                    </h2>
                    <p class="cv-newsletter-box__desc">
                        <?php _e( 'Cadastre seu e-mail e seja o primeiro a ouvir os novos lançamentos sertanejos.', 'cancao-verdadeira' ); ?>
                    </p>
                    <div id="cv-newsletter-form" class="cv-newsletter-form">
                        <div class="cv-newsletter-form__row">
                            <input
                                type="email"
                                id="cv-newsletter-email"
                                class="cv-input"
                                placeholder="<?php esc_attr_e( 'Seu melhor e-mail', 'cancao-verdadeira' ); ?>"
                                autocomplete="email"
                                required
                            >
                            <button
                                type="button"
                                id="cv-newsletter-submit"
                                class="cv-btn cv-btn--gold"
                            >
                                <?php _e( 'Cadastrar', 'cancao-verdadeira' ); ?>
                            </button>
                        </div>
                        <div id="cv-newsletter-msg" class="cv-form-msg" aria-live="polite" hidden></div>
                    </div>
                </div>

                <!-- Fale Conosco -->
                <div class="cv-contato-box">
                    <h2 class="cv-contato-box__titulo">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="var(--cv-gold)" stroke-width="2"/>
                        </svg>
                        <?php _e( 'Fale Conosco', 'cancao-verdadeira' ); ?>
                    </h2>
                    <div id="cv-contato-form" class="cv-contato-form">
                        <input
                            type="text"
                            id="cv-contato-nome"
                            class="cv-input"
                            placeholder="<?php esc_attr_e( 'Seu nome', 'cancao-verdadeira' ); ?>"
                            autocomplete="name"
                        >
                        <input
                            type="email"
                            id="cv-contato-email"
                            class="cv-input"
                            placeholder="<?php esc_attr_e( 'Seu e-mail', 'cancao-verdadeira' ); ?>"
                            autocomplete="email"
                        >
                        <textarea
                            id="cv-contato-mensagem"
                            class="cv-input cv-textarea"
                            placeholder="<?php esc_attr_e( 'Sua mensagem…', 'cancao-verdadeira' ); ?>"
                            rows="4"
                        ></textarea>
                        <button
                            type="button"
                            id="cv-contato-submit"
                            class="cv-btn cv-btn--gold"
                        >
                            <?php _e( 'Enviar Mensagem', 'cancao-verdadeira' ); ?>
                        </button>
                        <div id="cv-contato-msg" class="cv-form-msg" aria-live="polite" hidden></div>
                    </div>
                </div>

            </div><!-- /.cv-newsletter-contato-grid -->
        </div>
    </section>


    <!-- ================================================
         SEÇÃO: REDES SOCIAIS
    ================================================ -->
    <section class="cv-secao cv-secao--redes" aria-label="<?php esc_attr_e( 'Redes sociais', 'cancao-verdadeira' ); ?>">
        <div class="cv-container">
            <h2 class="cv-secao__titulo cv-secao__titulo--center">
                <?php _e( 'Siga a gente', 'cancao-verdadeira' ); ?>
            </h2>
            <div class="cv-redes-grid">

                <a href="https://www.youtube.com/@cancaoverdadeira" target="_blank" rel="noopener noreferrer" class="cv-rede-btn cv-rede-btn--youtube" aria-label="YouTube">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.75 15.5V8.5l6.25 3.5-6.25 3.5z"/>
                    </svg>
                    YouTube
                </a>

                <?php
                // Instagram: URL configurável via opções do plugin
                $instagram = get_option( 'cv_instagram_url', '' );
                if ( $instagram ) :
                ?>
                <a href="<?php echo esc_url( $instagram ); ?>" target="_blank" rel="noopener noreferrer" class="cv-rede-btn cv-rede-btn--instagram" aria-label="Instagram">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                        <circle cx="12" cy="12" r="4"/>
                        <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
                    </svg>
                    Instagram
                </a>
                <?php endif; ?>

                <?php
                // Facebook: URL configurável via opções do plugin
                $facebook = get_option( 'cv_facebook_url', '' );
                if ( $facebook ) :
                ?>
                <a href="<?php echo esc_url( $facebook ); ?>" target="_blank" rel="noopener noreferrer" class="cv-rede-btn cv-rede-btn--facebook" aria-label="Facebook">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                    </svg>
                    Facebook
                </a>
                <?php endif; ?>

                <!-- WhatsApp via número do plugin -->
                <?php
                $whatsapp = get_option( 'cv_whatsapp_numero', '' );
                if ( $whatsapp ) :
                    $wa_link = 'https://wa.me/' . preg_replace( '/\D/', '', $whatsapp );
                ?>
                <a href="<?php echo esc_url( $wa_link ); ?>" target="_blank" rel="noopener noreferrer" class="cv-rede-btn cv-rede-btn--whatsapp" aria-label="WhatsApp">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                        <path d="M12 0C5.373 0 0 5.373 0 12c0 2.137.565 4.147 1.553 5.889L0 24l6.291-1.528A11.946 11.946 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.814 9.814 0 0 1-5.006-1.371l-.358-.214-3.718.903.94-3.616-.234-.371A9.818 9.818 0 0 1 2.182 12c0-5.416 4.402-9.818 9.818-9.818s9.818 4.402 9.818 9.818-4.402 9.818-9.818 9.818z"/>
                    </svg>
                    WhatsApp
                </a>
                <?php endif; ?>

            </div>
        </div>
    </section>

</main><!-- /#cv-main -->

<?php get_footer(); ?>