# landing.CSS
"""
Landing page moderna y atractiva para plataforma SAAS de IA para redes sociales
Diseño premium con animaciones y efectos modernos
"""

import dash
from dash import html, dcc, callback, Input, Output, State
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

# Registrar la página
dash.register_page(__name__, path="/", name="SocialAI - Diseños con IA")

# ──────────────────────────────────────────────────────────────────────
# COMPONENTES DE LA LANDING PAGE
# ──────────────────────────────────────────────────────────────────────

def create_hero_section():
    """Sección hero principal con gradiente y animaciones"""
    return html.Div([
        # Background con gradiente y elementos decorativos
        html.Div(className="hero-background"),
        html.Div(className="hero-particles"),
        
        # Contenido principal
        html.Div([
            dbc.Container([
                dbc.Row([
                    dbc.Col([
                        # Badge de novedad
                        html.Div([
                            html.Span("🚀 Nuevo", className="badge-icon"),
                            html.Span("IA de última generación para redes sociales", className="badge-text")
                        ], className="hero-badge"),
                        
                        # Título principal
                        html.H1([
                            "Crea diseños ",
                            html.Span("profesionales", className="text-gradient"),
                            " para redes sociales con un solo prompt"
                        ], className="hero-title"),
                        
                        # Subtítulo
                        html.P(
                            "Transforma tu estrategia de marketing digital con IA avanzada. "
                            "Genera contenido visual impactante, programa publicaciones y "
                            "gestiona todo desde WhatsApp. Sin conocimientos de diseño necesarios.",
                            className="hero-subtitle"
                        ),
                        
                        # CTAs principales
                        html.Div([
                            html.Button([
                                html.I(className="fas fa-magic me-2"),
                                "Crear mi primer diseño"
                            ], className="btn-primary-hero", id="cta-main"),
                            
                            html.Button([
                                html.I(className="fas fa-play me-2"),
                                "Ver demo"
                            ], className="btn-secondary-hero", id="cta-demo")
                        ], className="hero-cta-buttons"),
                        
                        # Stats sociales
                        html.Div([
                            html.Div([
                                html.Span("50K+", className="stat-number"),
                                html.Span("Diseños creados", className="stat-label")
                            ], className="stat-item"),
                            html.Div([
                                html.Span("99%", className="stat-number"),
                                html.Span("Satisfacción", className="stat-label")
                            ], className="stat-item"),
                            html.Div([
                                html.Span("24/7", className="stat-number"),
                                html.Span("Disponible", className="stat-label")
                            ], className="stat-item")
                        ], className="hero-stats")
                        
                    ], width=12, lg=6, className="hero-text-col"),
                    
                    dbc.Col([
                        # Mockup animado
                        html.Div([
                            html.Div([
                                html.Img(src="/assets/hero-mockup.png", className="hero-mockup-img"),
                                html.Div(className="mockup-glow")
                            ], className="hero-mockup")
                        ], className="hero-visual")
                    ], width=12, lg=6, className="hero-image-col")
                ])
            ], fluid=True)
        ], className="hero-content")
    ], className="hero-section")

def create_features_section():
    """Sección de características principales"""
    features = [
        {
            "icon": "fas fa-wand-magic-sparkles",
            "title": "Un prompt, diseños infinitos",
            "description": "Describe tu idea en una frase y nuestra IA genera diseños profesionales adaptados a tu marca.",
            "color": "primary"
        },
        {
            "icon": "fas fa-palette",
            "title": "Estilo de marca automático",
            "description": "La IA aprende tu identidad visual y mantiene consistencia en todos tus diseños.",
            "color": "success"
        },
        {
            "icon": "fas fa-calendar-check",
            "title": "Programación inteligente",
            "description": "Planifica y programa tus publicaciones con horarios optimizados para máximo alcance.",
            "color": "warning"
        },
        {
            "icon": "fab fa-whatsapp",
            "title": "Asistente WhatsApp",
            "description": "Crea y programa contenido directamente desde WhatsApp. Tu equipo de diseño en el bolsillo.",
            "color": "info"
        },
        {
            "icon": "fas fa-video",
            "title": "Videos y animaciones",
            "description": "Genera contenido dinámico con videos, animaciones y diseños interactivos.",
            "color": "purple"
        },
        {
            "icon": "fas fa-rocket",
            "title": "Marketing de primer nivel",
            "description": "Obtén resultados profesionales sin equipo de diseño. Ideal para empresas en crecimiento.",
            "color": "gradient"
        }
    ]
    
    return html.Div([
        dbc.Container([
            # Header de sección
            html.Div([
                html.H2("Todo lo que necesitas para dominar las redes sociales", className="section-title"),
                html.P("Herramientas potentes e intuitivas que transforman tu estrategia digital", className="section-subtitle")
            ], className="section-header"),
            
            # Grid de características
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.Div([
                            html.I(className=f"{feature['icon']} feature-icon", 
                                  style={"color": f"var(--{feature['color']})"})
                        ], className="feature-icon-container"),
                        html.H4(feature["title"], className="feature-title"),
                        html.P(feature["description"], className="feature-description")
                    ], className="feature-card")
                ], width=12, md=6, lg=4, className="feature-col")
                for feature in features
            ], className="features-grid")
        ], fluid=True)
    ], className="features-section")

