<?php
// File: wp-content/themes/cancao-verdadeira/front-page.php
// Gerado em: 26/05/2026 14:35 BRT
/**
 * Template principal da Home / Front Page do projeto Canção Verdadeira.
 * Este arquivo substitui a aparência inicial simples do WordPress.
 * O objetivo é criar uma experiência visual inspirada no Spotify.
 * O layout foi pensado para funcionar bem em desktop e mobile.
 * Este arquivo renderiza apenas a camada visual da Home.
 * Toda lógica de negócio deve continuar no plugin principal.
 * Estrutura prevista: Hero, Destaques, Ranking e CTA.
 * Compatível com Astra Child Theme + Elementor + plugin próprio.
 * Paleta principal: preto, cinza escuro e dourado.
 * Arquivo modular preparado para futuras expansões.
 */

get_header();
?>

<style>

:root {
    --cv-bg: #0f0f10;
    --cv-surface: #18181b;
    --cv-surface-hover: #222226;
    --cv-border: rgba(255,255,255,0.06);
    --cv-text: #ffffff;
    --cv-text-soft: #b3b3b3;
    --cv-gold: #d4af37;
    --cv-shadow: 0 10px 30px rgba(0,0,0,0.35);
    --cv-radius: 22px;
}

body {
    background: var(--cv-bg);
    color: var(--cv-text);
}

.cv-home {
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(212,175,55,0.16), transparent 30%),
        radial-gradient(circle at left center, rgba(212,175,55,0.08), transparent 25%),
        #0f0f10;
}

.cv-container {
    width: min(1400px, 92%);
    margin: 0 auto;
}

/* =========================================================
   HERO PRINCIPAL
========================================================= */

.cv-hero {
    padding: 80px 0 50px;
}

.cv-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.cv-hero-content h1 {
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -2px;
}

.cv-hero-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--cv-text-soft);
    max-width: 720px;
    margin-bottom: 35px;
}

.cv-hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.cv-btn-primary,
.cv-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 32px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
}

.cv-btn-primary {
    background: var(--cv-gold);
    color: #111;
}

.cv-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212,175,55,0.35);
}

