# L'Odissea dell'Asfalto: un viaggio epico in moto 🌄🌊

Dall'alta montagna alle spiagge selvagge: vivi un roadtrip in moto indimenticabile. Scopri il nostro racconto  e metti alla prova il tuo profilo di viaggiatore.

---

import ArticleScript from '@/components/ArticleScript';

{/* Hero Section Adventure */}
<div className="text-center mb-12 relative">
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-64 bg-emerald-500/10 rounded-full blur-[100px] pointer-events-none"></div>
  
  <div className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500/20 text-emerald-400 border border-emerald-500/50 rounded-full text-sm font-bold uppercase tracking-widest mb-6 shadow-[0_0_15px_rgba(16,185,129,0.3)]">
    <span>🌲</span> RACCONTO D'AVVENTURA
  </div>
  
  <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight text-white drop-shadow-lg">
    Dalla Montagna <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">al Mare</span>
  </h1>
  
  <p className="text-xl text-slate-300 font-medium mb-10 max-w-2xl mx-auto">
    3000 chilometri, 3 climi, 1 moto. Un'epopea di pura libertà attraverso i paesaggi più belli.
  </p>
  
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-emerald-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🏔️</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Altitudine Max</div>
      <div className="text-xl font-black text-emerald-400">2800m</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-amber-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🏜️</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Deserto</div>
      <div className="text-xl font-black text-amber-500">45°C</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-cyan-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🌊</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Oceano</div>
      <div className="text-xl font-black text-cyan-400">L'Arrivo</div>
    </div>
  </div>
</div>

<div className="flex justify-center my-10">
  <AdSense slot="4357278838" format="auto" />
</div>

<div className="prose prose-invert prose-lg max-w-none">
    
    <div className="my-12 relative p-8 rounded-3xl bg-slate-900 border border-emerald-500/30 shadow-[0_0_30px_rgba(16,185,129,0.1)] overflow-hidden">
        <div className="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-emerald-400 to-cyan-500"></div>
        <div className="text-6xl text-emerald-500/20 absolute top-4 left-6 font-serif">"</div>
        <p className="relative z-10 text-xl md:text-2xl font-medium italic text-slate-200 m-0 pl-6 border-none">
            L'asfalto non è solo una superficie, è una promessa. Quella che ti porta dove nessuno ti aspetta.
        </p>
    </div>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-emerald-400">Capitolo 1 :</span> Il Respiro delle Vette 🏔️
    </h2>
    <p className="text-slate-300 leading-relaxed">
        La partenza è stata all'alba. L'aria era frizzante, carica dell'odore dei pini. La mia moto, carica come un mulo ma pronta a scattare, sembrava impaziente quanto me. Le prime curve hanno rivelato la maestosità delle Alpi.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Guidare in montagna è una danza. Frenata, sguardo, accelerazione. Ogni curva è una domanda, ogni uscita è una risposta. A 2000 m di altitudine, il motore respira in modo diverso, e anche l'uomo. Ti senti piccolo, ma infinitamente vivo.
    </p>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-amber-500">Capitolo 2 :</span> Attraversando il Vuoto 🏜️
    </h2>
    <p className="text-slate-300 leading-relaxed">
        Dopo il fresco, il fuoco. Il paesaggio è cambiato bruscamente. La pietra grigia ha lasciato il posto all'ocra bruciante. Il deserto delle Bardenas, un'immensa distesa ostile e magnifica.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Qui, è la mente che pilota. Il calore si infiltra sotto il casco, la linea retta ipnotizza. Ma che bellezza! Monoliti di terra si ergono come guardiani silenziosi. È allora che ho capito che un viaggio in moto non è una fuga, ma un incontro con se stessi.
    </p>

    <div className="my-10 bg-amber-500/10 border border-amber-500/30 p-6 rounded-2xl backdrop-blur-sm">
        <h4 className="text-amber-500 text-xl font-bold mb-2 flex items-center gap-2">
            <span>⚠️</span> Lezione del Deserto
        </h4>
        <p className="text-amber-200/80 m-0">Pianifica sempre più acqua che benzina. E non sottovalutare mai la fatica causata dal caldo.</p>
    </div>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-cyan-400">Capitolo 3 :</span> L'Oceano come Ricompensa 🌊
    </h2>
    <p className="text-slate-300 leading-relaxed">
        Dopo tre giorni di polvere, l'odore di sale. L'arrivo sulla costa basca è stato una liberazione. Il blu infinito dell'Atlantico in contrasto con il verde delle colline.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Mettere il cavalletto di fronte al mare, togliersi il casco e annusare la brezza marina... È l'essenza stessa di un roadtrip. La stanchezza evapora, lasciando solo ricordi incisi per sempre.
    </p>

    <h2 className="text-3xl font-bold mt-12 mb-6">Conclusione: Il Richiamo del Ritorno</h2>
    <p className="text-slate-300 leading-relaxed">
        Questo viaggio mi ha trasformato. Ho imparato che il lusso non è un hotel a 5 stelle, ma un bivacco sotto la Via Lattea. Che la velocità conta meno del ritmo.
    </p>
</div>

