# 🏁 Quiz Circuitos MotoGP: Conhece as Pistas Míticas do Campeonato?

Teste os seus conhecimentos sobre os circuitos lendários de MotoGP! 12 perguntas sobre curvas icónicas, recordes de velocidade e características técnicas das melhores pistas do mundo.

---

import ArticleScript from '@/components/ArticleScript';
import ArticleStyle from '@/components/ArticleStyle';


{/* Hero Section */}
<div className="article-container" style={{textAlign: 'center', padding: '40px 20px'}}>
    <div style={{display: 'inline-block', background: 'linear-gradient(135deg, #e63946 0%, #f77f00 100%)', padding: '8px 20px', borderRadius: '20px', marginBottom: '20px'}}>
        <span style={{color: 'white', fontWeight: '700', fontSize: '0.9em'}}>🏁 CIRCUITOS MÍTICOS</span>
    </div>
    
    <h1 style={{fontSize: '2.5em', lineHeight: '1.2', marginBottom: '20px', background: 'linear-gradient(135deg, #ffffff 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'}}>
        Quiz Circuitos Lendários MotoGP
    </h1>
    
    <p style={{fontSize: '1.2em', color: '#cbd5e1', maxWidth: '700px', margin: '0 auto 30px', lineHeight: '1.6'}}>
        De Mugello a Phillip Island, cada circuito conta uma história. <strong style={{color: '#f77f00'}}>12 perguntas cativantes</strong> sobre curvas icónicas, recordes de velocidade e segredos das melhores pistas do mundo!
    </p>
    
    <img src="/images/articles/motogp-circuit-hero.webp" alt="Circuito MotoGP" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '30px auto', display: 'block', boxShadow: '0 20px 60px rgba(230, 57, 70, 0.4)'}} />
    
    <div className="hero-info-grid">
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🏎️</div>
            <div className="hero-info-text">Curvas míticas</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⚡</div>
            <div className="hero-info-text">Recordes velocidade</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🌍</div>
            <div className="hero-info-text">Pistas mundiais</div>
        </div>
    </div>
    
    <button id="start-quiz-circuits" style={{background: 'linear-gradient(135deg, #e63946, #f77f00)', color: 'white', border: 'none', padding: '18px 50px', borderRadius: '50px', fontSize: '1.3em', fontWeight: '700', cursor: 'pointer', boxShadow: '0 10px 30px rgba(230, 57, 70, 0.4)', marginTop: '40px', transition: 'all 0.3s'}}>
        🚀 INICIAR QUIZ
    </button>
</div>

