modules/ui/ui_test_new_version.py

import streamlit as st
from PIL import Image
import base64
from streamlit_player import st_player
import logging

# Configurar logger
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Importaciones necesarias para mantener compatibilidad
try:
    from session_state import initialize_session_state, logout
    from translations import get_translations, get_landing_translations
    from ..auth.auth import authenticate_user
    from ..database.sql_db import store_application_request
except ImportError:
    logger.warning("Algunas importaciones de compatibilidad fallaron")

# ============================================
# FUNCIÓN main() PARA MANTENER COMPATIBILIDAD
# ============================================
def main():
    """
    Función main() de compatibilidad que redirige a la nueva landing
    """
    logger.info("Entrando en main() - Nueva landing page")
    
    # Inicializar estado básico si no existe
    if 'lang_code' not in st.session_state:
        st.session_state.lang_code = 'es'
    
    # Obtener traducciones
    try:
        from translations import get_landing_translations
        landing_t = get_landing_translations(st.session_state.lang_code)
    except:
        # Traducciones por defecto si falla
        landing_t = {
            'login': 'Iniciar Sesión',
            'register': 'Registrarse',
            'select_language': 'Idioma'
        }
    
    # Mostrar la nueva landing
    show_new_landing(st.session_state.lang_code, landing_t)

# ============================================
# FUNCIÓN login_register_page PARA COMPATIBILIDAD
# ============================================
def login_register_page(lang_code, t):
    """
    Función de compatibilidad que redirige a la nueva landing
    """
    # Esta función ahora usa la nueva landing
    show_new_landing(lang_code, t)


def show_new_landing(lang_code, landing_t):
    """
    Nueva landing page optimizada para conversión
    """
    
    # ============================================
    # 1. HEADER CON LOGOS Y SELECTOR IDIOMA
    # ============================================
    show_header(landing_t)
    
    # ============================================
    # 2. HERO SECTION - HEADLINE IMPACTANTE
    # ============================================
    show_hero_section(lang_code)
    
    # ============================================
    # 3. CUADRÍCULA 2x2 PRINCIPAL
    # ============================================
    show_main_grid(lang_code, landing_t)
    
    # ============================================
    # 4. CARRUSEL DE EVENTOS (FULL WIDTH)
    # ============================================
    show_events_carousel()
    
    # ============================================
    # 5. FOOTER
    # ============================================
    show_footer()