{/* Start of Traveler Quiz */}
<div className="mt-20 border-t border-slate-800 pt-16">
    <div id="quiz-intro-block-adv" className="bg-slate-900 border border-emerald-500/30 rounded-3xl p-10 md:p-14 text-center shadow-[0_0_40px_rgba(16,185,129,0.15)] relative overflow-hidden">
        <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
        <h2 className="text-3xl md:text-5xl font-black text-white mb-6 relative z-10">
             Che Viaggiatore in Moto Sei? 🌍
        </h2>
        <p className="text-xl text-slate-300 mb-10 relative z-10 max-w-2xl mx-auto">
            Avventuriero estremo, pilota zen o esploratore del comfort? 8 domande per scoprire il tuo profilo.
        </p>
        <button id="start-btn-adv" className="relative z-10 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white border-none px-10 py-5 rounded-full text-xl font-black cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] uppercase tracking-wider transition-all hover:scale-105">
            Inizia l'Avventura
        </button>
    </div>

    {/* Progress Bar */}
    <div id="quiz-progress-container-adv" className="sticky top-0 z-50 bg-slate-950/90 backdrop-blur-md p-4 border-b border-slate-800 hidden mt-10">
        <div className="max-w-3xl mx-auto">
            <div className="flex justify-between mb-2">
                <span className="text-sm font-bold text-emerald-400" id="quiz-progress-text-adv">Domanda 1/8</span>
            </div>
            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                <div id="quiz-progress-bar-adv" className="h-full w-[12.5%] bg-gradient-to-r from-emerald-400 to-teal-500 transition-all duration-300 rounded-full"></div>
            </div>
        </div>
    </div>

    <form id="quiz-form-adv" className="max-w-3xl mx-auto my-10 hidden">

        {/* Q1 */}
        <div className="quiz-page-adv active bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden" id="adv-page-1">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">1</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">La tua destinazione da sogno?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="desert" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Le dune del Sahara (Soli al mondo)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="route" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Route 66 (Leggendaria e comoda)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="montagne" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">I passi alpini (Curve a non finire)</span>
                </label>
            </div>
            <div className="text-right mt-8">
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q2 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-2">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">2</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">La tua notte ideale in viaggio?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="bivouac" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">In tenda, davanti al fuoco</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="hotel" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Hotel con piscina e parcheggio custodito</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="gite" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Agriturismo per incontrare la gente del posto</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q3 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-3">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">3</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">Un guasto in mezzo al nulla...</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="mecano" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Ho la mia cassetta degli attrezzi, riparo io!</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="assistance" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Chiamo l'assistenza, niente stress</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="stress" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Panico totale...</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q4 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-4">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">4</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">Quanti km al giorno?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="cool" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">150-200 km (Prendendosi il proprio tempo)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="moyen" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">300-400 km (Buon ritmo)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="hard" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">+600 km (Mangiando asfalto)</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q5 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-5">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">5</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">I tuoi bagagli?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="alu" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Valigie in alluminio (Il look Avventura)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="souple" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Borse morbide impermeabili (Leggere)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="sac" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Solo uno zaino (Minimalista)</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q6 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-6">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">6</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">Arriva la pioggia...</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q6" value="continue" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Mi metto l'impermeabile e continuo!</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q6" value="stop" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Mi fermo al primo bar</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q7 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-7">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">7</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">GPS o Mappa cartacea?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="gps" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Ultimo GPS con traccia GPX</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="carte" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Mappa cartacea sul serbatoio</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="pif" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">A caso, si vedrà!</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Avanti →</button>
            </div>
        </div>

        {/* Q8 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-8">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">8</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">L'obiettivo del viaggio?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="destination" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Arrivare a destinazione</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="chemin" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Il cammino percorso</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="rencontre" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Gli incontri umani</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Indietro</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Vedi il mio Profilo</button>
            </div>
        </div>

    </form>

    {/* Results Panel */}
    <div id="quiz-result-adv" className="hidden max-w-3xl mx-auto my-16">
        <div className="bg-slate-900 border border-emerald-500/30 rounded-[2.5rem] p-10 md:p-16 text-center shadow-[0_0_50px_rgba(16,185,129,0.1)] relative overflow-hidden">
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-emerald-500/5 blur-3xl pointer-events-none"></div>
            
            <div className="text-7xl mb-6 relative z-10">🦅</div>
            <h2 className="text-3xl md:text-4xl font-black text-white mb-8 relative z-10">Il Tuo Profilo da Avventuriero</h2>
            
            <div id="quiz-result-content-adv" className="text-xl text-slate-300 mb-10 relative z-10 font-medium leading-relaxed bg-slate-800/50 p-8 rounded-2xl border border-slate-700/50"></div>
            
            <div className="text-center mt-10 relative z-10">
                <button id="restart-quiz-adv" className="bg-slate-800 hover:bg-slate-700 text-white border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all flex items-center justify-center gap-3 mx-auto">
                    🔄 Riprova
                </button>
            </div>
        </div>
    </div>
</div>

<div className="flex flex-col sm:flex-row gap-4 justify-center my-16 border-t border-slate-800 pt-10 px-4">
    <a href="#" className="universal-whatsapp-btn bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-[0_10px_20px_rgba(37,211,102,0.3)] flex items-center justify-center gap-3">
        <span className="text-2xl">📱</span> Condividi il mio profilo
    </a>
    <a href="/dashboard" className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white px-8 py-4 rounded-2xl font-black transition-all flex items-center justify-center gap-3 shadow-lg">
        👤 Vedi Statistiche Complete
    </a>
</div>

<ArticleStyle content={`
/* Force styles on dynamically injected results */
#quiz-result-content-adv h3 {
    font-size: 1.5rem;
    color: #34d399; /* emerald-400 */
    margin-bottom: 1rem;
    font-weight: 900;
}
#quiz-result-content-adv p {
    color: #cbd5e1; /* slate-300 */
}

/* Radio button selections */
input[type="radio"]:checked + span {
    color: #34d399;
    font-weight: 700;
}

@media (max-width: 768px) {
    .next-btn-adv, .prev-btn-adv {
        width: 100%;
        margin-bottom: 10px;
    }
}
`} />

<ArticleScript src="/scripts/quizzes/de-la-montagne-a-la-mer-le-recit-grandiose-dune-av-fr.js" />

