"""
The Ethical Revelation: Real-World Impact - Gradio application for the Justice & Equity Challenge.
Updated with i18n support for English (en), Spanish (es), and Catalan (ca).
"""

import os
import random
import time
import threading
from typing import Optional, Dict, Any, Tuple

import pandas as pd
import gradio as gr

# --- AI Model Share Imports ---
try:
    from aimodelshare.playground import Competition
    from aimodelshare.aws import get_token_from_session, _get_username_from_token
except ImportError:
    # For local dev without aimodelshare installed, mock these if needed or raise error
    # raise ImportError("The 'aimodelshare' library is required. Install with: pip install aimodelshare")
    pass

# ---------------------------------------------------------------------------
# Configuration & Caching
# ---------------------------------------------------------------------------
LEADERBOARD_CACHE_SECONDS = int(os.environ.get("LEADERBOARD_CACHE_SECONDS", "45"))
MAX_LEADERBOARD_ENTRIES = os.environ.get("MAX_LEADERBOARD_ENTRIES")
MAX_LEADERBOARD_ENTRIES = int(MAX_LEADERBOARD_ENTRIES) if MAX_LEADERBOARD_ENTRIES else None
DEBUG_LOG = os.environ.get("DEBUG_LOG", "false").lower() == "true"

TEAM_NAMES = [
    "The Justice League", "The Moral Champions", "The Data Detectives",
    "The Ethical Explorers", "The Fairness Finders", "The Accuracy Avengers"
]

_cache_lock = threading.Lock()
_leaderboard_cache: Dict[str, Any] = {"data": None, "timestamp": 0.0}
_user_stats_cache: Dict[str, Dict[str, Any]] = {}
USER_STATS_TTL = LEADERBOARD_CACHE_SECONDS

# ---------------------------------------------------------------------------
# TRANSLATION CONFIGURATION
# ---------------------------------------------------------------------------