def create_demo_section():
    """Sección de demostración con video/imágenes"""
    return html.Div([
        dbc.Container([
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.H2("Ve la magia en acción", className="demo-title"),
                        html.P("Desde idea hasta publicación en segundos", className="demo-subtitle"),
                        
                        # Steps del proceso
                        html.Div([
                            html.Div([
                                html.Div("1", className="step-number"),
                                html.Div([
                                    html.H5("Describe tu idea"),
                                    html.P("Solo escribe lo que necesitas")
                                ], className="step-content")
                            ], className="demo-step"),
                            
                            html.Div([
                                html.Div("2", className="step-number"),
                                html.Div([
                                    html.H5("IA genera opciones"),
                                    html.P("Múltiples diseños en tu estilo")
                                ], className="step-content")
                            ], className="demo-step"),
                            
                            html.Div([
                                html.Div("3", className="step-number"),
                                html.Div([
                                    html.H5("Publica o programa"),
                                    html.P("Directo a tus redes sociales")
                                ], className="step-content")
                            ], className="demo-step")
                        ], className="demo-steps")
                    ])
                ], width=12, lg=5),
                
                dbc.Col([
                    html.Div([
                        html.Div([
                            html.Img(src="/assets/demo-preview.png", className="demo-image"),
                            html.Div([
                                html.I(className="fas fa-play", style={"fontSize": "2rem"})
                            ], className="play-button", id="play-demo")
                        ], className="demo-container")
                    ])
                ], width=12, lg=7)
            ])
        ], fluid=True)
    ], className="demo-section")

def create_social_networks_section():
    """Sección de redes sociales soportadas"""
    networks = [
        {"name": "Facebook", "icon": "fab fa-facebook", "color": "#1877f2", "formats": "Posts, Stories, Ads"},
        {"name": "Instagram", "icon": "fab fa-instagram", "color": "#E4405F", "formats": "Feed, Stories, Reels"},
        {"name": "LinkedIn", "icon": "fab fa-linkedin", "color": "#0077B5", "formats": "Posts, Articles, Ads"},
        {"name": "Twitter", "icon": "fab fa-twitter", "color": "#1da1f2", "formats": "Posts, Headers, Ads"},
        {"name": "TikTok", "icon": "fab fa-tiktok", "color": "#000000", "formats": "Videos, Thumbnails"},
        {"name": "YouTube", "icon": "fab fa-youtube", "color": "#ff0000", "formats": "Thumbnails, Banners"}
    ]
    
    return html.Div([
        dbc.Container([
            html.Div([
                html.H2("Optimizado para todas las redes sociales", className="section-title"),
                html.P("Formatos perfectos para cada plataforma", className="section-subtitle")
            ], className="section-header"),
            
            html.Div([
                html.Div([
                    html.Div([
                        html.I(className=network["icon"], 
                              style={"color": network["color"], "fontSize": "2rem"}),
                        html.H5(network["name"]),
                        html.P(network["formats"])
                    ], className="network-card")
                    for network in networks
                ], className="networks-grid")
            ])
        ], fluid=True)
    ], className="networks-section")

