<?php
// front-page.php — /wp-content/themes/cancao-verdadeira/front-page.php
// Gerado em: 2026-05-25 | Canção Verdadeira — v8
// Hero: bloco forçado para a DIREITA com 3 técnicas simultâneas:
//   1. position:fixed temporário removido — position:absolute com left calculado
//   2. margin-left:auto em container flex
//   3. !important em todos os posicionamentos
if ( ! defined( 'ABSPATH' ) ) exit;

get_header();

$banner_url = get_option('cv_banner_url','');
$banner_css = $banner_url ? esc_url($banner_url) : get_stylesheet_directory_uri().'/assets/img/banner-placeholder.jpg';

$todos_ids = get_posts([
    'post_type'      => 'musica',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'fields'         => 'ids',
    'orderby'        => 'date',
    'order'          => 'DESC',
    'no_found_rows'  => true,
]);

if ( ! function_exists('cv_sort_meta') ) {
    function cv_sort_meta($ids, $key) {
        if (empty($ids)) return [];
        $with = []; $without = [];
        foreach ($ids as $id) {
            $v = (int)get_post_meta($id, $key, true);
            $v > 0 ? $with[$id] = $v : $without[] = $id;
        }
        arsort($with);
        return array_merge(array_keys($with), $without);
    }
}

$ids_tocadas = array_slice(cv_sort_meta($todos_ids, '_cv_play_count'),    0, 3);
$ids_novas   = array_slice($todos_ids, 0, 3);
$ids_rank    = array_slice(cv_sort_meta($todos_ids, '_cv_ranking_score'), 0, 3);

function cv_iframe_card($pid) {
    $yt_id   = cv_get_youtube_id(cv_get_youtube_url($pid));
    $thumb   = cv_get_thumbnail($pid, 'medium');
    $artista = cv_get_artista($pid);
    $plays   = cv_get_play_count($pid);
    $titulo  = get_the_title($pid);
    $link    = get_permalink($pid);
    ?>
    <article class="cv-card cvi-card"
        data-post-id="<?php echo (int)$pid; ?>"
        data-yt-id="<?php echo esc_attr($yt_id); ?>"
        data-title="<?php echo esc_attr($titulo); ?>"
        data-artist="<?php echo esc_attr($artista); ?>"
        data-thumb="<?php echo esc_url($thumb); ?>">
        <div class="cvi-wrap">
            <?php if ($yt_id): ?>
                <iframe src="https://www.youtube.com/embed/<?php echo esc_attr($yt_id); ?>?rel=0&modestbranding=1"
                    title="<?php echo esc_attr($titulo); ?>"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen loading="lazy"></iframe>
            <?php else: ?>
                <a href="<?php echo esc_url($link); ?>"><img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($titulo); ?>"></a>
            <?php endif; ?>
        </div>
        <div class="cv-card__info">
            <div class="cv-card__title"><a href="<?php echo esc_url($link); ?>"><?php echo esc_html($titulo); ?></a></div>
            <div class="cv-card__artist"><?php echo esc_html($artista); ?></div>
            <div class="cv-card__meta">
                <span class="cv-card__plays"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg><?php echo number_format($plays); ?></span>
                <div style="display:flex;gap:6px;align-items:center;">
                    <?php if ($yt_id): ?>
                    <button class="cv-card__play-btn-fixo"
                        data-post-id="<?php echo (int)$pid; ?>"
                        data-yt-id="<?php echo esc_attr($yt_id); ?>"
                        data-title="<?php echo esc_attr($titulo); ?>"
                        data-artist="<?php echo esc_attr($artista); ?>"
                        data-thumb="<?php echo esc_url($thumb); ?>"
                        style="background:var(--cv-gold);color:#000;border:none;border-radius:99px;padding:4px 10px;font-size:0.72rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:0.05em;">▶ Ouvir</button>
                    <?php endif; ?>
                    <a href="<?php echo esc_url($link); ?>" style="font-family:var(--cv-font-ui);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cv-gold);text-decoration:none;">Tocar →</a>
                </div>
            </div>
        </div>
    </article>
    <?php
}
?>

<!-- HERO -->
<!--
    PRIORIDADE ZERO — SOLUÇÃO DEFINITIVA
    Problema anterior: #cv-hero-bloco era filho de #cv-hero-home (position:relative).
    O Astra envolve get_header() em containers próprios que quebram o contexto de
    posicionamento — position:absolute right:0 se ancorava no container do Astra,
    não no hero, resultando no bloco aparecendo à esquerda.

    Solução: nova estrutura em duas camadas:
    1. #cv-hero-home — apenas o fundo (banner + overlay), sem filhos de conteúdo
    2. #cv-hero-row  — container flex FORA do fundo, sobreposto via position:absolute
       dentro do MESMO section, mas em z-index superior.
       margin-left:auto no bloco garante que fique à direita
       independente de qualquer container do Astra.