TRANSLATIONS = {
    "en": {
        "title": "🚀 The Ethical Revelation: Real-World Impact",
        "loading_personal": "⏳ Loading your personalized experience...",
        # Stats Screen
        "stats_title": "🏆 Great Work, Engineer! 🏆",
        "stats_subtitle": "Here's your performance summary.",
        "stats_heading": "Your Stats",
        "lbl_accuracy": "Best Accuracy",
        "lbl_rank": "Your Rank",
        "lbl_team": "Team",
        "stats_footer": "Ready to share your model and explore its real-world impact?",
        "btn_deploy": "🌍 Share Your AI Model (Simulation Only)",
        "guest_title": "🚀 You're Signed In!",
        "guest_subtitle": "You haven't submitted a model yet, but you're all set to continue learning.",
        "guest_body": "Once you submit a model in the Model Building Game, your accuracy and ranking will appear here.",
        "guest_footer": "Continue to the next section when you're ready.",
        "loading_session": "🔒 Loading your session...",
        # Step 2 (Warning)
        "s2_title": "⚠️ But Wait...",
        "s2_intro": "Before we share the model, there's something you need to know...",
        "s2_box_title": "A Real-World Story",
        "s2_p1": "A model similar to yours was actually used in the real world. It was used by judges across the United States to help make decisions about defendants' futures.",
        "s2_p2": "Like yours, it had impressive accuracy scores. Like yours, it was built on data about past criminal cases. Like yours, it aimed to predict who would re-offend.",
        "s2_p3": "But something was terribly wrong...",
        "btn_back": "◀️ Back",
        "btn_reveal": "Reveal the Truth ▶️",
        # Step 3 (ProPublica)
        "s3_title": "📰 The ProPublica Investigation",
        "s3_head": "\"Machine Bias\" - A Landmark Investigation",
        "s3_p1": "In 2016, journalists at <strong>ProPublica</strong> investigated a widely-used criminal risk assessment algorithm called <strong>COMPAS</strong>. They analyzed over <strong>7,000 actual cases</strong> to see if the AI's predictions came true.",
        "s3_box_title": "Their Shocking Findings:",
        "s3_alert": "⚠️ Black defendants were labeled \"high-risk\" at nearly <u>TWICE</u> the rate of white defendants.",
        "s3_spec": "<strong>Specifically:</strong>",
        "s3_li1_pre": "defendants who <em>did NOT re-offend</em> were incorrectly labeled as <strong>\"high-risk\"</strong> at a rate of",
        "s3_li2_pre": "<strong>White defendants</strong> who <em>did NOT re-offend</em> were incorrectly labeled as <strong>\"high-risk\"</strong> at a rate of only <strong>24%</strong>",
        "s3_li3": "Meanwhile, <strong>white defendants</strong> who <em>DID re-offend</em> were <strong>more likely to be labeled \"low-risk\"</strong> compared to Black defendants",
        "s3_box2_title": "What Does This Mean?",
        "s3_mean_p1": "The AI system was <strong class='emph-danger'>systematically biased</strong>. It didn't just make random errors—it made <strong>different kinds of errors for different groups of people</strong>.",
        "s3_mean_p2": "Black defendants faced a much higher risk of being <strong class='emph-danger'>unfairly labeled as dangerous</strong>, potentially leading to longer prison sentences or denied parole—even when they would not have re-offended.",
        "btn_eu": "See This in Europe ▶️",
        "lbl_black": "Black", # Used in dynamic construction if needed
        # Step 4 EU
        "s4eu_title": "🇪🇺 This Isn’t Just a US Problem",
        "s4eu_head": "AI for “Risky Offenders” Is Already in Europe",
        "s4eu_intro": "The COMPAS story is not just an American warning. Across Europe, public authorities have experimented with <strong>very similar tools</strong> that aim to predict who will reoffend or which areas are “high risk”.",
        "s4eu_li1_title": "United Kingdom – HART (Harm Assessment Risk Tool)",
        "s4eu_li1_body": "A machine-learning model used by Durham Police to predict who will reoffend within two years. It uses variables like age, gender, <em>postcode</em>, housing and job instability – socio-economic proxies that can reproduce the same kinds of biased patterns exposed in COMPAS.",
        "s4eu_li2_title": "Spain – VioGén",
        "s4eu_li2_body": "A risk tool for gender-violence cases whose inner workings are largely a <em>\"black box\"</em>. Officers rely heavily on its scores to decide protection measures, even though the algorithm cannot easily be audited for bias or errors.",
        "s4eu_li3_title": "Netherlands & Denmark – Predictive profiling",
        "s4eu_li3_body": "Systems like the Dutch <em>Crime Anticipation System (CAS)</em> and Denmark’s algorithmic <em>“ghetto”</em> classifications use demographic and socio-economic data to steer policing and penalties, risking feedback loops that target certain communities again and again.",
        "s4eu_box_title": "Ongoing European Debate",
        "s4eu_box_body": "The Barcelona Prosecuter's office has proposed an \"electronic repeat-offense calculator\". Courts, regulators and researchers are actively examining how these tools affect fundamental rights such as non-discrimination, fair trial and data protection.",
        "s4eu_note": "<strong>Key point:</strong> The risks you saw with COMPAS are not far away in another country. <strong class='emph-key'>They are live questions in both Europe and the U.S. right now.</strong>",
        "btn_back_invest": "◀️ Back to the Investigation",
        "btn_zoom": "Zoom Out to the Lesson ▶️",
        # Step 4 Lesson
        "s4_title": "💡 The Critical Lesson",
        "s4_box_title": "Why This Matters:",
        "s4_li1_title": "Overall accuracy can hide group-specific harm",
        "s4_li1_body": "A model might be 70% accurate overall — but the remaining 30% of errors can fall disproportionately on <span class='emph-harm'>specific groups</span>, resulting in real harm even when the total accuracy appears “good”.",
        "s4_li2_title": "Historical bias in training data gets amplified",
        "s4_li2_body": "If past policing or judicial decisions were biased, the AI system will <span class='emph-harm'>learn and reinforce</span> those inequities — often making them worse at scale.",
        "s4_li3_title": "Real people's lives are affected",
        "s4_li3_body": "Each <strong class='emph-harm'>\"false positive\"</strong> represents a person who may lose years of freedom, employment, housing, or family connection — all due to a single <strong class='emph-harm'>biased prediction</strong>.",
        "btn_back_eu": "◀️ Back",
        "btn_what_do": "What Can We Do? ▶️",
        # Step 5 Path
        "s5_title": "🛤️ The Path Forward",
        "s5_head": "From Accuracy to Ethics",
        "s5_intro": "You've now seen both sides of the AI story:",
        "s5_li1": "✅ You built models that achieved higher accuracy scores",
        "s5_li2": "⚠️ You learned how similar models caused real-world harm",
        "s5_li3": "🤔 You understand that accuracy alone is not enough",
        "s5_box_title": "What You'll Do Next:",
        "s5_p1": "In the next section, you'll be introduced to a <strong class='emph-key'>new way of measuring success</strong>—one that balances performance with fairness and ethics.",
        "s5_p2": "You'll learn techniques to <strong class='emph-key'>detect bias</strong> in your models, <strong class='emph-key'>measure fairness</strong> across different groups, and <strong class='emph-key'>redesign your AI</strong> to minimize harm.",
        "s5_mission": "🎯 Your new mission: Build AI that is not just accurate, but also <strong class='emph-key'>fair, equitable, and ethically sound</strong>.",
        "s5_scroll": "👇 SCROLL DOWN 👇",
        "s5_continue": "Continue to the next section below to begin your ethical AI journey.",
        "btn_review": "◀️ Review the Investigation"
    },
    "es": {
        "title": "🚀 La Revelación Ética: Impacto Real",
        "loading_personal": "⏳ Cargando tu experiencia personalizada...",
        "stats_title": "🏆 ¡Gran Trabajo, Ingeniero! 🏆",
        "stats_subtitle": "Aquí está tu resumen de rendimiento.",
        "stats_heading": "Tus Estadísticas",
        "lbl_accuracy": "Mejor Precisión",
        "lbl_rank": "Tu Rango",
        "lbl_team": "Equipo",
        "stats_footer": "¿Listo para compartir tu modelo y explorar su impacto en el mundo real?",
        "btn_deploy": "🌍 Compartir tu Modelo de IA (Simulación)",
        "guest_title": "🚀 ¡Has Iniciado Sesión!",
        "guest_subtitle": "Aún no has enviado un modelo, pero estás listo para seguir aprendiendo.",
        "guest_body": "Una vez que envíes un modelo en el Juego de Construcción de Modelos, tu precisión y clasificación aparecerán aquí.",
        "guest_footer": "Continúa a la siguiente sección cuando estés listo.",
        "loading_session": "🔒 Cargando tu sesión...",
        "s2_title": "⚠️ Pero Espera...",
        "s2_intro": "Antes de compartir el modelo, hay algo que necesitas saber...",
        "s2_box_title": "Una Historia del Mundo Real",
        "s2_p1": "Un modelo similar al tuyo se utilizó realmente en el mundo real. Fue usado por jueces en todo Estados Unidos para ayudar a tomar decisiones sobre el futuro de los acusados.",
        "s2_p2": "Como el tuyo, tenía puntuaciones de precisión impresionantes. Como el tuyo, se construyó con datos de casos criminales pasados. Como el tuyo, su objetivo era predecir quién reincidiría.",
        "s2_p3": "Pero algo estaba terriblemente mal...",
        "btn_back": "◀️ Atrás",
        "btn_reveal": "Revelar la Verdad ▶️",
        "s3_title": "📰 La Investigación de ProPublica",
        "s3_head": "\"Sesgo de Máquina\" - Una Investigación Histórica",
        "s3_p1": "En 2016, periodistas de <strong>ProPublica</strong> investigaron un algoritmo de evaluación de riesgo criminal ampliamente utilizado llamado <strong>COMPAS</strong>. Analizaron más de <strong>7,000 casos reales</strong> para ver si las predicciones de la IA se cumplían.",
        "s3_box_title": "Sus Hallazgos Impactantes:",
        "s3_alert": "⚠️ Los acusados negros fueron etiquetados como \"alto riesgo\" casi el <u>DOBLE</u> que los acusados blancos.",
        "s3_spec": "<strong>Específicamente:</strong>",
        "s3_li1_pre": "Los <span class='emph-danger'>acusados negros</span> que <em>NO reincidieron</em> fueron etiquetados incorrectamente como <strong>\"alto riesgo\"</strong> a una tasa del",
        "s3_li2_pre": "Los <strong>acusados blancos</strong> que <em>NO reincidieron</em> fueron etiquetados incorrectamente como <strong>\"alto riesgo\"</strong> a una tasa de solo el <strong>24%</strong>",
        "s3_li3": "Mientras tanto, los <strong>acusados blancos</strong> que <em>SÍ reincidieron</em> tenían <strong>más probabilidades de ser etiquetados como \"bajo riesgo\"</strong> en comparación con los acusados negros",
        "s3_box2_title": "¿Qué Significa Esto?",
        "s3_mean_p1": "El sistema de IA estaba <strong class='emph-danger'>sistemáticamente sesgado</strong>. No solo cometía errores aleatorios, cometía <strong>diferentes tipos de errores para diferentes grupos de personas</strong>.",
        "s3_mean_p2": "Los acusados negros enfrentaban un riesgo mucho mayor de ser <strong class='emph-danger'>injustamente etiquetados como peligrosos</strong>, lo que potencialmente conducía a sentencias de prisión más largas o libertad condicional denegada, incluso cuando no habrían reincidido.",
        "btn_eu": "Ver Esto en Europa ▶️",
        "lbl_black": "Negros",
        "s4eu_title": "🇪🇺 Esto No Es Solo un Problema de EE. UU.",
        "s4eu_head": "La IA para \"Delincuentes de Riesgo\" Ya Está en Europa",
        "s4eu_intro": "La historia de COMPAS no es solo una advertencia estadounidense. En toda Europa, las autoridades públicas han experimentado con <strong>herramientas muy similares</strong> que pretenden predecir quién reincidirá o qué áreas son de \"alto riesgo\".",
        "s4eu_li1_title": "Reino Unido – HART (Harm Assessment Risk Tool)",
        "s4eu_li1_body": "Un modelo de aprendizaje automático utilizado por la Policía de Durham para predecir quién reincidirá en dos años. Utiliza variables como edad, género, <em>código postal</em>, vivienda e inestabilidad laboral: indicadores socioeconómicos que pueden reproducir los mismos tipos de patrones sesgados expuestos en COMPAS.",
        "s4eu_li2_title": "España – VioGén",
        "s4eu_li2_body": "Una herramienta de riesgo para casos de violencia de género cuyo funcionamiento interno es en gran medida una <em>\"caja negra\"</em>. Los oficiales dependen en gran medida de sus puntuaciones para decidir medidas de protección, aunque el algoritmo no puede ser auditado fácilmente en busca de sesgos o errores.",
        "s4eu_li3_title": "Países Bajos y Dinamarca – Perfiles predictivos",
        "s4eu_li3_body": "Sistemas como el <em>Sistema de Anticipación del Crimen (CAS)</em> holandés y las clasificaciones algorítmicas de <em>\"guetos\"</em> de Dinamarca utilizan datos demográficos y socioeconómicos para dirigir la vigilancia y las sanciones, arriesgando bucles de retroalimentación que apuntan a ciertas comunidades una y otra vez.",
        "s4eu_box_title": "Debate Europeo en Curso",
        "s4eu_box_body": "La Fiscalía de Barcelona ha propuesto una \"calculadora electrónica de reincidencia\". Tribunales, reguladores e investigadores están examinando activamente cómo estas herramientas afectan los derechos fundamentales como la no discriminación, el juicio justo y la protección de datos.",
        "s4eu_note": "<strong>Punto clave:</strong> Los riesgos que viste con COMPAS no están lejos en otro país. <strong class='emph-key'>Son preguntas vivas tanto en Europa como en los EE. UU. en este momento.</strong>",
        "btn_back_invest": "◀️ Volver a la Investigación",
        "btn_zoom": "Alejarse a la Lección ▶️",
        "s4_title": "💡 La Lección Crítica",
        "s4_box_title": "Por Qué Importa Esto:",
        "s4_li1_title": "La precisión general puede ocultar daños específicos a grupos",
        "s4_li1_body": "Un modelo puede tener un 70% de precisión general, pero el 30% restante de errores puede recaer desproporcionadamente en <span class='emph-harm'>grupos específicos</span>, resultando en un daño real incluso cuando la precisión total parece \"buena\".",
        "s4_li2_title": "El sesgo histórico en los datos de entrenamiento se amplifica",
        "s4_li2_body": "Si las decisiones policiales o judiciales pasadas fueron sesgadas, el sistema de IA <span class='emph-harm'>aprenderá y reforzará</span> esas desigualdades, a menudo empeorándolas a escala.",
        "s4_li3_title": "Las vidas de personas reales se ven afectadas",
        "s4_li3_body": "Cada <strong class='emph-harm'>\"falso positivo\"</strong> representa a una persona que puede perder años de libertad, empleo, vivienda o conexión familiar, todo debido a una sola <strong class='emph-harm'>predicción sesgada</strong>.",
        "btn_back_eu": "◀️ Atrás",
        "btn_what_do": "¿Qué Podemos Hacer? ▶️",
        "s5_title": "🛤️ El Camino a Seguir",
        "s5_head": "De la Precisión a la Ética",
        "s5_intro": "Ahora has visto ambos lados de la historia de la IA:",
        "s5_li1": "✅ Construiste modelos que lograron puntuaciones de precisión más altas",
        "s5_li2": "⚠️ Aprendiste cómo modelos similares causaron daño en el mundo real",
        "s5_li3": "🤔 Entiendes que la precisión por sí sola no es suficiente",
        "s5_box_title": "Lo Que Harás A Continuación:",
        "s5_p1": "En la siguiente sección, se te presentará una <strong class='emph-key'>nueva forma de medir el éxito</strong>, una que equilibra el rendimiento con la equidad y la ética.",
        "s5_p2": "Aprenderás técnicas para <strong class='emph-key'>detectar sesgos</strong> en tus modelos, <strong class='emph-key'>medir la equidad</strong> en diferentes grupos y <strong class='emph-key'>rediseñar tu IA</strong> para minimizar el daño.",
        "s5_mission": "🎯 Tu nueva misión: Construir IA que no solo sea precisa, sino también <strong class='emph-key'>justa, equitativa y éticamente sólida</strong>.",
        "s5_scroll": "👇 DESPLÁZATE HACIA ABAJO 👇",
        "s5_continue": "Continúa en la siguiente sección abajo para comenzar tu viaje de IA ética.",
        "btn_review": "◀️ Revisar la Investigación"
    },
    "ca": {
        "title": "🚀 La Revelació Ètica: Impacte Real",
        "loading_personal": "⏳ Carregant la teva experiència personalitzada...",
        "stats_title": "🏆 Bona Feina, Enginyer! 🏆",
        "stats_subtitle": "Aquí tens el teu resum de rendiment.",
        "stats_heading": "Les Teves Estadístiques",
        "lbl_accuracy": "Millor Precisió",
        "lbl_rank": "El Teu Rang",
        "lbl_team": "Equip",
        "stats_footer": "A punt per compartir el teu model i explorar el seu impacte al món real?",
        "btn_deploy": "🌍 Compartir el Teu Model d'IA (Simulació)",
        "guest_title": "🚀 Has Iniciat Sessió!",
        "guest_subtitle": "Encara no has enviat un model, però estàs a punt per continuar aprenent.",
        "guest_body": "Un cop enviïs un model al Joc de Construcció de Models, la teva precisió i classificació apareixeran aquí.",
        "guest_footer": "Continua a la següent secció quan estiguis a punt.",
        "loading_session": "🔒 Carregant la teva sessió...",
        "s2_title": "⚠️ Però Espera...",
        "s2_intro": "Abans de compartir el model, hi ha una cosa que necessites saber...",
        "s2_box_title": "Una Història del Món Real",
        "s2_p1": "Un model similar al teu es va utilitzar realment al món real. Va ser utilitzat per jutges a tot Estats Units per ajudar a prendre decisions sobre el futur dels acusats.",
        "s2_p2": "Com el teu, tenia puntuacions de precisió impressionants. Com el teu, es va construir amb dades de casos criminals passats. Com el teu, el seu objectiu era predir qui reincidiria.",
        "s2_p3": "Però alguna cosa estava terriblement malament...",
        "btn_back": "◀️ Enrere",
        "btn_reveal": "Revelar la Veritat ▶️",
        "s3_title": "📰 La Investigació de ProPublica",
        "s3_head": "\"Biaix de Màquina\" - Una Investigació Històrica",
        "s3_p1": "El 2016, periodistes de <strong>ProPublica</strong> van investigar un algorisme d'avaluació de risc criminal àmpliament utilitzat anomenat <strong>COMPAS</strong>. Van analitzar més de <strong>7.000 casos reals</strong> per veure si les prediccions de la IA es complien.",
        "s3_box_title": "Les Seves Troballes Impactants:",
        "s3_alert": "⚠️ Els acusats negres van ser etiquetats com a \"alt risc\" gairebé el <u>DOBLE</u> que els acusats blancs.",
        "s3_spec": "<strong>Específicament:</strong>",
        "s3_li1_pre": "Els <span class='emph-danger'>acusats negres</span> que <em>NO van reincidir</em> van ser etiquetats incorrectament com a <strong>\"alt risc\"</strong> a una taxa del",
        "s3_li2_pre": "Els <strong>acusats blancs</strong> que <em>NO van reincidir</em> van ser etiquetats incorrectament com a <strong>\"alt risc\"</strong> a una taxa de només el <strong>24%</strong>",
        "s3_li3": "Mentrestant, els <strong>acusats blancs</strong> que <em>SÍ van reincidir</em> tenien <strong>més probabilitats de ser etiquetats com a \"baix risc\"</strong> en comparació amb els acusats negres",
        "s3_box2_title": "Què Significa Això?",
        "s3_mean_p1": "El sistema d'IA estava <strong class='emph-danger'>sistemàticament esbiaixat</strong>. No només cometia errors aleatoris, cometia <strong>diferents tipus d'errors per a diferents grups de persones</strong>.",
        "s3_mean_p2": "Els acusats negres s'enfrontaven a un risc molt més gran de ser <strong class='emph-danger'>injustament etiquetats com a perillosos</strong>, la qual cosa potencialment conduïa a sentències de presó més llargues o llibertat condicional denegada, fins i tot quan no haurien reincidit.",
        "btn_eu": "Veure Això a Europa ▶️",
        "lbl_black": "Negres",
        "s4eu_title": "🇪🇺 Això No És Només un Problema dels EUA",
        "s4eu_head": "La IA per a \"Delinqüents de Risc\" Ja És a Europa",
        "s4eu_intro": "La història de COMPAS no és només una advertència nord-americana. A tota Europa, les autoritats públiques han experimentat amb <strong>eines molt similars</strong> que pretenen predir qui reincidirà o quines àrees són d'\"alt risc\".",
        "s4eu_li1_title": "Regne Unit – HART (Harm Assessment Risk Tool)",
        "s4eu_li1_body": "Un model d'aprenentatge automàtic utilitzat per la Policia de Durham per predir qui reincidirà en dos anys. Utilitza variables com edat, gènere, <em>codi postal</em>, habitatge i inestabilitat laboral: indicadors socioeconòmics que poden reproduir els mateixos tipus de patrons esbiaixats exposats a COMPAS.",
        "s4eu_li2_title": "Espanya – VioGén",
        "s4eu_li2_body": "Una eina de risc per a casos de violència de gènere el funcionament intern de la qual és en gran part una <em>\"caixa negra\"</em>. Els oficials depenen en gran mesura de les seves puntuacions per decidir mesures de protecció, tot i que l'algorisme no pot ser auditat fàcilment a la recerca de biaixos o errors.",
        "s4eu_li3_title": "Països Baixos i Dinamarca – Perfils predictius",
        "s4eu_li3_body": "Sistemes com el <em>Sistema d'Anticipació del Crim (CAS)</em> holandès i les classificacions algorísmiques de <em>\"guetos\"</em> de Dinamarca utilitzen dades demogràfiques i socioeconòmiques per dirigir la vigilància i les sancions, arriscant bucles de retroalimentació que apunten a certes comunitats una i altra vegada.",
        "s4eu_box_title": "Debat Europeu en Curs",
        "s4eu_box_body": "La Fiscalia de Barcelona ha proposat una \"calculadora electrònica de reincidència\". Tribunals, reguladors i investigadors estan examinant activament com aquestes eines afecten els drets fonamentals com la no discriminació, el judici just i la protecció de dades.",
        "s4eu_note": "<strong>Punt clau:</strong> Els riscos que vas veure amb COMPAS no són lluny en un altre país. <strong class='emph-key'>Són preguntes vives tant a Europa com als EUA en aquest moment.</strong>",
        "btn_back_invest": "◀️ Tornar a la Investigació",
        "btn_zoom": "Allunyar-se a la Lliçó ▶️",
        "s4_title": "💡 La Lliçó Crítica",
        "s4_box_title": "Per Què Importa Això:",
        "s4_li1_title": "La precisió general pot amagar danys específics a grups",
        "s4_li1_body": "Un model pot tenir un 70% de precisió general, però el 30% restant d'errors pot recaure desproporcionadament en <span class='emph-harm'>grups específics</span>, resultant en un dany real fins i tot quan la precisió total sembla \"bona\".",
        "s4_li2_title": "El biaix històric en les dades d'entrenament s'amplifica",
        "s4_li2_body": "Si les decisions policials o judicials passades van ser esbiaixades, el sistema d'IA <span class='emph-harm'>aprendrà i reforçarà</span> aquestes desigualtats, sovint empitjorant-les a escala.",
        "s4_li3_title": "Les vides de persones reals es veuen afectades",
        "s4_li3_body": "Cada <strong class='emph-harm'>\"fals positiu\"</strong> representa una persona que pot perdre anys de llibertat, feina, habitatge o connexió familiar, tot a causa d'una sola <strong class='emph-harm'>predicció esbiaixada</strong>.",
        "btn_back_eu": "◀️ Enrere",
        "btn_what_do": "Què Podem Fer? ▶️",
        "s5_title": "🛤️ El Camí a Seguir",
        "s5_head": "De la Precisió a l'Ètica",
        "s5_intro": "Ara has vist els dos costats de la història de la IA:",
        "s5_li1": "✅ Vas construir models que van aconseguir puntuacions de precisió més altes",
        "s5_li2": "⚠️ Vas aprendre com models similars van causar dany al món real",
        "s5_li3": "🤔 Entens que la precisió per si sola no és suficient",
        "s5_box_title": "El Que Faràs A Continuació:",
        "s5_p1": "En la següent secció, se't presentarà una <strong class='emph-key'>nova manera de mesurar l'èxit</strong>, una que equilibra el rendiment amb l'equitat i l'ètica.",
        "s5_p2": "Aprendràs tècniques per <strong class='emph-key'>detectar biaixos</strong> en els teus models, <strong class='emph-key'>mesurar l'equitat</strong> en diferents grups i <strong class='emph-key'>redissenyar la teva IA</strong> per minimitzar el dany.",
        "s5_mission": "🎯 La teva nova missió: Construir IA que no només sigui precisa, sinó també <strong class='emph-key'>justa, equitativa i èticament sòlida</strong>.",
        "s5_scroll": "👇 DESPLAÇA'T CAP AVALL 👇",
        "s5_continue": "Continua a la següent secció a sota per començar el teu viatge d'IA ètica.",
        "btn_review": "◀️ Revisar la Investigació"
    }
}