# ============================================
# COMPONENTE 1: HEADER CON LOGOS
# ============================================
def show_header(landing_t):
    """Header con logos y selector de idioma"""
    
    # Estilos CSS personalizados
    st.markdown("""
    <style>
    .logo-grid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;
    }
    .logo-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo-caption {
        font-size: 0.7em;
        color: #666;
        margin-top: 2px;
        text-align: center;
    }
    .language-selector {
        min-width: 150px;
    }
    </style>
    """, unsafe_allow_html=True)
    
    # Header en 5 columnas
    col1, col2, col3, col4, col5 = st.columns([1.5, 1.5, 2, 2, 1.5])
    
    with col1:
        # Logo AIdeaText
        st.markdown("""
        <div class="logo-item">
            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/AIdeaText_Logo_vectores.png" 
                 width="80">
            <div class="logo-caption">AIdeaText</div>
        </div>
        """, unsafe_allow_html=True)
        
    with col2:
        # Logo ALPHA
        st.markdown("""
        <div class="logo-item">
            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/ALPHA_Startup%20Badges.png" 
                 width="80">
            <div class="logo-caption">ALPHA Startup</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col3:
        # Logo NVIDIA
        st.markdown("""
        <div class="logo-item">
            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/nvidia/nvidia-inception-program-badge-rgb-for-screen.png" 
                 width="180">
            <div class="logo-caption">NVIDIA Inception Program</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col4:
        # Logo F6S
        st.markdown("""
        <div class="logo-item">
            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/F6/F6S_Top_Company_EdTech_27.png" 
                 width="180">
            <div class="logo-caption">Top EdTech Company</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col5:
        # Selector de idioma
        languages = {'Español': 'es', 'English': 'en', 'Français': 'fr', 'Português': 'pt'}
        
        st.markdown('<div class="language-selector">', unsafe_allow_html=True)
        selected_lang = st.selectbox(
            "🌐",
            list(languages.keys()),
            index=list(languages.values()).index(st.session_state.get('lang_code', 'es')),
            label_visibility="collapsed"
        )
        st.markdown('</div>', unsafe_allow_html=True)
        
        new_lang_code = languages[selected_lang]
        if st.session_state.get('lang_code', 'es') != new_lang_code:
            st.session_state.lang_code = new_lang_code
            st.rerun()

# ============================================
# COMPONENTE 2: HERO SECTION
# ============================================
def show_hero_section(lang_code):
    """Sección hero con headline impactante"""
    
    # Headlines en diferentes idiomas
    headlines = {
        'es': {
            'title': '🚀 Primer sistema de medición de desarrollo cognitivo',
            'subtitle': 'Basado en procesamiento avanzado del lenguaje natural',
            'tagline': 'No evaluamos lo que escribes. Visualizamos cómo piensas.'
        },
        'en': {
            'title': '🚀 First cognitive development measurement system',
            'subtitle': 'Based on advanced natural language processing',
            'tagline': "We don't evaluate what you write. We visualize how you think."
        },
        'fr': {
            'title': '🚀 Premier système de mesure du développement cognitif',
            'subtitle': 'Basé sur le traitement avancé du langage naturel',
            'tagline': "Nous n'évaluons pas ce que vous écrivez. Nous visualisons comment vous pensez."
        },
        'pt': {
            'title': '🚀 Primeiro sistema de medição do desenvolvimento cognitivo',
            'subtitle': 'Baseado em processamento avançado de linguagem natural',
            'tagline': 'Não avaliamos o que você escreve. Visualizamos como você pensa.'
        }
    }
    
    headline = headlines.get(lang_code, headlines['es'])
    
    st.markdown(f"""
    <div style='
        background: linear-gradient(135deg, #1E3A8A 0%, #3730A3 100%);
        padding: 40px 20px;
        border-radius: 15px;
        color: white;
        margin: 20px 0 30px 0;
        text-align: center;
        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2);
    '>
        <h1 style='
            font-size: 2.5em;
            margin-bottom: 15px;
            font-weight: 800;
        '>
            {headline['title']}
        </h1>
        
        <h2 style='
            font-size: 1.3em;
            opacity: 0.95;
            margin-bottom: 20px;
            font-weight: 400;
        '>
            {headline['subtitle']}
        </h2>
        
        <div style='
            display: inline-block;
            background: rgba(255, 255, 255, 0.15);
            padding: 12px 25px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin: 15px 0;
        '>
            <strong>✨ {headline['tagline']}</strong>
        </div>
        
        <div style='
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        '>
            <div style='text-align: center;'>
                <div style='font-size: 2em;'>🏆</div>
                <div><strong>Competimos por</strong></div>
                <div style='font-size: 1.2em;'>$950K USD</div>
            </div>
            
            <div style='text-align: center;'>
                <div style='font-size: 2em;'>🧠</div>
                <div><strong>Tecnología</strong></div>
                <div style='font-size: 1.2em;'>Grafos Semánticos</div>
            </div>
            
            <div style='text-align: center;'>
                <div style='font-size: 2em;'>🚀</div>
                <div><strong>Validado por</strong></div>
                <div style='font-size: 1.2em;'>NVIDIA</div>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

# ============================================
# COMPONENTE 3: CUADRÍCULA 2x2 PRINCIPAL
# ============================================
def show_main_grid(lang_code, landing_t):
    """Cuadrícula principal 2x2"""
    
    # Contenedor principal
    st.markdown("<div style='margin: 30px 0;'>", unsafe_allow_html=True)
    
    # FILA 1: Formulario + Competencias
    col_form, col_comp = st.columns([1, 1])
    
    with col_form:
        # CARD 1: FORMULARIO
        with st.container(border=True, height=350):
            st.markdown("### ✨ Accede Gratis")
            
            # Tabs para login/registro
            tab1, tab2 = st.tabs(["📝 Registrarse", "🔐 Iniciar Sesión"])
            
            with tab1:
                show_register_form(landing_t)
            
            with tab2:
                show_login_form(landing_t)
    
    with col_comp:
        # CARD 2: COMPETENCIAS
        with st.container(border=True, height=350):
            st.markdown("### 🏆 Competimos por $950K USD")
            
            # Lista de competencias
            competitions = [
                {"name": "Learning Tools Competition", "amount": "$600K", "status": "✅ Fase II"},
                {"name": "NVIDIA Inception", "amount": "$250K", "status": "💰 Capital Ventures"},
                {"name": "Kaggle/Google", "amount": "$100K", "status": "🤖 Modelos Explicables"},
            ]
            
            for comp in competitions:
                with st.expander(f"{comp['name']} - {comp['amount']}"):
                    st.markdown(f"""
                    **Estado:** {comp['status']}
                    
                    *¿Quieres probar la tecnología que compite?*
                    """)
                    
            if st.button("🎯 Ser Beta Tester", use_container_width=True):
                st.session_state.show_beta_form = True
                st.rerun()
    
    # FILA 2: Video + Alianzas
    col_video, col_alliances = st.columns([1, 1])
    
    with col_video:
        # CARD 3: VIDEO PRINCIPAL
        with st.container(border=True, height=350):
            st.markdown("### 🎬 Demo en 30 Segundos")
            
            # Player de video
            try:
                st_player(
                    "https://youtu.be/hXnwUvN1Q9Q",
                    height=200,
                    playing=False,
                    controls=True,
                    light=True
                )
            except:
                st.image("https://via.placeholder.com/400x200?text=Demo+Video", use_column_width=True)
            
            st.markdown("""
            ---
            **¿Qué verás?**
            • Visualización de Grafos de Razonamiento
            • Análisis en tiempo real
            • Progreso cognitivo mapeado
            """)
    
    with col_alliances:
        # CARD 4: ALIANZAS
        with st.container(border=True, height=350):
            st.markdown("### 🤝 Validado por Líderes")
            
            # Grid de logos de aliados
            cols = st.columns(4)
            with cols[0]:
                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/nvidia/nvidia-inception-program-badge-rgb-for-screen.png", 
                        width=70)
                st.caption("NVIDIA")
            
            with cols[1]:
                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/ALPHA_Startup%20Badges.png",
                        width=70)
                st.caption("ALPHA")
            
            with cols[2]:
                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/F6/F6S_Top_Company_EdTech_27.png",
                        width=70)
                st.caption("F6S")
            
            with cols[3]:
                st.image("https://via.placeholder.com/70x70/4F46E5/FFFFFF?text=incMTY",
                        width=70)
                st.caption("incMTY")
            
            st.markdown("""
            ---
            **Alianzas Estratégicas:**
            • NVIDIA Inception: Deep Tech
            • ALPHA Startup: Validación mercado  
            • F6S: Top 27 EdTech global
            • incMTY: Aceleración México
            """)