{/* Progress Bar */}
<div id="quiz-progress-container-circuits" style={{position: 'sticky', top: '0', zIndex: '100', background: 'rgba(2, 6, 23, 0.95)', backdropFilter: 'blur(10px)', padding: '15px 20px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'none'}}>
    <div style={{maxWidth: '800px', margin: '0 auto'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
            <span style={{fontSize: '0.9em', color: '#94a3b8'}} id="quiz-progress-text-circuits">Pergunta 1/12</span>
            <span style={{fontSize: '0.9em', color: '#f77f00', fontWeight: '600'}} id="quiz-timer-circuits">0:00</span>
        </div>
        <div style={{height: '6px', background: 'rgba(255,255,255,0.1)', borderRadius: '10px', overflow: 'hidden'}}>
            <div id="quiz-progress-bar-circuits" style={{height: '100%', width: '8.33%', background: 'linear-gradient(90deg, #e63946, #f77f00)', transition: 'width 0.3s ease'}}></div>
        </div>
    </div>
</div>

{/* Quiz Form */}
<form id="quiz-form-circuits" style={{maxWidth: '800px', margin: '40px auto', padding: '0 20px', display: 'none'}}>
    {/* Questions dynamically generated */}
</form>

{/* Result Panel */}
<div className="quiz-result-panel" id="quiz-result-circuits" style={{display: 'none', maxWidth: '800px', margin: '60px auto', padding: '0 20px'}}>
    <div style={{background: 'linear-gradient(135deg, rgba(230, 57, 70, 0.1), rgba(247, 127, 0, 0.1))', border: '2px solid rgba(247, 127, 0, 0.3)', borderRadius: '24px', padding: '50px 40px', textAlign: 'center'}}>
        <div style={{fontSize: '4em', marginBottom: '20px'}} id="result-emoji-circuits">🏁</div>
        <h2 style={{fontSize: '2.2em', marginBottom: '15px'}}>Resultado Final</h2>
        <div id="result-score-circuits" style={{fontSize: '3.5em', fontWeight: '800', background: 'linear-gradient(135deg, #e63946, #f77f00)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'}}></div>
        <p id="result-text-circuits" style={{fontSize: '1.2em', color: '#cbd5e1', margin: '20px 0'}}></p>
        <div id="result-profile-circuits" style={{display: 'inline-block', background: 'rgba(247, 127, 0, 0.2)', padding: '12px 30px', borderRadius: '20px', marginTop: '20px'}}>
            <span style={{color: '#f77f00', fontWeight: '700', fontSize: '1.1em'}} id="profile-badge-circuits"></span>
        </div>

        <div style={{display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '40px', flexWrap: 'wrap'}}>
            <button type="button" className="restart-btn-circuits" style={{background: 'linear-gradient(135deg, #e63946, #f77f00)', color: 'white', border: 'none', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '700', cursor: 'pointer'}}>🔄 Reiniciar</button>
            <a href="/dashboard" style={{background: 'rgba(255,255,255,0.05)', color: 'white', border: '2px solid rgba(255,255,255,0.2)', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📊 O Meu Perfil</a>
            <a href="#" id="share-whatsapp-circuits" style={{background: 'linear-gradient(135deg, #25D366, #128C7E)', color: 'white', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📱 Partilhar</a>
        </div>
    </div>
</div>

<img src="/images/articles/motogp-circuit-aerial.webp" alt="Vista aérea circuito" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '40px auto', display: 'block', boxShadow: '0 10px 40px rgba(0,0,0,0.3)'}} />


<ArticleStyle content={`

/* Fix text overflow in results */
#quiz-result-circuits,
#quiz-result-circuits p,
h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}
li, .options-circuits label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Hero Info Cards */
.hero-info-grid { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero-info-card { background: rgba(255,255,255,0.05); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); text-align: center; min-width: 120px; }
.hero-info-text { font-size: 0.9em; color: #94a3b8; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .article-container { padding: 20px 10px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    p { font-size: 1em; }

    .hero-info-grid { gap: 8px; }
    .hero-info-card { padding: 8px 5px; flex: 1; min-width: 80px; }
    .hero-info-card div:first-child { font-size: 1.4em; margin-bottom: 2px; }
    .hero-info-text { font-size: 0.75em; line-height: 1.2; }
    
    .options-circuits label {
        padding: 12px;
        font-size: 0.95em;
    }
    
    button, a, #start-quiz-circuits {
        width: 100%;
        padding: 18px 20px;
        box-sizing: border-box;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        white-space: normal;
    }
    
    .next-btn-circuits, .prev-btn-circuits, .submit-btn-circuits {
        width: 100%;
        margin-bottom: 10px;
    }
}

`} />

<ArticleScript content={`
window.initCircuitsQuiz = function() {
    if (window.initCircuitsQuizDone) return;
    const startBtn = document.getElementById('start-quiz-circuits');
    if (!startBtn) return;
    
    window.initCircuitsQuizDone = true;

    let currentPageCircuits = 1;
    let startTimeCircuits = Date.now();
    let timerIntervalCircuits = null;
    
    const correctAnswersCircuits = {
        q1: 'Assen',
        q2: 'Mugello',
        q3: 'A curva Lukey Heights',
        q4: '362,4 km/h',
        q5: 'Circuit de Catalunya',
        q6: 'Losail (Qatar)',
        q7: 'Curva 8 - "Corkscrew"',
        q8: 'Sepang',
        q9: 'Autodromo Termas de Rio Hondo',
        q10: 'Silverstone',
        q11: 'A curva Stoner',
        q12: 'Circuit des Amériques (COTA)'
    };
    
    const questionsDataCircuits = [
        {
            q: 'q1', 
            title: 'Qual circuito é apelidado de "A Catedral" do MotoGP?', 
            cat: '🏛️ LENDA', 
            options: ['Silverstone', 'Mugello', 'Assen', 'Jerez'],
            info: '🇳🇱 O TT Circuit Assen nos Países Baixos'
        },
        {
            q: 'q2', 
            title: 'Em qual circuito italiano a curva "Arrabiata" faz vibrar os fãs?', 
            cat: '🇮🇹 ITÁLIA', 
            options: ['Imola', 'Mugello', 'Misano', 'Monza'],
            info: '🏔️ Mugello - curva rápida a subir'
        },
        {
            q: 'q3', 
            title: 'Qual curva de Phillip Island oferece a melhor vista panorâmica?', 
            cat: '🌊 AUSTRÁLIA', 
            options: ['A reta Gardner', 'A curva Lukey Heights', 'A curva Doohan', 'Southern Loop'],
            info: '🏖️ Com vista para o Oceano Pacífico'
        },
        {
            q: 'q4', 
            title: 'Qual a velocidade máxima atingida na reta de Mugello?', 
            cat: '⚡ RECORDES', 
            options: ['356,7 km/h', '362,4 km/h', '349,3 km/h', '371,6 km/h'],
            info: '🚀 A reta mais rápida do campeonato'
        },
        {
            q: 'q5', 
            title: 'Qual circuito acolhe o Grande Prémio da Catalunha?', 
            cat: '🇪🇸 ESPANHA', 
            options: ['Circuit Ricardo Tormo', 'Circuit de Catalunya', 'MotorLand Aragón', 'Circuito de Jerez'],
            info: '🏙️ Perto de Barcelona - circuito muito técnico'
        },
        {
            q: 'q6', 
            title: 'Primeiro circuito a acolher uma corrida noturna no MotoGP?', 
            cat: '🌙 NOTURNA', 
            options: ['Sepang', 'Losail (Qatar)', 'Yas Marina', 'Singapura'],
            info: '✨ Corrida sob holofotes desde 2008'
        },
        {
            q: 'q7', 
            title: 'Qual é a curva mais famosa de Laguna Seca?', 
            cat: '🇺🇸 EUA', 
            options: ['Curva 6 - "Rainey Curve"', 'Curva 8 - "Corkscrew"', 'Curva 11', 'Turn 2'],
            info: '🎢 Descida vertiginosa de 18 metros'
        },
        {
            q: 'q8', 
            title: 'Circuito conhecido pelas suas temperaturas extremas (40°C+)?', 
            cat: '🔥 CALOR', 
            options: ['Buriram', 'Sepang', 'Mandalika', 'Losail'],
            info: '🇲🇾 Malásia - humidade tropical intensa'
        },
        {
            q: 'q9', 
            title: 'Qual circuito sul-americano entrou no calendário em 2014?', 
            cat: '🌎 AMÉRICA SUL', 
            options: ['Interlagos', 'Autodromo Termas de Rio Hondo', 'Buenos Aires', 'Brasília'],
            info: '🇦🇷 Argentina - muito rápido e técnico'
        },
        {
            q: 'q10', 
            title: 'Circuito britânico do MotoGP desde 2010?', 
            cat: '🇬🇧 UK', 
            options: ['Donington Park', 'Silverstone', 'Brands Hatch', 'Cadwell Park'],
            info: '🏎️ Templo da velocidade britânica'
        },
        {
            q: 'q11', 
            title: 'Qual curva de Phillip Island tem o nome de um campeão australiano?', 
            cat: '🏆 HOMENAGEM', 
            options: ['A curva Doohan', 'A curva Miller', 'A curva Stoner', 'A curva Gardner'],
            info: '🇦🇺 Casey Stoner - lenda local'
        },
        {
            q: 'q12', 
            title: 'Qual circuito americano tem uma curva chamada "Big Red"?', 
            cat: '🏁 TEXAS', 
            options: ['Indianápolis', 'Circuit des Amériques (COTA)', 'Road Atlanta', 'Laguna Seca'],
            info: '🤠 Austin, Texas - subida espetacular'
        }
    ];
    
    function startTimerCircuits() {
        if (timerIntervalCircuits) clearInterval(timerIntervalCircuits);
        startTimeCircuits = Date.now();
        timerIntervalCircuits = setInterval(updateTimerCircuits, 1000);
    }
    
    function updateTimerCircuits() {
        const elapsed = Math.floor((Date.now() - startTimeCircuits) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        const timerEl = document.getElementById('quiz-timer-circuits');
        if (timerEl) timerEl.textContent = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    }
    
    function updateProgressCircuits() {
        const progressText = document.getElementById('quiz-progress-text-circuits');
        const progressBar = document.getElementById('quiz-progress-bar-circuits');
        const progressContainer = document.getElementById('quiz-progress-container-circuits');
        
        if (progressText) progressText.textContent = 'Pergunta ' + currentPageCircuits + '/12';
        if (progressBar) progressBar.style.width = ((currentPageCircuits / 12) * 100) + '%';
        if (progressContainer) progressContainer.style.display = 'block';
    }
    
    function startQuiz() {
        document.getElementById('start-quiz-circuits').style.display = 'none';
        const container = document.getElementById('quiz-form-circuits');
        container.style.display = 'block';
        container.innerHTML = '';
        
        questionsDataCircuits.forEach((data, index) => {
            const pageNum = index + 1;
            const isFirst = pageNum === 1;
            const isLast = pageNum === 12;
            
            const html = \`
    <div className="quiz-page-circuits" id="page-circuits-\${pageNum}" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; margin-bottom: 20px; display: \${isFirst ? 'block' : 'none'};">
        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
            <div style="background: linear-gradient(135deg, #e63946, #f77f00); width: 55px; height: 55px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 800; color: white; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);">\${pageNum}</div>
            <div style="text-transform: uppercase; font-size: 0.85em; letter-spacing: 1.2px; color: #f77f00; background: rgba(247, 127, 0, 0.15); padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(247, 127, 0, 0.3);">\${data.cat}</div>
        </div>
        <h3 style="font-size: 1.5em; margin: 25px 0; line-height: 1.5; color: #e2e8f0;">\${data.title}</h3>
        <div style="background: rgba(247, 127, 0, 0.08); border-left: 3px solid #f77f00; padding: 12px 15px; margin-bottom: 25px; border-radius: 8px;">
            <span style="font-size: 0.95em; color: #cbd5e1;">💡 <em>\${data.info}</em></span>
        </div>
        <div className="options-circuits" style="display: grid; gap: 12px;">
            \${data.options.map(opt => \`
                <label style="display: flex; align-items: center; gap: 15px; padding: 20px; background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden;" onmouseover="this.style.borderColor='rgba(247, 127, 0, 0.5)'; this.style.background='rgba(247, 127, 0, 0.05)';" onmouseout="this.style.borderColor='rgba(255,255,255,0.1)'; this.style.background='rgba(255,255,255,0.03)';">
                    <input type="radio" name="\${data.q}" value="\${opt}" style="width: 22px; height: 22px; accent-color: #f77f00; flex-shrink: 0;" />
                    <span style="font-size: 1.1em; font-weight: 500;">\${opt}</span>
                </label>
            \`).join('')}
        </div>
        <div style="display: flex; gap: 10px; margin-top: 35px;">
            \${!isFirst ? '<button type="button" class="prev-btn-circuits" style="flex:1; background: rgba(255,255,255,0.05); color: #cbd5e1; border: 2px solid rgba(255,255,255,0.2); padding: 16px 32px; border-radius: 12px; font-size: 1.05em; font-weight: 600; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background=\'rgba(255,255,255,0.1)\'" onmouseout="this.style.background=\'rgba(255,255,255,0.05)\'">← Anterior</button>' : ''}
            <button type="button" class="\${isLast ? 'submit-btn-circuits' : 'next-btn-circuits'}" style="flex:2; background: linear-gradient(135deg, \${isLast ? '#22c55e, #16a34a' : '#e63946, #f77f00'}); color: white; border: none; padding: 16px 42px; border-radius: 12px; font-size: 1.1em; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.3); transition: all 0.3s;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.3)'">\${isLast ? '🏁 Terminar' : 'Seguinte →'}</button>
        </div>
    </div>\`;
            
            container.insertAdjacentHTML('beforeend', html);
        });
        
        const nextBtns = container.querySelectorAll('.next-btn-circuits');
        for(let i=0; i<nextBtns.length; i++) {
            nextBtns[i].onclick = function() {
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'none';
                currentPageCircuits++;
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'block';
                updateProgressCircuits();
                document.getElementById('page-circuits-' + currentPageCircuits).scrollIntoView({ behavior: 'smooth', block: 'start' });
            };
        }
        
        const prevBtns = container.querySelectorAll('.prev-btn-circuits');
        for(let i=0; i<prevBtns.length; i++) {
            prevBtns[i].onclick = function() {
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'none';
                currentPageCircuits--;
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'block';
                updateProgressCircuits();
                document.getElementById('page-circuits-' + currentPageCircuits).scrollIntoView({ behavior: 'smooth', block: 'start' });
            };
        }
        
        const submitBtn = container.querySelector('.submit-btn-circuits');
        if(submitBtn) submitBtn.onclick = submitQuizCircuits;
        
        startTimerCircuits();
        updateProgressCircuits();
        container.scrollIntoView({ behavior: 'smooth' });
    }
    
    function submitQuizCircuits() {
        if (timerIntervalCircuits) clearInterval(timerIntervalCircuits);
        
        let score = 0;
        for (const q in correctAnswersCircuits) {
            const selected = document.querySelector('input[name="' + q + '"]:checked');
            if (selected && selected.value === correctAnswersCircuits[q]) score++;
        }
        
        const percentage = Math.round((score / 12) * 100);
        const emoji = percentage === 100 ? '🏆' : percentage >= 80 ? '🏁' : percentage >= 60 ? '🏍️' : percentage >= 40 ? '🏎️' : '🛣️';
        const message = percentage === 100 ? 'Perfeito! Conhece os circuitos de cor!' : 
                        percentage >= 80 ? 'Especialista em pistas internacionais!' :
                        percentage >= 60 ? 'Bom nível, continue a explorar!' :
                        percentage >= 40 ? 'Nada mal, mas há margem para melhorar!' :
                        'Acompanhe mais corridas para progredir!';
        const profile = percentage === 100 ? '🏆 Mestre dos Circuitos' : 
                        percentage >= 80 ? '🏁 Especialista em Pistas' : 
                        percentage >= 60 ? '🏍️ Conhecedor' : 
                        percentage >= 40 ? '🏎️ Amador' : '🛣️ Iniciante';
        
        document.getElementById('result-emoji-circuits').textContent = emoji;
        document.getElementById('result-score-circuits').textContent = score + '/12 (' + percentage + '%)';
        document.getElementById('result-text-circuits').textContent = message;
        document.getElementById('profile-badge-circuits').textContent = profile;
        
        try {
            if (typeof window.save2RoueQuizResult === 'function') {
                window.save2RoueQuizResult(score, 12, 'MotoGP Circuits', profile.split(' ').slice(1).join(' '));
            }
        } catch(e) { console.error(e); }
        
        const shareText = 'Obtive ' + score + '/12 (' + percentage + '%) no Quiz Circuitos MotoGP! 🏁 Conhece as pistas míticas? Testa os teus conhecimentos em 2roue.com';
        document.getElementById('share-whatsapp-circuits').href = 'https://wa.me/?text=' + encodeURIComponent(shareText);
        
        document.getElementById('quiz-form-circuits').style.display = 'none';
        document.getElementById('quiz-progress-container-circuits').style.display = 'none';
        const resDiv = document.getElementById('quiz-result-circuits');
        resDiv.style.display = 'block';
        resDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    if (startBtn) startBtn.onclick = startQuiz;
    
    const restartBtn = document.querySelector('.restart-btn-circuits');
    if(restartBtn) {
        restartBtn.onclick = function() {
            document.getElementById('quiz-result-circuits').style.display = 'none';
            document.getElementById('quiz-form-circuits').style.display = 'none';
            document.getElementById('start-quiz-circuits').style.display = 'inline-block';
            currentPageCircuits = 1;
            window.scrollTo({top: 0, behavior: 'smooth'});
        };
    }
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', window.initCircuitsQuiz);
} else {
    window.initCircuitsQuiz();
}
setTimeout(function() {
    if(!window.initCircuitsQuizDone && window.initCircuitsQuiz) window.initCircuitsQuiz();
}, 500);

window.startTimerCircuits = function() {};
`} />