# ---------------------------------------------------------------------------
# Logic / Helpers
# ---------------------------------------------------------------------------

def _log(msg: str):
    if DEBUG_LOG:
        print(f"[MoralCompassApp] {msg}")

def _normalize_team_name(name: str) -> str:
    if not name:
        return ""
    return " ".join(str(name).strip().split())

def _fetch_leaderboard(token: str) -> Optional[pd.DataFrame]:
    now = time.time()
    with _cache_lock:
        if (
            _leaderboard_cache["data"] is not None
            and now - _leaderboard_cache["timestamp"] < LEADERBOARD_CACHE_SECONDS
        ):
            return _leaderboard_cache["data"]

    try:
        playground_id = "https://cf3wdpkg0d.execute-api.us-east-1.amazonaws.com/prod/m"
        playground = Competition(playground_id)
        df = playground.get_leaderboard(token=token)
        if df is not None and not df.empty and MAX_LEADERBOARD_ENTRIES:
            df = df.head(MAX_LEADERBOARD_ENTRIES)
    except Exception as e:
        _log(f"Leaderboard fetch failed: {e}")
        df = None

    with _cache_lock:
        _leaderboard_cache["data"] = df
        _leaderboard_cache["timestamp"] = time.time()
    return df

def _get_or_assign_team(username: str, leaderboard_df: Optional[pd.DataFrame]) -> Tuple[str, bool]:
    try:
        if leaderboard_df is not None and not leaderboard_df.empty and "Team" in leaderboard_df.columns:
            user_submissions = leaderboard_df[leaderboard_df["username"] == username]
            if not user_submissions.empty:
                if "timestamp" in user_submissions.columns:
                    try:
                        user_submissions = user_submissions.copy()
                        user_submissions["timestamp"] = pd.to_datetime(
                            user_submissions["timestamp"], errors="coerce"
                        )
                        user_submissions = user_submissions.sort_values("timestamp", ascending=False)
                    except Exception as ts_err:
                        _log(f"Timestamp sort error: {ts_err}")
                existing_team = user_submissions.iloc[0]["Team"]
                if pd.notna(existing_team) and str(existing_team).strip():
                    return _normalize_team_name(existing_team), False
        return _normalize_team_name(random.choice(TEAM_NAMES)), True
    except Exception as e:
        _log(f"Team assignment error: {e}")
        return _normalize_team_name(random.choice(TEAM_NAMES)), True

