<?php
// header.php — /wp-content/themes/cancao-verdadeira/header.php
// Gerado em: 2026-05-24 | Canção Verdadeira — Fase T1
// Header fixo com backdrop-blur, logo do site (imagem ou texto fallback),
// campo de busca, navegação principal via wp_nav_menu (slot 'primary'),
// ações de login/logout e botão hamburguer para mobile.
// SVG inline em todos os ícones — sem Font Awesome nem dashicons externos.
// Menu mobile é um drawer separado (.cv-mobile-menu) controlado por main.js.
// Toda a estilização está em assets/css/main.css, seção "06. HEADER".
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<!-- ── HEADER FIXO ─────────────────────────────────────── -->
<header class="cv-header" role="banner">
    <div class="cv-header__inner">

        <!-- Hamburguer (mobile) — PRIMEIRO no DOM = lado esquerdo na tela -->
        <button class="cv-menu-toggle" aria-label="Abrir menu" aria-expanded="false" aria-controls="cv-mobile-menu">
            <span></span>
            <span></span>
            <span></span>
        </button>

        <!-- Logo -->
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="cv-header__logo" aria-label="<?php bloginfo( 'name' ); ?> — Home">
            <?php
            $logo_url = get_option( 'cv_logo_url', '' );
            if ( $logo_url ) :
            ?>
                <img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php bloginfo( 'name' ); ?>" loading="eager">
            <?php else : ?>
                <span class="cv-header__logo-text">
                    Canção <span>Verdadeira</span>
                </span>
            <?php endif; ?>
        </a>

        <!-- Busca (desktop) -->
        <div class="cv-header__search" role="search">
            <svg class="cv-header__search-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5
                    6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
                    4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5
                    5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
            <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                <input
                    type="search"
                    name="s"
                    placeholder="Buscar músicas..."
                    value="<?php echo esc_attr( get_search_query() ); ?>"
                    autocomplete="off"
                    aria-label="Buscar músicas"
                >
            </form>
        </div>

        <!-- Navegação principal (desktop) -->
        <nav class="cv-header__nav" role="navigation" aria-label="Menu principal">
            <?php
            wp_nav_menu( [
                'theme_location' => 'primary',
                'container'      => false,
                'menu_class'     => '',
                'fallback_cb'    => function () {
                    echo '<a href="' . esc_url( home_url( '/' ) ) . '">Início</a>';
                    echo '<a href="' . esc_url( home_url( '/musicas/' ) ) . '">Músicas</a>';
                    echo '<a href="' . esc_url( home_url( '/ranking/' ) ) . '">Ranking</a>';
                },
                'items_wrap'     => '%3$s',
            ] );
            ?>
        </nav>

        <!-- Ações (login/logout) -->
        <div class="cv-header__actions">
            <?php if ( is_user_logged_in() ) :
                $user = wp_get_current_user();
            ?>
                <a href="<?php echo esc_url( home_url( '/minha-conta/' ) ); ?>" class="cv-header__user" title="Minha conta">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                        <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4
                            7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6
                            4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
                    </svg>
                    <span><?php echo esc_html( $user->display_name ); ?></span>
                </a>
            <?php else : ?>
                <a href="<?php echo esc_url( home_url( '/login/' ) ); ?>" class="cv-btn cv-btn--outline" style="font-size:0.8rem;padding:7px 18px;">
                    Entrar
                </a>
            <?php endif; ?>
        </div>

    </div><!-- /.cv-header__inner -->
</header>

<!-- ── MENU MOBILE DRAWER ─────────────────────────────── -->
<nav class="cv-mobile-menu" id="cv-mobile-menu" aria-label="Menu mobile" aria-hidden="true">
    <div class="cv-mobile-menu__nav">
        <?php
        wp_nav_menu( [
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => '',
            'fallback_cb'    => function () {
                echo '<a href="' . esc_url( home_url( '/' ) ) . '">Início</a>';
                echo '<a href="' . esc_url( home_url( '/musicas/' ) ) . '">Músicas</a>';
                echo '<a href="' . esc_url( home_url( '/ranking/' ) ) . '">Ranking</a>';
                echo '<a href="' . esc_url( home_url( '/sobre-nos/' ) ) . '">Sobre Nós</a>';
                echo '<a href="' . esc_url( home_url( '/contato/' ) ) . '">Contato</a>';
            },
            'items_wrap' => '%3$s',
        ] );
        ?>
        <?php if ( ! is_user_logged_in() ) : ?>
            <a href="<?php echo esc_url( home_url( '/login/' ) ); ?>" style="margin-top:8px;">Entrar / Cadastrar</a>
        <?php else : ?>
            <a href="<?php echo esc_url( home_url( '/minha-conta/' ) ); ?>">Minha Conta</a>
            <a href="<?php echo esc_url( wp_logout_url( home_url() ) ); ?>">Sair</a>
        <?php endif; ?>
    </div>
</nav>

<!-- ── INÍCIO DO CONTEÚDO ─────────────────────────────── -->
<main id="cv-main" class="cv-main-content">