import gradio as gr

my_theme = gr.themes.Soft(
    primary_hue="emerald",
    secondary_hue="green",
    neutral_hue="slate",
    text_size="sm",
    spacing_size="sm",
    font=[gr.themes.GoogleFont('Nunito'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
    font_mono=[gr.themes.GoogleFont('Nunito'), 'ui-monospace', 'Consolas', 'monospace'],
    ).set(
    body_background_fill='*neutral_50',
    body_text_color='*neutral_600',
    body_text_size='*text_sm',
    embed_radius='*radius_md',
    shadow_drop='*shadow_spread',
    shadow_spread='*button_shadow_active'
    )

def estilo():
    gr.HTML(
        """
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
        
        h1 {
            font-family: 'Lobster', cursive;
            font-size: 5em !important;
            text-align: center;
            margin: 0;
        }
        
        .gr-button {
            background-color: #4CAF50 !important; 
            color: white !important; 
            border: none;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
        }
        
        .gr-button:hover {
            background-color: #45a049; 
        }
        h2 {
            font-family: 'Lobster', cursive;
            font-size: 3em !important;
            text-align: center;
            margin: 0;
        }
        p.slogan, h4, p, h3 {
            font-family: 'Roboto', sans-serif;
            text-align: center;
        }
        </style>
        <h1>Iremia</h1>
        <h4 style='text-align: center; font-size: 1.5em'>Tu aliado para el bienestar de tu bebé</h4>
        """
    )
    return my_theme
def inicio():
    estilo()
    gr.Markdown(
        "<h4 style='text-align: left; font-size: 1.5em;'>¿Qué es Iremia?</h4>"
    )
    gr.Markdown(
        "<p style='text-align: left'>Iremia es un proyecto llevado a cabo por un grupo de estudiantes interesados en el desarrollo de modelos de inteligencia artificial, enfocados específicamente en casos de uso relevantes para ayudar a cuidar a los más pequeños de la casa.</p>"
    )
    gr.Markdown(
        "<h4 style='text-align: left; font-size: 1.5em;'>Nuestra misión</h4>"
    )
    gr.Markdown(
        "<p style='text-align: left'>Sabemos que la paternidad puede suponer un gran desafío. Nuestra misión es brindarles a todos los padres unas herramientas de última tecnología que los ayuden a navegar esos primeros meses de vida tan cruciales en el desarrollo de sus pequeños.</p>"
    )
    gr.Markdown(
        "<h4 style='text-align: left; font-size: 1.5em;'>¿Qué ofrece Iremia?</h4>"
    )
    gr.Markdown(
        "<p style='text-align: left'>Iremia ofrece dos funcionalidades muy interesantes:</p>"
    )
    gr.Markdown(
        "<p style='text-align: left'>Predictor: Con nuestro modelo de inteligencia artificial, somos capaces de predecir por qué tu hijo de menos de 2 años está llorando. Además, tendrás acceso a un asistente personal para consultar cualquier duda que tengas sobre el cuidado de tu pequeño.</p>"
    )
    gr.Markdown(
        "<p style='text-align: left'>Monitor: Nuestro monitor no es como otros que hay en el mercado, ya que es capaz de reconocer si un sonido es un llanto del bebé o no, y si está llorando, predice automáticamente la causa, lo cual te brindará la tranquilidad de saber siempre qué pasa con tu pequeño y te ahorrará tiempo y muchas horas de sueño.</p>"
    )
    with gr.Row():
        with gr.Column():
            gr.Markdown("<h2>Predictor</h2>")
            boton_pagina_1 = gr.Button("Prueba el predictor")
            gr.Markdown("<p>Descubre por qué llora tu bebé</p>")
        with gr.Column():
            gr.Markdown("<h2>Monitor</h2>")
            boton_pagina_2 = gr.Button("Prueba el monitor")
            gr.Markdown("<p>Detecta si tu hijo está llorando y por qué antes de que puedas levantarte del sofá</p>")
    return boton_pagina_1, boton_pagina_2