{% extends "base.html" %}

{% block type_styles %}
.interactive-post {
    max-width: 600px;
    margin: 0 auto;
}

.question {
    margin-bottom: 25px;
    padding: 20px;
    background-color: rgba(245, 245, 220, 0.5);
    border-radius: 12px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    border-left: 4px solid var(--gold);
}

.question p {
    font-weight: 600;
    color: var(--harvard-red);
    margin-bottom: 15px;
    text-align: left;
}

.question label {
    display: block;
    margin-bottom: 8px;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.95rem;
}

.question label:hover {
    background-color: rgba(165, 71, 28, 0.1);
}

.question input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--harvard-red);
}

.quiz-button {
    background-color: var(--harvard-red);
    color: var(--light-beige);
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 30px auto;
    display: block;
    transition: background-color 0.3s ease;
}

.quiz-button:hover {
    background-color: var(--crimson);
}

.quiz-result {
    margin-top: 30px;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    color: var(--harvard-red);
    padding: 25px;
    background-color: rgba(218, 165, 32, 0.1);
    border-radius: 12px;
    border: 2px solid var(--gold);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-intro {
    text-align: left;
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(137, 120, 78, 0.05);
    border-radius: 8px;
}

.quiz-results-guide {
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(245, 245, 220, 0.3);
    border-radius: 8px;
    border: 1px solid var(--gold);
}

.quiz-results-guide h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--harvard-red);
}

.result-type {
    margin: 15px 0;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border-left: 3px solid var(--crimson);
}

.result-type strong {
    color: var(--harvard-red);
    display: block;
    margin-bottom: 5px;
}
{% endblock %}

{% block content %}
<article class="interactive-post">
    {% if post.id == 'quizz' %}
    <div class="quiz-intro">
        <h3>{{ post.subtitle }}</h3>
        <p><em>{{ post.last_updated | format_date if post.last_updated }}</em></p>
    </div>

    <div class="quiz-container">
        <div class="question">
            <p>1) Um domingo perfeito para você seria...</p>
            <label><input type="radio" name="q1" value="sonhadora"> Ler um livro com chá quentinho ☕📖</label>
            <label><input type="radio" name="q1" value="prática"> Organizar a semana ✨</label>
            <label><input type="radio" name="q1" value="aventureira"> Explorar um lugar novo 🚀</label>
        </div>

        <div class="question">
            <p>2) Qual desses animais combina mais com você?</p>
            <label><input type="radio" name="q2" value="sonhadora"> Gato 🐱</label>
            <label><input type="radio" name="q2" value="prática"> Coruja 🦉</label>
            <label><input type="radio" name="q2" value="aventureira"> Golfinho 🐬</label>
        </div>

        <div class="question">
            <p>3) Você é:</p>
            <label><input type="radio" name="q3" value="sonhadora"> Peixes, virgem, câncer ou libra</label>
            <label><input type="radio" name="q3" value="prática"> Touro, áries, gêmeos ou capricórnio</label>
            <label><input type="radio" name="q3" value="aventureira"> Aquário, sagitário, leão ou escorpião</label>
        </div>

        <div class="question">
            <p>4) O que tem na sua bolsa:</p>
            <label><input type="radio" name="q4" value="sonhadora"> Meu diário e um livro</label>
            <label><input type="radio" name="q4" value="prática"> Um canivete</label>
            <label><input type="radio" name="q4" value="aventureira"> Binóculos</label>
        </div>

        <button class="quiz-button" onclick="calcularResultado()">Ver meu resultado</button>

        <div id="resultado" class="quiz-result"></div>
    </div>

    <div class="quiz-results-guide">
        <h3>Possíveis Resultados</h3>
        
        <div class="result-type">
            <strong>🌟 Sonhadora</strong>
            <p>Você vive de imaginação e ternura.</p>
        </div>
        
        <div class="result-type">
            <strong>🌿 Prática</strong>
            <p>Você gosta de organização e tranquilidade.</p>
        </div>
        
        <div class="result-type">
            <strong>🚀 Aventureira</strong>
            <p>Você está sempre pronta para novidades.</p>
        </div>
    </div>

    {% else %}
    <!-- Conteúdo padrão para outros tipos interativos -->
    {{ post.content_html | safe }}
    {% endif %}
</article>
{% endblock %}

{% block extra_js %}
{% if post.id == 'quizz' %}
<script>
function calcularResultado() {
    let pontos = { sonhadora: 0, prática: 0, aventureira: 0 };

    // Pega todas as respostas selecionadas
    let respostas = document.querySelectorAll("input[type=radio]:checked");
    
    if (respostas.length < 4) {
        document.getElementById("resultado").innerHTML = "Por favor, responda todas as questões! 😊";
        return;
    }
    
    // Conta os pontos
    respostas.forEach(r => pontos[r.value]++);

    // Encontra o perfil com mais pontos
    let perfil = Object.keys(pontos).reduce((a,b) => pontos[a] > pontos[b] ? a : b);

    // Mostra resultado
    let resultado = document.getElementById("resultado");
    if (perfil === "sonhadora") {
        resultado.innerHTML = "🌟 Você é Sonhadora ✨<br><small>Vive de imaginação e ternura.</small>";
    } else if (perfil === "prática") {
        resultado.innerHTML = "🌿 Você é Prática 🌿<br><small>Gosta de organização e tranquilidade.</small>";
    } else {
        resultado.innerHTML = "🚀 Você é Aventureira 🚀<br><small>Sempre pronta para novidades.</small>";
    }
    
    // Scroll suave para o resultado
    resultado.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

// Reset do quiz
function resetQuiz() {
    document.querySelectorAll("input[type=radio]").forEach(r => r.checked = false);
    document.getElementById("resultado").innerHTML = "";
}
</script>
{% endif %}
{% endblock %}