# ============================================
# COMPONENTES DE FORMULARIOS
# ============================================
def show_register_form(landing_t):
    """Formulario de registro simplificado"""
    
    email = st.text_input("📧 Correo institucional", key="reg_email_new")
    nombre = st.text_input("👤 Nombre completo", key="reg_name_new")
    
    # Botón de registro
    if st.button("🚀 Obtener Acceso Gratis", type="primary", use_container_width=True):
        if email and nombre:
            # Aquí iría la lógica de registro
            st.success("¡Pronto recibirás acceso a la beta!")
        else:
            st.warning("Por favor completa todos los campos")
    
    # Info adicional
    st.markdown("""
    <div style='font-size: 0.8em; color: #666; margin-top: 10px;'>
    ✅ 30 días gratis<br>
    ✅ Sin tarjeta de crédito<br>
    ✅ Acceso inmediato a beta
    </div>
    """, unsafe_allow_html=True)

def show_login_form(landing_t):
    """Formulario de login"""
    
    username = st.text_input("👤 Usuario/Email", key="login_user_new")
    password = st.text_input("🔒 Contraseña", type="password", key="login_pass_new")
    
    if st.button("Ingresar", use_container_width=True):
        # Aquí iría la lógica de login
        st.info("Función de login en desarrollo")