def _try_session_based_auth(request: "gr.Request") -> Tuple[bool, Optional[str], Optional[str]]:
    try:
        session_id = request.query_params.get("sessionid") if request else None
        if not session_id:
            return False, None, None
        token = get_token_from_session(session_id)
        if not token:
            return False, None, None
        username = _get_username_from_token(token)
        if not username:
            return False, None, None
        return True, username, token
    except Exception as e:
        _log(f"Session auth failed: {e}")
        return False, None, None

def _compute_user_stats(username: str, token: str) -> Dict[str, Any]:
    now = time.time()
    cached = _user_stats_cache.get(username)
    if cached and (now - cached.get("_ts", 0) < USER_STATS_TTL):
        return cached

    leaderboard_df = _fetch_leaderboard(token)
    team_name, _ = _get_or_assign_team(username, leaderboard_df)
    best_score = None
    rank = None
    team_rank = None

    try:
        if leaderboard_df is not None and not leaderboard_df.empty:
            if "accuracy" in leaderboard_df.columns and "username" in leaderboard_df.columns:
                user_submissions = leaderboard_df[leaderboard_df["username"] == username]
                if not user_submissions.empty:
                    best_score = user_submissions["accuracy"].max()

                # Individual rank
                user_bests = leaderboard_df.groupby("username")["accuracy"].max()
                summary_df = user_bests.reset_index()
                summary_df.columns = ["Engineer", "Best_Score"]
                summary_df = summary_df.sort_values("Best_Score", ascending=False).reset_index(drop=True)
                summary_df.index = summary_df.index + 1
                my_row = summary_df[summary_df["Engineer"] == username]
                if not my_row.empty:
                    rank = my_row.index[0]

                # Team rank
                if "Team" in leaderboard_df.columns and team_name:
                    team_summary_df = (
                        leaderboard_df.groupby("Team")["accuracy"]
                        .agg(Best_Score="max")
                        .reset_index()
                        .sort_values("Best_Score", ascending=False)
                        .reset_index(drop=True)
                    )
                    team_summary_df.index = team_summary_df.index + 1
                    my_team_row = team_summary_df[team_summary_df["Team"] == team_name]
                    if not my_team_row.empty:
                        team_rank = my_team_row.index[0]
    except Exception as e:
        _log(f"User stats error for {username}: {e}")

    stats = {
        "username": username,
        "best_score": best_score,
        "rank": rank,
        "team_name": team_name,
        "team_rank": team_rank,
        "is_signed_in": True,
        "_ts": now
    }
    _user_stats_cache[username] = stats
    return stats