.cv-btn-secondary {
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.cv-btn-secondary:hover {
    background: rgba(255,255,255,0.08);
}

.cv-hero-visual {
    position: relative;
}

.cv-feature-card {
    background: linear-gradient(180deg, #232327 0%, #161618 100%);
    border-radius: var(--cv-radius);
    padding: 28px;
    border: 1px solid var(--cv-border);
    box-shadow: var(--cv-shadow);
}

.cv-feature-card img {
    width: 100%;
    border-radius: 18px;
    display: block;
    margin-bottom: 22px;
}

.cv-feature-card small {
    color: var(--cv-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.cv-feature-card h3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.cv-feature-card p {
    color: var(--cv-text-soft);
    line-height: 1.6;
}

/* =========================================================
   SEÇÕES
========================================================= */

.cv-section {
    padding: 30px 0 50px;
}

.cv-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.cv-section-header h2 {
    font-size: 32px;
    margin: 0;
}

.cv-section-header a {
    color: var(--cv-text-soft);
    text-decoration: none;
}

.cv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cv-song-card {
    background: var(--cv-surface);
    border-radius: 18px;
    padding: 18px;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.cv-song-card:hover {
    transform: translateY(-5px);
    background: var(--cv-surface-hover);
    border-color: rgba(212,175,55,0.25);
}

.cv-song-cover {
    position: relative;
    margin-bottom: 18px;
}

.cv-song-cover img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.cv-play-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cv-gold);
    border: none;
    color: #111;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
}

.cv-song-card:hover .cv-play-btn {
    opacity: 1;
    transform: translateY(0);
}

.cv-song-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cv-song-card p {
    color: var(--cv-text-soft);
    font-size: 14px;
    margin: 0;
}

/* =========================================================
   CTA FINAL
========================================================= */

.cv-cta {
    padding: 70px 0 100px;
}

.cv-cta-box {
    background: linear-gradient(135deg, #1d1d21 0%, #111 100%);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    border: 1px solid rgba(212,175,55,0.15);
}

.cv-cta-box h2 {
    font-size: clamp(36px, 5vw, 60px);
    margin-bottom: 18px;
}

.cv-cta-box p {
    max-width: 720px;
    margin: 0 auto 32px;
    color: var(--cv-text-soft);
    font-size: 18px;
    line-height: 1.8;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1200px) {

    .cv-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {

    .cv-hero-grid {
        grid-template-columns: 1fr;
    }

    .cv-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-hero {
        padding-top: 50px;
    }
}

@media (max-width: 640px) {

    .cv-grid {
        grid-template-columns: 1fr;
    }

    .cv-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cv-cta-box {
        padding: 36px 24px;
    }

    .cv-feature-card {
        padding: 20px;
    }
}

</style>

<div class="cv-home">

    <!-- =====================================================
         HERO PRINCIPAL
    ====================================================== -->

    <section class="cv-hero">
        <div class="cv-container">

            <div class="cv-hero-grid">

                <div class="cv-hero-content">

                    <h1>
                        Música autoral com experiência premium.
                    </h1>

                    <p>
                        Descubra letras, composições e músicas sertanejas em uma plataforma moderna,
                        rápida e inspirada nos maiores serviços de streaming do mercado.
                    </p>

                    <div class="cv-hero-actions">

                        <a href="<?php echo esc_url( home_url('/musicas/') ); ?>" class="cv-btn-primary">
                            Ouvir Agora
                        </a>

                        <a href="<?php echo esc_url( home_url('/ranking/') ); ?>" class="cv-btn-secondary">
                            Ver Ranking
                        </a>

                    </div>

                </div>

                <div class="cv-hero-visual">

                    <div class="cv-feature-card">

                        <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=1200&auto=format&fit=crop" alt="Canção Verdadeira">

                        <small>Destaque da Semana</small>

                        <h3>
                            O sertanejo autoral ganhou uma nova casa.
                        </h3>

                        <p>
                            Interface moderna, reprodução contínua, ranking inteligente e descoberta musical.
                        </p>

                    </div>

                </div>

            </div>

        </div>
    </section>

    <!-- =====================================================
         MAIS TOCADAS
    ====================================================== -->

    <section class="cv-section">

        <div class="cv-container">

            <div class="cv-section-header">
                <h2>Mais Tocadas</h2>
                <a href="#">Ver todas</a>
            </div>

            <div class="cv-grid">

                <?php for ($i = 1; $i <= 4; $i++) : ?>

                    <article class="cv-song-card">

                        <div class="cv-song-cover">

                            <img src="https://picsum.photos/500/500?random=<?php echo $i; ?>" alt="Música">

                            <button class="cv-play-btn">
                                ▶
                            </button>

                        </div>

                        <h3>
                            Música Sertaneja <?php echo $i; ?>
                        </h3>

                        <p>
                            Compositor • Canção Verdadeira
                        </p>

                    </article>

                <?php endfor; ?>

            </div>

        </div>

    </section>

    <!-- =====================================================
         LANÇAMENTOS
    ====================================================== -->

    <section class="cv-section">

        <div class="cv-container">

            <div class="cv-section-header">
                <h2>Lançamentos</h2>
                <a href="#">Explorar catálogo</a>
            </div>

            <div class="cv-grid">

                <?php for ($i = 5; $i <= 8; $i++) : ?>

                    <article class="cv-song-card">

                        <div class="cv-song-cover">

                            <img src="https://picsum.photos/500/500?random=<?php echo $i; ?>" alt="Música">

                            <button class="cv-play-btn">
                                ▶
                            </button>

                        </div>

                        <h3>
                            Novo Lançamento <?php echo $i; ?>
                        </h3>

                        <p>
                            Sertanejo • 2026
                        </p>

                    </article>

                <?php endfor; ?>

            </div>

        </div>

    </section>

    <!-- =====================================================
         CTA FINAL
    ====================================================== -->

    <section class="cv-section">

        <div class="cv-container">

            <div class="cv-section-header">
                <h2>Melhores Rankeadas</h2>
                <a href="#">Abrir ranking completo</a>
            </div>

            <div class="cv-grid">

                <?php for ($i = 9; $i <= 12; $i++) : ?>

                    <article class="cv-song-card">

                        <div class="cv-song-cover">

                            <img src="https://picsum.photos/500/500?random=<?php echo $i; ?>" alt="Música">

                            <button class="cv-play-btn">
                                ▶
                            </button>

                        </div>

                        <h3>
                            Top Ranking <?php echo $i; ?>
                        </h3>

                        <p>
                            Ranking Nacional • Canção Verdadeira
                        </p>

                    </article>

                <?php endfor; ?>

            </div>

        </div>

    </section>

    <section class="cv-cta">

        <div class="cv-container">

            <div class="cv-cta-box">

                <h2>
                    Entre para a comunidade Canção Verdadeira
                </h2>

                <p>
                    Crie sua conta, favorite músicas, acompanhe rankings e prepare-se
                    para playlists personalizadas na próxima fase da plataforma.
                </p>

                <a href="#" class="cv-btn-primary">
                    Criar Conta
                </a>

            </div>

        </div>

    </section>

</div>

<?php
get_footer();