-->
<section id="cv-hero-home">
    <!-- Camada 1: fundo (banner + overlay) — sem conteúdo -->
    <div id="cv-hero-bg"></div>
    <div id="cv-hero-overlay"></div>

    <!-- Camada 2: linha flex que ocupa todo o hero — bloco empurrado para direita com margin-left:auto -->
    <div id="cv-hero-row">
        <div id="cv-hero-bloco">
            <p class="cv-hero-eyebrow">Plataforma Musical Sertaneja</p>
            <h1 class="cv-hero-titulo">Canção <span>Verdadeira</span></h1>
            <p class="cv-hero-sub">Músicas autorais sertanejas com alma e verdade.</p>
            <form method="get" action="<?php echo esc_url(home_url('/')); ?>" class="cv-hero-busca">
                <input type="search" name="s" placeholder="Buscar músicas..." autocomplete="off">
                <button type="submit" class="cv-btn cv-btn--primary" style="font-size:0.78rem;padding:7px 14px;white-space:nowrap;">Buscar</button>
            </form>
            <a href="<?php echo esc_url(home_url('/musicas/')); ?>" class="cv-btn cv-btn--outline" style="font-size:0.78rem;padding:7px 14px;margin-top:6px;display:inline-block;">Ver Catálogo</a>
        </div>
    </div>
</section>

<!-- MAIS TOCADAS -->
<section class="cv-home-section cv-section" id="mais-tocadas">
    <div class="cv-container">
        <h2 class="cv-section-title"><span class="cv-accent">▶</span> Mais Tocadas</h2>
        <?php if ($ids_tocadas): ?>
            <div class="cv-grid-3"><?php foreach ($ids_tocadas as $pid) cv_iframe_card($pid); ?></div>
        <?php else: ?>
            <p style="color:var(--cv-text-muted);font-family:var(--cv-font-ui);padding:var(--cv-gap-lg) 0;">Nenhuma música cadastrada ainda.<?php if (current_user_can('manage_options')): ?> <a href="<?php echo admin_url('post-new.php?post_type=musica'); ?>" style="color:var(--cv-gold);">Cadastrar agora</a><?php endif; ?></p>
        <?php endif; ?>
        <?php if (count($todos_ids) > 3): ?><div style="text-align:center;margin-top:var(--cv-gap-xl);"><a href="<?php echo esc_url(home_url('/musicas/')); ?>" class="cv-btn cv-btn--outline">Ver todas</a></div><?php endif; ?>
    </div>
</section>

<!-- NOVAS -->
<section class="cv-home-section cv-section" id="novas" style="background:var(--cv-bg-alt);">
    <div class="cv-container">
        <h2 class="cv-section-title"><span class="cv-accent">✦</span> Novas</h2>
        <?php if ($ids_novas): ?>
            <div class="cv-grid-3"><?php foreach ($ids_novas as $pid) cv_iframe_card($pid); ?></div>
        <?php else: ?>
            <p style="color:var(--cv-text-muted);font-family:var(--cv-font-ui);padding:var(--cv-gap-lg) 0;">Em breve novidades.</p>
        <?php endif; ?>
    </div>
</section>

<!-- RANKING -->
<section class="cv-home-section cv-section" id="ranking-home">
    <div class="cv-container">
        <h2 class="cv-section-title"><span class="cv-accent">🏆</span> Ranking</h2>
        <?php if ($ids_rank): ?>
            <div class="cv-grid-3"><?php foreach ($ids_rank as $pid) cv_iframe_card($pid); ?></div>
        <?php else: ?>
            <p style="color:var(--cv-text-muted);font-family:var(--cv-font-ui);padding:var(--cv-gap-lg) 0;">Ranking gerado após as primeiras reproduções.</p>
        <?php endif; ?>
        <?php if (count($todos_ids) > 3): ?><div style="text-align:center;margin-top:var(--cv-gap-xl);"><a href="<?php echo esc_url(home_url('/ranking/')); ?>" class="cv-btn cv-btn--outline">Ver ranking completo</a></div><?php endif; ?>
    </div>
</section>