# ---------------------------------------------------------------------------
# HTML Helpers (I18N)
# ---------------------------------------------------------------------------

def t(lang, key):
    return TRANSLATIONS.get(lang, TRANSLATIONS["en"]).get(key, key)

def build_stats_html(user_stats: Dict[str, Any], lang="en") -> str:
    if user_stats.get("best_score") is not None:
        best_score_pct = f"{(user_stats['best_score'] * 100):.1f}%"
        rank_text = f"#{user_stats['rank']}" if user_stats['rank'] else "N/A"
        team_text = user_stats['team_name'] if user_stats['team_name'] else "N/A"
        return f"""
        <div class='slide-shell slide-shell--primary'>
            <div style='text-align:center;'>
                <h2 class='slide-shell__title'>
                    {t(lang, 'stats_title')}
                </h2>
                <p class='slide-shell__subtitle'>
                    {t(lang, 'stats_subtitle')}
                </p>

                <div class='content-box'>
                    <h3 class='content-box__heading'>{t(lang, 'stats_heading')}</h3>

                    <div class='stat-grid'>
                        <div class='stat-card'>
                            <p class='stat-card__label'>{t(lang, 'lbl_accuracy')}</p>
                            <p class='stat-card__value'>
                                {best_score_pct}
                            </p>
                        </div>

                        <div class='stat-card'>
                            <p class='stat-card__label'>{t(lang, 'lbl_rank')}</p>
                            <p class='stat-card__value'>
                                {rank_text}
                            </p>
                        </div>
                    </div>

                    <div class='team-card'>
                        <p class='team-card__label'>{t(lang, 'lbl_team')}</p>
                        <p class='team-card__value'>
                            🛡️ {team_text}
                        </p>
                    </div>
                </div>

                <p class='slide-shell__subtitle' style='font-weight:500;'>
                    {t(lang, 'stats_footer')}
                </p>
            </div>
        </div>
        """
    else:
        # Authenticated but no submission
        return f"""
        <div class='slide-shell slide-shell--primary'>
            <div style='text-align:center;'>
                <h2 class='slide-shell__title'>
                    {t(lang, 'guest_title')}
                </h2>
                <p class='slide-shell__subtitle'>
                    {t(lang, 'guest_subtitle')}
                </p>

                <div class='content-box'>
                    <p style='margin:0;'>
                        {t(lang, 'guest_body')}
                    </p>
                </div>

                <p class='slide-shell__subtitle' style='font-weight:500;'>
                    {t(lang, 'guest_footer')}
                </p>
            </div>
        </div>
        """