def create_pricing_section():
    """Sección de precios"""
    plans = [
        {
            "name": "Starter",
            "price": "$29",
            "period": "/mes",
            "description": "Para emprendedores y pequeños negocios",
            "features": [
                "50 diseños por mes",
                "3 redes sociales",
                "Programación básica",
                "Soporte por email"
            ],
            "button_text": "Comenzar gratis",
            "popular": False
        },
        {
            "name": "Professional",
            "price": "$79",
            "period": "/mes",
            "description": "Para equipos de marketing en crecimiento",
            "features": [
                "200 diseños por mes",
                "Todas las redes sociales",
                "WhatsApp Assistant",
                "Videos y animaciones",
                "Análisis avanzados",
                "Soporte prioritario"
            ],
            "button_text": "Elegir Professional",
            "popular": True
        },
        {
            "name": "Enterprise",
            "price": "$199",
            "period": "/mes",
            "description": "Para empresas con necesidades avanzadas",
            "features": [
                "Diseños ilimitados",
                "API personalizada",
                "Marca blanca",
                "Gestor de cuenta dedicado",
                "Integraciones personalizadas",
                "SLA garantizado"
            ],
            "button_text": "Contactar ventas",
            "popular": False
        }
    ]
    
    return html.Div([
        dbc.Container([
            html.Div([
                html.H2("Planes que se adaptan a tu crecimiento", className="section-title"),
                html.P("Comienza gratis, escala cuando necesites", className="section-subtitle")
            ], className="section-header"),
            
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.Div("🔥 Más popular" if plan["popular"] else "", 
                                className="plan-badge" if plan["popular"] else "plan-badge-hidden"),
                        html.H3(plan["name"], className="plan-name"),
                        html.Div([
                            html.Span(plan["price"], className="plan-price"),
                            html.Span(plan["period"], className="plan-period")
                        ], className="plan-pricing"),
                        html.P(plan["description"], className="plan-description"),
                        html.Ul([
                            html.Li([
                                html.I(className="fas fa-check", style={"color": "var(--success)"}),
                                feature
                            ], className="plan-feature")
                            for feature in plan["features"]
                        ], className="plan-features"),
                        html.Button(
                            plan["button_text"],
                            className="plan-button-popular" if plan["popular"] else "plan-button",
                            id=f"plan-{plan['name'].lower()}"
                        )
                    ], className="plan-card-popular" if plan["popular"] else "plan-card")
                ], width=12, lg=4)
                for plan in plans
            ])
        ], fluid=True)
    ], className="pricing-section")

def create_testimonials_section():
    """Sección de testimonios"""
    testimonials = [
        {
            "text": "SocialAI transformó completamente nuestra estrategia de marketing. Ahora creamos contenido profesional en minutos, no horas.",
            "author": "María González",
            "position": "CMO, TechStartup",
            "avatar": "/assets/testimonial-1.jpg",
            "rating": 5
        },
        {
            "text": "El asistente de WhatsApp es increíble. Nuestro equipo puede crear y programar contenido desde cualquier lugar.",
            "author": "Carlos Ruiz",
            "position": "Founder, EcoCommerce",
            "avatar": "/assets/testimonial-2.jpg",
            "rating": 5
        },
        {
            "text": "Antes necesitábamos un diseñador. Ahora con SocialAI, nuestro alcance en redes creció 300% con la mitad del presupuesto.",
            "author": "Ana Martínez",
            "position": "Marketing Director, FashionBrand",
            "avatar": "/assets/testimonial-3.jpg",
            "rating": 5
        }
    ]
    
    return html.Div([
        dbc.Container([
            html.Div([
                html.H2("Historias de éxito reales", className="section-title"),
                html.P("Empresas que ya están dominando las redes sociales", className="section-subtitle")
            ], className="section-header"),
            
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.Div([
                            html.I(className="fas fa-star") for _ in range(testimonial["rating"])
                        ], className="testimonial-rating"),
                        html.P(f'"{testimonial["text"]}"', className="testimonial-text"),
                        html.Div([
                            html.Img(src=testimonial["avatar"], className="testimonial-avatar"),
                            html.Div([
                                html.H6(testimonial["author"], className="testimonial-author"),
                                html.P(testimonial["position"], className="testimonial-position")
                            ], className="testimonial-info")
                        ], className="testimonial-footer")
                    ], className="testimonial-card")
                ], width=12, lg=4)
                for testimonial in testimonials
            ])
        ], fluid=True)
    ], className="testimonials-section")

def create_cta_section():
    """Sección de call-to-action final"""
    return html.Div([
        dbc.Container([
            html.Div([
                html.H2("¿Listo para revolucionar tu marketing?", className="cta-title"),
                html.P("Únete a miles de empresas que ya están creando contenido increíble", className="cta-subtitle"),
                html.Div([
                    html.Button([
                        html.I(className="fas fa-rocket me-2"),
                        "Comenzar ahora - Gratis"
                    ], className="cta-button-primary", id="cta-final"),
                    html.P("Sin tarjeta de crédito • Prueba gratuita de 14 días", className="cta-note")
                ], className="cta-actions")
            ], className="cta-content")
        ], fluid=True)
    ], className="cta-section")

# ──────────────────────────────────────────────────────────────────────
# LAYOUT PRINCIPAL
# ──────────────────────────────────────────────────────────────────────

