<?php
// File: wp-content/themes/cancao-verdadeira/front-page.php
// Gerado em: 26/05/2026 15:20 BRT
/**
 * Front Page simplificada e estável do projeto Canção Verdadeira.
 * Esta versão prioriza estabilidade visual.
 * Compatível com Astra Child Theme.
 * Estrutura inspirada em plataformas de streaming.
 * Hero principal com CTA.
 * Grid responsivo de músicas.
 * Área de cadastro e newsletter.
 * Tema escuro com dourado.
 * Arquivo seguro para testes iniciais.
 * Toda lógica continua no plugin principal.
 */

get_header();
?>

<style>

body {
    background: #121212;
    color: #ffffff;
}

.cv-home {
    background: #121212;
    min-height: 100vh;
    padding-bottom: 80px;
}

.cv-container {
    width: 92%;
    max-width: 1300px;
    margin: 0 auto;
}

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

.cv-hero h1 {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 20px;
    color: #ffffff;
}

.cv-hero p {
    color: #b3b3b3;
    font-size: 18px;
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.cv-btn {
    display: inline-block;
    padding: 16px 28px;
    border-radius: 999px;
    background: #d4af37;
    color: #111111;
    text-decoration: none;
    font-weight: bold;
    margin-right: 14px;
}

.cv-section {
    margin-top: 50px;
}

.cv-section h2 {
    font-size: 32px;
    margin-bottom: 24px;
}

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

.cv-card {
    background: #1d1d1d;
    border-radius: 18px;
    padding: 18px;
}

.cv-card img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 14px;
}

.cv-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.cv-card p {
    color: #b3b3b3;
    font-size: 14px;
}

.cv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cv-form-box {
    background: #1d1d1d;
    border-radius: 18px;
    padding: 28px;
}

.cv-form-box h3 {
    margin-bottom: 12px;
}

.cv-form-box p {
    color: #b3b3b3;
    margin-bottom: 20px;
}

.cv-input {
    width: 100%;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid #333333;
    background: #111111;
    color: #ffffff;
}

.cv-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 999px;
    background: #d4af37;
    color: #111111;
    font-weight: bold;
    cursor: pointer;
}

#cv-player,
.cv-player,
.cv-player-bar {
    background: #0b0b0b !important;
    color: #ffffff !important;
}

@media (max-width: 980px) {

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

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

    .cv-hero h1 {
        font-size: 52px;
    }
}

@media (max-width: 640px) {

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

    .cv-hero h1 {
        font-size: 42px;
    }
}

</style>

<div class="cv-home">

    <section class="cv-hero">

        <div class="cv-container">

            <h1>
                Canção Verdadeira
            </h1>

            <p>
                Plataforma musical inspirada nos maiores serviços de streaming.
                Descubra músicas, letras e composições autorais.
            </p>

            <a href="#" class="cv-btn">
                Ouvir Agora
            </a>

            <a href="#" class="cv-btn">
                Ver Ranking
            </a>

        </div>

    </section>

    <section class="cv-section">

        <div class="cv-container">

            <h2>
                Mais Tocadas
            </h2>

            <div class="cv-grid">

                <div class="cv-card">
                    <img src="https://picsum.photos/500/500?1" alt="Música">
                    <h3>Música 1</h3>
                    <p>Canção Verdadeira</p>
                </div>

                <div class="cv-card">
                    <img src="https://picsum.photos/500/500?2" alt="Música">
                    <h3>Música 2</h3>
                    <p>Canção Verdadeira</p>
                </div>

                <div class="cv-card">
                    <img src="https://picsum.photos/500/500?3" alt="Música">
                    <h3>Música 3</h3>
                    <p>Canção Verdadeira</p>
                </div>

                <div class="cv-card">
                    <img src="https://picsum.photos/500/500?4" alt="Música">
                    <h3>Música 4</h3>
                    <p>Canção Verdadeira</p>
                </div>

            </div>

        </div>

    </section>

    <section class="cv-section">

        <div class="cv-container">

            <h2>
                Cadastro e Newsletter
            </h2>

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

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

                    <h3>
                        Criar Conta
                    </h3>

                    <p>
                        Favorite músicas e acompanhe rankings.
                    </p>

                    <form>

                        <input type="text" class="cv-input" placeholder="Seu nome">

                        <input type="email" class="cv-input" placeholder="Seu e-mail">

                        <button class="cv-submit">
                            Criar Conta
                        </button>

                    </form>

                </div>

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

                    <h3>
                        Newsletter
                    </h3>

                    <p>
                        Receba lançamentos e novidades.
                    </p>

                    <form>

                        <input type="email" class="cv-input" placeholder="Digite seu e-mail">

                        <button class="cv-submit">
                            Assinar Newsletter
                        </button>

                    </form>

                </div>

            </div>

        </div>

    </section>

</div>

<?php
get_footer();
?>