def _get_step2_html(lang):
    return f"""
    <div class='slide-shell slide-shell--warning'>
        <p class='large-text' style='text-align:center; font-weight:600; margin:0;'>
            {t(lang, 's2_intro')}
        </p>

        <div class='content-box'>
            <h3 class='content-box__heading'>{t(lang, 's2_box_title')}</h3>
            <p class='slide-warning-body'>
                {t(lang, 's2_p1')}
            </p>
            <p class='slide-warning-body' style='margin-top:16px;'>
                {t(lang, 's2_p2')}
            </p>
            <p class='slide-warning-body' style='margin-top:16px; font-weight:600;'>
                {t(lang, 's2_p3')}
            </p>
        </div>
    </div>
    """

def _get_step3_html(lang):
    return f"""
    <div class='revelation-box'>
        <h3 style='margin-top:0; font-size:1.8rem;'>
            {t(lang, 's3_head')}
        </h3>
        <p style='font-size:1.1rem; line-height:1.6;'>
            {t(lang, 's3_p1')}
        </p>
        <div class='content-box content-box--emphasis'>
            <h4 class='content-box__heading'>{t(lang, 's3_box_title')}</h4>
            <div class='bg-danger-soft' style='margin:20px 0;'>
                <p class='emph-danger' style='font-size:1.15rem; margin:0;'>
                    {t(lang, 's3_alert')}
                </p>
            </div>
            <p style='font-size:1.05rem; margin-top:20px;'>
                {t(lang, 's3_spec')}
            </p>
            <ul style='font-size:1.05rem; line-height:1.8;'>
                <li>
                    {t(lang, 's3_li1_pre')}
                    <span class='emph-danger'> 45%</span>
                </li>
                <li>
                    {t(lang, 's3_li2_pre')}
                </li>
                <li style='margin-top:12px;'>
                    {t(lang, 's3_li3')}
                </li>
            </ul>
        </div>

        <div class='content-box content-box--emphasis'>
            <h4 class='content-box__heading'>{t(lang, 's3_box2_title')}</h4>
            <p style='font-size:1.05rem; margin:0; line-height:1.6;'>
                {t(lang, 's3_mean_p1')}
            </p>
            <p style='font-size:1.05rem; margin-top:12px; line-height:1.6;'>
                {t(lang, 's3_mean_p2')}
            </p>
        </div>
    </div>
    """

def _get_step4_eu_html(lang):
    return f"""
    <div class='eu-panel'>
        <h3 class='emph-eu' style='font-size:1.9rem; text-align:center;'>
            {t(lang, 's4eu_head')}
        </h3>
        <p style='line-height:1.8;'>
            {t(lang, 's4eu_intro')}
        </p>
        <ul style='line-height:1.9; font-size:1.05rem; margin:20px 0;'>
            <li>
                <strong class='emph-eu'>{t(lang, 's4eu_li1_title')}</strong><br>
                {t(lang, 's4eu_li1_body')}
            </li>
            <li style='margin-top:14px;'>
                <strong class='emph-eu'>{t(lang, 's4eu_li2_title')}</strong><br>
                {t(lang, 's4eu_li2_body')}
            </li>
            <li style='margin-top:14px;'>
                <strong class='emph-eu'>{t(lang, 's4eu_li3_title')}</strong><br>
                {t(lang, 's4eu_li3_body')}
            </li>
        </ul>
        <div class='bg-eu-soft eu-panel__highlight'>
            <h4 class='emph-eu'>{t(lang, 's4eu_box_title')}</h4>
            <p style='margin:0; line-height:1.7; font-size:1.05rem;'>
                {t(lang, 's4eu_box_body')}
            </p>
        </div>
        <div class='eu-panel__note'>
            <p style='margin:0; line-height:1.8; font-size:1.1rem;'>
                {t(lang, 's4eu_note')}
            </p>
        </div>
    </div>
    """

def _get_step4_lesson_html(lang):
    return f"""
    <div class='content-box'>
        <h4 class='content-box__heading emph-key' style='font-size:1.5rem;'>
            {t(lang, 's4_box_title')}
        </h4>
        <div class='lesson-emphasis-box'>
            <span class='lesson-item-title'>
                <span class='lesson-badge'>1</span>
                {t(lang, 's4_li1_title')}
            </span>
            <p class='slide-teaching-body'>
                {t(lang, 's4_li1_body')}
            </p>
        </div>
        <div class='lesson-emphasis-box'>
            <span class='lesson-item-title'>
                <span class='lesson-badge'>2</span>
                {t(lang, 's4_li2_title')}
            </span>
            <p class='slide-teaching-body'>
                {t(lang, 's4_li2_body')}
            </p>
        </div>
        <div class='lesson-emphasis-box'>
            <span class='lesson-item-title'>
                <span class='lesson-badge'>3</span>
                {t(lang, 's4_li3_title')}
            </span>
            <p class='slide-teaching-body'>
                {t(lang, 's4_li3_body')}
            </p>
        </div>
    </div>
    """

def _get_step5_html(lang):
    return f"""
    <div style='text-align:center;'>
        <div class='slide-shell slide-shell--info'>
            <h3 class='slide-shell__title'>
                {t(lang, 's5_head')}
            </h3>
            <p style='line-height:1.8; text-align:left;'>
                {t(lang, 's5_intro')}
            </p>
            <ul style='text-align:left; line-height:2; font-size:1.1rem; margin:24px 0;'>
                <li>{t(lang, 's5_li1')}</li>
                <li>{t(lang, 's5_li2')}</li>
                <li>{t(lang, 's5_li3')}</li>
            </ul>
            <div class='content-box'>
                <h4 class='content-box__heading'>{t(lang, 's5_box_title')}</h4>
                <p style='font-size:1.1rem; line-height:1.8;'>
                    {t(lang, 's5_p1')}
                </p>
                <p style='font-size:1.1rem; line-height:1.8; margin-top:16px;'>
                    {t(lang, 's5_p2')}
                </p>
            </div>
            <div class='content-box content-box--emphasis'>
                <p style='font-size:1.15rem; font-weight:600; margin:0;'>
                    {t(lang, 's5_mission')}
                </p>
            </div>
            <h1 style='margin:32px 0 16px 0; font-size: 3rem;'>{t(lang, 's5_scroll')}</h1>
            <p style='font-size:1.2rem;'>{t(lang, 's5_continue')}</p>
        </div>
    </div>
    """