<!-- NEWSLETTER + CONTATO -->
<section class="cv-home-section cv-section" style="background:var(--cv-bg-alt);">
    <div class="cv-container">
        <div class="cv-nl-grid">
            <div>
                <h2 style="font-family:var(--cv-font-title);font-size:1.3rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cv-text-primary);margin-bottom:var(--cv-gap-sm);">Fique por Dentro</h2>
                <p style="font-family:var(--cv-font-body);font-size:0.95rem;color:var(--cv-text-secondary);margin-bottom:var(--cv-gap-md);">Receba os novos lançamentos em primeira mão.</p>
                <form class="cv-newsletter__form" novalidate style="flex-direction:row;max-width:100%;">
                    <?php wp_nonce_field('cv_nonce','cv_nl_nonce'); ?>
                    <div style="display:none;"><input type="text" name="cv_hp" value="" tabindex="-1" autocomplete="off"></div>
                    <input type="email" placeholder="Seu melhor e-mail" required aria-label="E-mail">
                    <button type="submit" class="cv-btn cv-btn--primary">Inscrever</button>
                </form>
                <div class="cv-newsletter__msg" aria-live="polite"></div>
            </div>
            <div class="cv-nl-divider-v"></div>
            <div>
                <h2 style="font-family:var(--cv-font-title);font-size:1.3rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cv-text-primary);margin-bottom:var(--cv-gap-sm);">Fale Conosco</h2>
                <p style="font-family:var(--cv-font-body);font-size:0.95rem;color:var(--cv-text-secondary);margin-bottom:var(--cv-gap-md);">Tem uma sugestão ou música para apresentar?</p>
                <div style="display:flex;gap:var(--cv-gap-sm);flex-wrap:wrap;">
                    <a href="<?php echo esc_url(home_url('/contato/')); ?>" class="cv-btn cv-btn--primary">Enviar mensagem</a>
                    <?php $wa = preg_replace('/\D/','',get_option('cv_whatsapp_number','')); if ($wa): ?>
                    <a href="https://wa.me/<?php echo esc_attr($wa); ?>" target="_blank" rel="noopener" class="cv-btn cv-btn--outline" style="color:#25D366;border-color:#25D366;">WhatsApp</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* ═══ HERO — SOLUÇÃO DEFINITIVA ══════════════════════════════
   Estrutura de duas camadas dentro do mesmo <section>:
   - #cv-hero-bg e #cv-hero-overlay: fundo absoluto (z-index 0 e 1)
   - #cv-hero-row: container flex absoluto (z-index 10) que cobre
     todo o hero. O bloco fica à direita via margin-left:auto.
   Nenhum position:absolute no #cv-hero-bloco — ele é filho de
   um flex container, imune ao Astra.
   ══════════════════════════════════════════════════════════ */
#cv-hero-home {
    position: relative;
    min-height: 400px;
    width: 100%;
    display: block;
}
#cv-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('<?php echo $banner_css; ?>');
    background-size: cover;
    background-position: center;
    z-index: 0;
}
#cv-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.5) 60%, rgba(17,17,17,0.1) 100%);
    z-index: 1;
}

/* Linha flex que cobre TODO o hero — bloco empurrado para direita */
#cv-hero-row {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* Bloco: SEM position absolute — empurrado para direita pelo flex */
#cv-hero-bloco {
    margin-left: auto;          /* ← empurra para a DIREITA */
    margin-right: 0;
    width: 300px;
    flex-shrink: 0;
    padding: 20px 20px 20px 24px;
    background: rgba(8,8,8,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 3px solid var(--cv-gold);
    border-right: none;
    box-sizing: border-box;
}

.cv-hero-eyebrow {
    font-family: var(--cv-font-ui) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--cv-gold) !important;
    margin-bottom: 5px !important;
    display: block !important;
}
.cv-hero-titulo {
    font-family: var(--cv-font-title) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--cv-text-primary) !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    display: block !important;
}
.cv-hero-titulo span { color: var(--cv-gold) !important; }
.cv-hero-sub {
    font-family: var(--cv-font-body) !important;
    font-size: 0.82rem !important;
    color: var(--cv-text-secondary) !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
    display: block !important;
}
.cv-hero-busca {
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
}
.cv-hero-busca input {
    flex: 1 !important;
    min-width: 0 !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 99px !important;
    padding: 7px 11px !important;
    color: #fff !important;
    font-family: var(--cv-font-ui) !important;
    font-size: 0.8rem !important;
    outline: none !important;
}
.cv-hero-busca input::placeholder { color: rgba(255,255,255,0.4) !important; }
.cv-hero-busca input:focus { border-color: var(--cv-gold) !important; }

/* Mobile: oculta o bloco */
@media (max-width: 768px) {
    #cv-hero-bloco { display: none !important; }
    #cv-hero-home  { min-height: 180px !important; }
}

/* ═══ IFRAME CARD ═══════════════════════════════════════════ */
.cvi-card { background:var(--cv-bg-card); border-radius:var(--cv-radius-lg); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.cvi-card:hover { transform:translateY(-3px); box-shadow:var(--cv-shadow-md); }
.cvi-wrap { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; }
.cvi-wrap iframe, .cvi-wrap img { position:absolute; top:0; left:0; width:100%; height:100%; border:none; object-fit:cover; }

/* ═══ NEWSLETTER GRID ═══════════════════════════════════════ */
.cv-nl-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--cv-gap-2xl);
    align-items: start;
}
.cv-nl-divider-v {
    width: 1px;
    background: var(--cv-border);
    align-self: stretch;
    min-height: 80px;
}
@media (max-width: 768px) {
    .cv-nl-grid { grid-template-columns: 1fr; gap: var(--cv-gap-xl); }
    .cv-nl-divider-v { display: none; }
    .cv-grid-3 { grid-template-columns: 1fr !important; }
}
</style>

<?php get_footer(); ?>