# ============================================
# COMPONENTE 4: CARRUSEL DE EVENTOS
# ============================================
def show_events_carousel():
    """Carrusel de eventos en full width"""
    
    st.markdown("---")
    st.markdown("### 📅 Eventos y Reconocimientos")
    
    # Usar el carrusel existente o crear uno simplificado
    try:
        # Importar el carrusel existente
        from .ui import show_carousel
        show_carousel()
    except:
        # Carrusel simplificado de respaldo
        eventos = [
            {"titulo": "WebSummit Rio 2025", "lugar": "Rio de Janeiro, Brasil", "fecha": "Abril 2025"},
            {"titulo": "PyCon 2024", "lugar": "Medellín, Colombia", "fecha": "Junio 2024"},
            {"titulo": "Maker Faire 2024", "lugar": "Ciudad de México", "fecha": "Octubre 2024"},
        ]
        
        cols = st.columns(3)
        for idx, evento in enumerate(eventos):
            with cols[idx]:
                with st.container(border=True):
                    st.markdown(f"#### {evento['titulo']}")
                    st.markdown(f"📍 **{evento['lugar']}**")
                    st.markdown(f"📅 {evento['fecha']}")
                    st.markdown("*Presentación y showcase*")

# ============================================
# COMPONENTE 5: FOOTER
# ============================================
def show_footer():
    """Footer de la página"""
    
    st.markdown("---")
    
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.markdown("""
        **📧 Contacto**
        
        contacto@aideatext.ai
        +51 123 456 789
        """)
    
    with col2:
        st.markdown("""
        **🔗 Enlaces**
        
        [GitHub](https://github.com/AIdeaText)  
        [LinkedIn](https://linkedin.com/company/aideatext)
        [Twitter](https://twitter.com/AIdeaText)
        """)
    
    with col3:
        st.markdown("""
        **⚖️ Legal**
        
        © 2025 AIdeaText. Todos los derechos reservados.
        
        NVIDIA y el logo de NVIDIA son marcas registradas de NVIDIA Corporation.
        """)
    
    st.markdown("---")
    st.markdown("<div style='text-align: center; color: #666; font-size: 0.8em;'>🚀 Transformando cómo el mundo mide el pensamiento</div>", 
                unsafe_allow_html=True)

# ============================================
# FUNCIÓN PRINCIPAL PARA REEMPLAZAR LA ACTUAL
# ============================================
def main_new_landing():
    """Función principal de la nueva landing page"""
    
    # Inicializar estado si no existe
    if 'lang_code' not in st.session_state:
        st.session_state.lang_code = 'es'
    
    # Obtener traducciones (usar el sistema existente)
    from translations import get_landing_translations
    landing_t = get_landing_translations(st.session_state.lang_code)
    
    # Mostrar la nueva landing
    show_new_landing(st.session_state.lang_code, landing_t)

# Exportar la función principal
__all__ = ['main', 'login_register_page', 'main_new_landing', 'show_new_landing']

if __name__ == "__main__":
    main_new_landing()