# ---------------------------------------------------------------------------
# CSS
# ---------------------------------------------------------------------------
CSS = """
.large-text { font-size: 20px !important; }
.slide-shell, .celebration-box {
  padding:24px; border-radius:16px;
  background-color: var(--block-background-fill);
  color: var(--body-text-color);
  border:2px solid var(--border-color-primary);
  max-width:900px; margin:auto;
}
.slide-shell--primary, .slide-shell--warning, .slide-shell--info { border-color: var(--color-accent); }
.slide-shell__title { font-size:2.3rem; margin:0; text-align:center; }
.slide-shell__subtitle { font-size:1.2rem; margin-top:16px; text-align:center; color: var(--secondary-text-color); }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.stat-card, .team-card { text-align:center; padding:16px; border-radius:8px; border:1px solid var(--border-color-primary); background-color: var(--block-background-fill); }
.stat-card__label, .team-card__label { margin:0; font-size:0.9rem; color: var(--secondary-text-color); }
.stat-card__value { margin:4px 0 0 0; font-size:1.8rem; font-weight:700; }
.team-card__value { margin:4px 0 0 0; font-size:1.3rem; font-weight:600; }
.content-box { background-color: var(--block-background-fill); border-radius:12px; border:1px solid var(--border-color-primary); padding:24px; margin:24px 0; }
.content-box--emphasis { border-left:6px solid var(--color-accent); }
.revelation-box { background-color: var(--block-background-fill); border-left:6px solid var(--color-accent); border-radius:8px; padding:24px; margin-top:24px; }
.eu-panel { font-size:20px; padding:32px; border-radius:16px; border:3px solid var(--border-color-primary); background-color: var(--block-background-fill); max-width:900px; margin:auto; }
.bg-danger-soft { background-color:#fee2e2; border-left:6px solid #dc2626; padding:16px; border-radius:8px; }
.emph-danger { color:#b91c1c; font-weight:700; }
.emph-key { color: var(--color-accent); font-weight:700; }
.lesson-emphasis-box { background-color: var(--block-background-fill); border-left:6px solid var(--color-accent); padding:18px 20px; border-radius:10px; margin-top:1.5rem; }
.lesson-item-title { font-size:1.35em; font-weight:700; margin-bottom:0.25rem; display:block; }
.lesson-badge { display:inline-block; background-color: var(--color-accent); color: var(--button-text-color); padding:6px 12px; border-radius:10px; font-weight:700; margin-right:10px; font-size:0.9em; }
.slide-warning-body, .slide-teaching-body { font-size:1.25em; line-height:1.75; }
#nav-loading-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color: var(--body-background-fill); z-index:9999; display:none; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.nav-spinner { width:50px; height:50px; border:5px solid var(--block-background-fill); border-top:5px solid var(--color-accent); border-radius:50%; animation: nav-spin 1s linear infinite; margin-bottom:20px; }
@keyframes nav-spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
/* EU Panel Highlighting */
.bg-eu-soft { background-color: color-mix(in srgb, var(--color-accent) 15%, transparent); border-radius: 8px; padding: 16px; margin: 20px 0; }
.emph-eu { color: var(--color-accent); font-weight: 700; }
.emph-harm { color: #b91c1c; font-weight: 700; }
@media (prefers-color-scheme: dark) {
    .bg-danger-soft { background-color: #450a0a; border-color: #dc2626; }
    .emph-danger { color: #f87171; }
    .emph-harm { color: #f87171; }
}
"""