def layout():
    """Layout principal de la landing page"""
    return html.Div([
        # Header/Navbar
        html.Nav([
            dbc.Container([
                html.Div([
                    html.A([
                        html.I(className="fas fa-magic me-2", style={"color": "var(--primary)"}),
                        html.Span("SocialAI", style={"fontWeight": "700", "fontSize": "1.25rem"})
                    ], href="/", className="navbar-brand"),
                    
                    html.Div([
                        html.A("Características", href="#features", className="nav-link"),
                        html.A("Precios", href="#pricing", className="nav-link"),
                        html.A("Testimonios", href="#testimonials", className="nav-link"),
                        html.Button("Ingresar", className="btn-login", id="btn-login"),
                        html.Button("Comenzar gratis", className="btn-signup", id="btn-signup")
                    ], className="navbar-nav")
                ], className="navbar-content")
            ], fluid=True)
        ], className="navbar"),
        
        # Secciones principales
        create_hero_section(),
        create_features_section(),
        create_demo_section(),
        create_social_networks_section(),
        create_pricing_section(),
        create_testimonials_section(),
        create_cta_section(),
        
        # Footer
        html.Footer([
            dbc.Container([
                dbc.Row([
                    dbc.Col([
                        html.Div([
                            html.I(className="fas fa-magic me-2", style={"color": "var(--primary)"}),
                            html.Span("SocialAI", style={"fontWeight": "700", "fontSize": "1.25rem"})
                        ], className="footer-brand"),
                        html.P("Democratizando el diseño profesional para redes sociales", className="footer-description")
                    ], width=12, lg=4),
                    
                    dbc.Col([
                        html.H6("Producto", className="footer-title"),
                        html.Ul([
                            html.Li(html.A("Características", href="#")),
                            html.Li(html.A("Precios", href="#")),
                            html.Li(html.A("API", href="#")),
                            html.Li(html.A("Integraciones", href="#"))
                        ], className="footer-links")
                    ], width=6, lg=2),
                    
                    dbc.Col([
                        html.H6("Soporte", className="footer-title"),
                        html.Ul([
                            html.Li(html.A("Centro de ayuda", href="#")),
                            html.Li(html.A("Contacto", href="#")),
                            html.Li(html.A("Estado del servicio", href="#")),
                            html.Li(html.A("Comunidad", href="#"))
                        ], className="footer-links")
                    ], width=6, lg=2),
                    
                    dbc.Col([
                        html.H6("Legal", className="footer-title"),
                        html.Ul([
                            html.Li(html.A("Privacidad", href="#")),
                            html.Li(html.A("Términos", href="#")),
                            html.Li(html.A("Cookies", href="#")),
                            html.Li(html.A("GDPR", href="#"))
                        ], className="footer-links")
                    ], width=6, lg=2),
                    
                    dbc.Col([
                        html.H6("Síguenos", className="footer-title"),
                        html.Div([
                            html.A(html.I(className="fab fa-twitter"), href="#", className="social-link"),
                            html.A(html.I(className="fab fa-linkedin"), href="#", className="social-link"),
                            html.A(html.I(className="fab fa-instagram"), href="#", className="social-link"),
                            html.A(html.I(className="fab fa-youtube"), href="#", className="social-link")
                        ], className="social-links")
                    ], width=6, lg=2)
                ]),
                
                html.Hr(className="footer-divider"),
                
                html.Div([
                    html.P("© 2025 SocialAI. Todos los derechos reservados.", className="footer-copyright"),
                    html.P("Hecho con ❤️ para revolucionar el marketing digital", className="footer-tagline")
                ], className="footer-bottom")
            ], fluid=True)
        ], className="footer")
    ], className="landing-page")

# ──────────────────────────────────────────────────────────────────────
# CALLBACKS
# ──────────────────────────────────────────────────────────────────────

@callback(
    Output("dummy-output", "children", allow_duplicate=True),
    [
        Input("cta-main", "n_clicks"),
        Input("cta-demo", "n_clicks"),
        Input("cta-final", "n_clicks"),
        Input("btn-login", "n_clicks"),
        Input("btn-signup", "n_clicks")
    ],
    prevent_initial_call=True
)
def handle_cta_clicks(cta_main, cta_demo, cta_final, btn_login, btn_signup):
    """Maneja los clicks de los CTAs y redirige a las páginas correspondientes"""
    ctx = dash.callback_context
    if not ctx.triggered:
        return ""
    
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    
    if button_id in ["cta-main", "cta-final", "btn-signup"]:
        # Redirigir a la página de registro/generación de diseños
        return dcc.Location(pathname="/generate_design/facebook/cuadrado", id="redirect")
    elif button_id == "btn-login":
        # Redirigir a login
        return dcc.Location(pathname="/login", id="redirect")
    elif button_id == "cta-demo":
        # Mostrar demo o scroll a sección demo
        return ""
    
    return ""

# Dummy output para los callbacks
layout.children.append(html.Div(id="dummy-output", style={"display": "none"}))