{% extends "base.html" %}

{% block title %}{{ branding.name }} - Inicio{% endblock %}

{% block styles %}
    {# Carga las variables de CSS personalizadas de la empresa #}
    <style>
        {{ branding.css_variables | safe }}
    </style>
{% endblock %}

{% block content %}
{% include '_company_header.html' %}

{# Contenido principal con la propuesta de valor y el widget de login #}
<div class="container my-4 my-md-5">
    <div class="row align-items-center g-5">

        {# Columna de la propuesta de valor #}
        <div class="col-lg-7">
            <h1 class="branded-headline mb-3">Inteligencia Artificial con nuestros propios datos</h1>
            <p class="lead text-muted">
                Hemos diseñado este asistente de inteligencia artificial, entrenado exclusivamente con el conocimiento y los datos de Sample Company, para ser tu principal punto de apoyo. Olvídate de buscar en múltiples sistemas; ahora puedes obtener respuestas precisas y agilizar tus tareas en un solo lugar.
            </p>
            <ul class="list-unstyled mt-4 fs-5">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-branded-primary me-2"></i>Consulta al instante políticas internas, manuales de procedimientos y la documentación de cualquier proyecto.</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-branded-primary me-2"></i>Genera resúmenes de informes, redacta borradores de correos electrónicos o traduce documentos con total seguridad.</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-branded-primary me-2"></i>Acelera tus proyectos encontrando rápidamente al experto o equipo correcto para cada consulta.</li>            </ul>
        </div>

        {# Columna del widget de inicio de sesión #}
        <div class="col-lg-5">
            <div class="branded-form-container">
    <h4 class="branded-form-title">Iniciar Sesión</h4>

    <!-- 1. Encabezado de Marketing -->
    <div class="text-center mb-4">
        <p class="text-muted widget-intro-text">
            Ingresa tus credenciales para acceder a la plataforma de {{ branding.name }}.
        </p>
    </div>

    <!-- 2. Formulario de Inicio de Sesión -->
    <form id="login-form"
          action="{{ url_for('login', company_short_name=company_short_name) }}"
          method="post">
      <div class="mb-3">
        <label for="email" class="form-label d-block">Correo Electrónico</label>
        <input type="email" id="email" name="email" class="form-control"
               required value="{{ form_data.email if form_data is defined else '' }}">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label d-block">Contraseña</label>
        <input type="password" id="password" name="password"
               class="form-control" required>
      </div>
      <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2">
          Iniciar Sesión
      </button>
    </form>

    <!-- 3. Nueva Sección de Registro más Atractiva -->
    <div class="mt-4 pt-3 text-center" style="border-top: 1px solid #e0e0e0;">
        <span class="text-muted small">¿Eres nuevo aquí?</span>
        <a href="{{ url_for('signup', company_short_name=company_short_name) }}" id="signup-link" class="fw-bold ms-1 text-decoration-none" style="color: var(--brand-primary-color);">Crea una cuenta gratis</a>
    </div>

    <!-- 4. Enlace de Recuperación de Contraseña (más sutil) -->
    <div class="text-center mt-2">
      <a href="{{ url_for('forgot_password', company_short_name=company_short_name) }}" class="text-decoration-none text-muted" style="font-size: 0.8rem;">
        ¿Olvidaste tu contraseña?
      </a>
    </div>
</div>
        </div>

    </div>
</div>

{% endblock %}