# ---------------------------------------------------------------------------
# App
# ---------------------------------------------------------------------------
def create_ethical_revelation_app(theme_primary_hue: str = "indigo") -> "gr.Blocks":
    with gr.Blocks(theme=gr.themes.Soft(primary_hue=theme_primary_hue), css=CSS) as demo:
        gr.HTML("<div id='app_top_anchor' style='height:0;'></div>")
        gr.HTML("""
            <div id='nav-loading-overlay'>
                <div class='nav-spinner'></div>
                <span id='nav-loading-text'>Loading...</span>
            </div>
        """)
        
        # Components needing dynamic updates
        c_title = gr.Markdown("<h1 style='text-align:center;'>🚀 The Ethical Revelation: Real-World Impact</h1>")

        # Loading placeholder
        with gr.Column(visible=True, elem_id="initial-loading") as initial_loading:
            c_loading_text = gr.Markdown("<div style='text-align:center; padding:80px 0;'><h2>⏳ Loading...</h2></div>")

        # Steps
        with gr.Column(visible=False, elem_id="step-1") as step_1:
            stats_display = gr.HTML() # Content built dynamically
            deploy_button = gr.Button(t('en', 'btn_deploy'), variant="primary", size="lg", scale=1)

        with gr.Column(visible=False, elem_id="step-2") as step_2:
            c_s2_title = gr.Markdown(f"<h2 style='text-align:center;'>{t('en', 's2_title')}</h2>")
            c_s2_html = gr.HTML(_get_step2_html("en"))
            with gr.Row():
                step_2_back = gr.Button(t('en', 'btn_back'), size="lg")
                step_2_next = gr.Button(t('en', 'btn_reveal'), variant="primary", size="lg")

        with gr.Column(visible=False, elem_id="step-3") as step_3:
            c_s3_title = gr.Markdown(f"<h2 style='text-align:center;'>{t('en', 's3_title')}</h2>")
            c_s3_html = gr.HTML(_get_step3_html("en"))
            with gr.Row():
                step_3_back = gr.Button(t('en', 'btn_back'), size="lg")
                step_3_next = gr.Button(t('en', 'btn_eu'), variant="primary", size="lg")

        with gr.Column(visible=False, elem_id="step-4-eu") as step_4_eu:
            c_s4eu_title = gr.Markdown(f"<h2 style='text-align:center;'>{t('en', 's4eu_title')}</h2>")
            c_s4eu_html = gr.HTML(_get_step4_eu_html("en"))
            with gr.Row():
                step_4_eu_back = gr.Button(t('en', 'btn_back_invest'), size="lg")
                step_4_eu_next = gr.Button(t('en', 'btn_zoom'), variant="primary", size="lg")

        with gr.Column(visible=False, elem_id="step-4") as step_4:
            c_s4_title = gr.Markdown(f"<h2 style='text-align:center;'>{t('en', 's4_title')}</h2>")
            c_s4_html = gr.HTML(_get_step4_lesson_html("en"))
            with gr.Row():
                step_4_back = gr.Button(t('en', 'btn_back_eu'), size="lg")
                step_4_next = gr.Button(t('en', 'btn_what_do'), variant="primary", size="lg")

        with gr.Column(visible=False, elem_id="step-5") as step_5:
            c_s5_title = gr.Markdown(f"<h2 style='text-align:center;'>{t('en', 's5_title')}</h2>")
            c_s5_html = gr.HTML(_get_step5_html("en"))
            back_to_lesson_btn = gr.Button(t('en', 'btn_review'), size="lg")

        loading_screen = gr.Column(visible=False)
        all_steps = [step_1, step_2, step_3, step_4_eu, step_4, step_5, loading_screen, initial_loading]

        # --- Initial Load with Language & Auth ---
        def initial_load(request: gr.Request):
            params = request.query_params
            lang = params.get("lang", "en")
            if lang not in TRANSLATIONS: lang = "en"
            
            # Try auth
            success, username, token = _try_session_based_auth(request)
            
            # Build Stats HTML (Translating inside)
            stats_html = ""
            if success and username:
                stats = _compute_user_stats(username, token)
                stats_html = build_stats_html(stats, lang)
            else:
                stats_html = f"""
                <div class='slide-shell slide-shell--primary' style='text-align:center;'>
                    <h2 class='slide-shell__title'>{t(lang, 'loading_session')}</h2>
                </div>
                """
            
            # Return all UI updates
            return [
                gr.update(visible=False), # initial_loading
                gr.update(visible=True),  # step_1
                gr.update(value=stats_html), # stats_display
                # Title
                f"<h1 style='text-align:center;'>{t(lang, 'title')}</h1>",
                # Loading Text
                f"<div style='text-align:center; padding:80px 0;'><h2>{t(lang, 'loading_personal')}</h2></div>",
                # Step 1 Button
                gr.Button(value=t(lang, 'btn_deploy')),
                # Step 2
                f"<h2 style='text-align:center;'>{t(lang, 's2_title')}</h2>",
                _get_step2_html(lang),
                gr.Button(value=t(lang, 'btn_back')),
                gr.Button(value=t(lang, 'btn_reveal')),
                # Step 3
                f"<h2 style='text-align:center;'>{t(lang, 's3_title')}</h2>",
                _get_step3_html(lang),
                gr.Button(value=t(lang, 'btn_back')),
                gr.Button(value=t(lang, 'btn_eu')),
                # Step 4 EU
                f"<h2 style='text-align:center;'>{t(lang, 's4eu_title')}</h2>",
                _get_step4_eu_html(lang),
                gr.Button(value=t(lang, 'btn_back_invest')),
                gr.Button(value=t(lang, 'btn_zoom')),
                # Step 4 Lesson
                f"<h2 style='text-align:center;'>{t(lang, 's4_title')}</h2>",
                _get_step4_lesson_html(lang),
                gr.Button(value=t(lang, 'btn_back_eu')),
                gr.Button(value=t(lang, 'btn_what_do')),
                # Step 5
                f"<h2 style='text-align:center;'>{t(lang, 's5_title')}</h2>",
                _get_step5_html(lang),
                gr.Button(value=t(lang, 'btn_review'))
            ]

        # Load trigger
        update_targets = [
            initial_loading, step_1, stats_display, c_title, c_loading_text,
            deploy_button,
            c_s2_title, c_s2_html, step_2_back, step_2_next,
            c_s3_title, c_s3_html, step_3_back, step_3_next,
            c_s4eu_title, c_s4eu_html, step_4_eu_back, step_4_eu_next,
            c_s4_title, c_s4_html, step_4_back, step_4_next,
            c_s5_title, c_s5_html, back_to_lesson_btn
        ]
        demo.load(fn=initial_load, inputs=None, outputs=update_targets)

        # --- Navigation Logic ---
        def create_nav_generator(current_step, next_step):
            def navigate():
                updates = {loading_screen: gr.update(visible=True)}
                for s in all_steps:
                    if s != loading_screen: updates[s] = gr.update(visible=False)
                yield updates
                updates = {next_step: gr.update(visible=True)}
                for s in all_steps:
                    if s != next_step: updates[s] = gr.update(visible=False)
                yield updates
            return navigate

        def nav_js(target_id: str, message: str, min_show_ms: int = 900) -> str:
            return f"""
            ()=>{{
              try {{
                const overlay=document.getElementById('nav-loading-overlay');
                const msg=document.getElementById('nav-loading-text');
                if(overlay && msg){{ msg.textContent='{message}'; overlay.style.display='flex'; setTimeout(()=>overlay.style.opacity='1',10); }}
                const start=Date.now();
                setTimeout(()=>{{ window.scrollTo({{top:0, behavior:'smooth'}}); }},40);
                const poll=setInterval(()=>{{
                  const elapsed=Date.now()-start;
                  const target=document.getElementById('{target_id}');
                  const visible=target && target.offsetParent!==null;
                  if((visible && elapsed>={min_show_ms}) || elapsed>6000){{
                    clearInterval(poll);
                    if(overlay){{ overlay.style.opacity='0'; setTimeout(()=>overlay.style.display='none',320); }}
                  }}
                }},100);
              }} catch(e){{}}
            }}
            """

        deploy_button.click(fn=create_nav_generator(step_1, step_2), inputs=None, outputs=all_steps, js=nav_js("step-2", "Sharing model..."))
        step_2_back.click(fn=create_nav_generator(step_2, step_1), inputs=None, outputs=all_steps, js=nav_js("step-1", "Returning..."))
        step_2_next.click(fn=create_nav_generator(step_2, step_3), inputs=None, outputs=all_steps, js=nav_js("step-3", "Loading investigation..."))
        step_3_back.click(fn=create_nav_generator(step_3, step_2), inputs=None, outputs=all_steps, js=nav_js("step-2", "Going back..."))
        step_3_next.click(fn=create_nav_generator(step_3, step_4_eu), inputs=None, outputs=all_steps, js=nav_js("step-4-eu", "Exploring European context..."))
        step_4_eu_back.click(fn=create_nav_generator(step_4_eu, step_3), inputs=None, outputs=all_steps, js=nav_js("step-3", "Reviewing findings..."))
        step_4_eu_next.click(fn=create_nav_generator(step_4_eu, step_4), inputs=None, outputs=all_steps, js=nav_js("step-4", "Zooming out..."))
        step_4_back.click(fn=create_nav_generator(step_4, step_4_eu), inputs=None, outputs=all_steps, js=nav_js("step-4-eu", "European context..."))
        step_4_next.click(fn=create_nav_generator(step_4, step_5), inputs=None, outputs=all_steps, js=nav_js("step-5", "Exploring solutions..."))
        back_to_lesson_btn.click(fn=create_nav_generator(step_5, step_4), inputs=None, outputs=all_steps, js=nav_js("step-4", "Reviewing lesson..."))

    return demo

def launch_ethical_revelation_app(height: int = 1000, share: bool = False, debug: bool = False) -> None:
    demo = create_ethical_revelation_app()
    port = int(os.environ.get("PORT", 8080))
    demo.launch(share=share, inline=True, debug=debug, height=height, server_port=port)

