{% extends "base.html" %}

{% block title %}Simulador AVANZO - Portal Oficial de Estudio | MINEDUCYT El Salvador{% endblock %}

{% block content %}
<div class="container py-4">

  <!-- HERO BANNER -->
  <div class="hero-banner mb-5">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <span class="badge bg-warning text-dark fw-bold px-3 py-2 mb-3 text-uppercase">
          <i class="bi bi-mortarboard-fill me-1"></i> Bachillerato General y Técnico
        </span>
        <h1 class="display-5 fw-bold mb-3 text-white">
          Simulador Oficial de la Prueba AVANZO
        </h1>
        <p class="lead text-white-50 mb-4 fs-6" style="max-width: 650px;">
          Entrénate con las condiciones reales de la evaluación nacional del Ministerio de Educación de El Salvador. Cronómetro por bloque, ítems contextualizados, cálculo oficial de <strong>Niveles de Logro</strong> y emisión de tu Boleta de Resultados con NIE.
        </p>

        <div class="d-flex flex-wrap gap-3">
          <a href="{{ url_for('exam_view') }}" class="btn btn-light btn-lg fw-bold text-primary px-4 py-3 shadow-sm rounded-pill">
            <i class="bi bi-play-circle-fill me-2 text-primary"></i> Iniciar Simulacro Completo
          </a>
          <a href="{{ url_for('descargas_view') }}" class="btn btn-success btn-lg fw-bold px-4 py-3 rounded-pill shadow-sm">
            <i class="bi bi-cloud-arrow-down-fill me-2"></i> Descargar Offline
          </a>
          <a href="{{ url_for('practice_view') }}" class="btn btn-outline-light btn-lg fw-semibold px-4 py-3 rounded-pill">
            <i class="bi bi-book me-2"></i> Práctica Guiada
          </a>
          <a href="{{ url_for('demo_view') }}" class="btn btn-outline-warning btn-lg fw-bold px-4 py-3 rounded-pill text-warning">
            <i class="bi bi-phone me-2"></i> Demo Táctil
          </a>
        </div>
      </div>

      <div class="col-lg-4 text-center mt-4 mt-lg-0">
        <div class="p-4 bg-white text-dark rounded-4 shadow-lg border text-start">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="badge bg-primary-subtle text-primary fw-bold text-uppercase">Acceso Solidario</span>
            <span class="badge bg-success-subtle text-success fw-bold">100% Offline</span>
          </div>
          <h4 class="fw-bold text-dark mb-1">$1.00 USD <small class="text-muted fs-6 fw-normal">/ Ilimitado</small></h4>
          <p class="text-muted small mb-3">
            Acceso sin límites para 1 estudiante o <strong>$5.00 por toda la sección del aula</strong>. Activación al instante con Chivo Wallet, Strike o Blink.
          </p>
          <a href="{{ url_for('comprar_view') }}" class="btn btn-warning w-100 fw-bold py-2 rounded-3 text-dark">
            <i class="bi bi-lightning-charge-fill me-1 text-danger"></i> Obtener Clave de Activación
          </a>
          <a href="{{ url_for('demo_view') }}" class="btn btn-outline-secondary btn-sm w-100 fw-semibold mt-2 rounded-3">
            <i class="bi bi-play-circle me-1"></i> Probar Muestra Gratuita (Demo)
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- STATS RÁPIDAS -->
  <div class="row g-3 mb-5 text-center">
    <div class="col-6 col-md-3">
      <div class="p-3 bg-white rounded-3 border shadow-sm">
        <i class="bi bi-journal-text text-primary fs-3 d-block mb-1"></i>
        <h4 class="fw-bold mb-0 text-dark">{{ total_questions }}</h4>
        <span class="text-muted small">Ítems Curriculares</span>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 bg-white rounded-3 border shadow-sm">
        <i class="bi bi-card-checklist text-success fs-3 d-block mb-1"></i>
        <h4 class="fw-bold mb-0 text-dark">{{ total_flashcards }}</h4>
        <span class="text-muted small">Flashcards de Repaso</span>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 bg-white rounded-3 border shadow-sm">
        <i class="bi bi-award text-warning fs-3 d-block mb-1"></i>
        <h4 class="fw-bold mb-0 text-dark">3 Niveles</h4>
        <span class="text-muted small">Básico, Medio, Avanzado</span>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 bg-white rounded-3 border shadow-sm">
        <i class="bi bi-qr-code-scan text-info fs-3 d-block mb-1"></i>
        <h4 class="fw-bold mb-0 text-dark">Boleta PDF</h4>
        <span class="text-muted small">Con Código QR de Validación</span>
      </div>
    </div>
  </div>

  <!-- ÁREAS CURRICULARES EVALUADAS -->
  <div class="mb-5">
    <div class="d-flex justify-content-between align-items-end mb-4 flex-wrap gap-2">
      <div>
        <h3 class="fw-bold text-dark mb-1">Asignaturas Oficiales de la Prueba AVANZO</h3>
        <p class="text-muted mb-0">Selecciona un área curricular para practicar directamente sus competencias:</p>
      </div>
      <a href="{{ url_for('practice_view') }}" class="btn btn-outline-primary btn-sm fw-semibold">
        Ver todas las materias <i class="bi bi-arrow-right ms-1"></i>
      </a>
    </div>

    <div class="row g-3">
      {% for cat in categories %}
      <div class="col-md-6 col-lg-4">
        <div class="feature-card p-4 h-100 d-flex flex-column justify-content-between">
          <div>
            <div class="d-flex align-items-center gap-3 mb-3">
              <div class="icon-box" style="background-color: {{ cat.color }}15; color: {{ cat.color }};">
                <i class="bi {{ cat.icon }}"></i>
              </div>
              <div>
                <h5 class="fw-bold mb-0 text-dark">{{ cat.name }}</h5>
                <span class="text-muted small text-uppercase">Educación Media</span>
              </div>
            </div>
            <p class="text-muted small mb-4">
              {{ cat.description }}
            </p>
          </div>
          <div class="d-flex gap-2">
            <a href="{{ url_for('practice_view', materia=cat.id) }}" class="btn btn-sm btn-outline-primary flex-grow-1 fw-semibold">
              <i class="bi bi-pencil-square me-1"></i> Práctica
            </a>
            <a href="{{ url_for('flashcards_view', materia=cat.id) }}" class="btn btn-sm btn-light border text-muted">
              <i class="bi bi-card-text"></i> Fichas
            </a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- PILARES DE FIDELIDAD -->
  <div class="p-4 p-md-5 bg-white rounded-4 border shadow-sm mb-5">
    <div class="text-center mb-5" style="max-width: 700px; margin: 0 auto;">
      <span class="badge bg-primary text-white fw-bold px-3 py-2 mb-2 text-uppercase">Metodología Formativa</span>
      <h2 class="fw-bold text-dark">Diseñado para la Máxima Efectividad</h2>
      <p class="text-muted">A diferencia de cuestionarios genéricos, nuestra plataforma entrena al estudiante en los 4 aspectos determinantes del éxito en la prueba real:</p>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-3">
        <div class="text-center">
          <div class="mx-auto mb-3 rounded-circle bg-primary-subtle text-primary d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.6rem;">
            <i class="bi bi-stopwatch"></i>
          </div>
          <h5 class="fw-bold text-dark">Gestión del Tiempo</h5>
          <p class="text-muted small">Cronómetro idéntico al del examen para aprender a distribuir los minutos por ítem y no dejar preguntas sin contestar.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="text-center">
          <div class="mx-auto mb-3 rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.6rem;">
            <i class="bi bi-lightbulb"></i>
          </div>
          <h5 class="fw-bold text-dark">Aprende de tus Errores</h5>
          <p class="text-muted small">Cada pregunta incluye su resolución paso a paso y la explicación de por qué las alternativas engañosas son incorrectas.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="text-center">
          <div class="mx-auto mb-3 rounded-circle bg-warning-subtle text-warning d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.6rem;">
            <i class="bi bi-flag"></i>
          </div>
          <h5 class="fw-bold text-dark">Herramienta de Duda</h5>
          <p class="text-muted small">Marca con bandera preguntas dudosas en la matriz interactiva para revisarlas con calma antes de realizar el envío final.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="text-center">
          <div class="mx-auto mb-3 rounded-circle bg-info-subtle text-info d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.6rem;">
            <i class="bi bi-file-earmark-pdf"></i>
          </div>
          <h5 class="fw-bold text-dark">Boleta con QR</h5>
          <p class="text-muted small">Obtén tu boleta oficial con NIE, gráfica de rendimiento y diagnóstico de materias a reforzar antes de la prueba real.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- SECCIÓN VIDEO TUTORIAL DE USO -->
  <div class="card border-0 shadow-lg rounded-4 overflow-hidden mb-5 text-white" style="background: linear-gradient(135deg, #07162c 0%, #172554 100%); border-left: 6px solid #38bdf8 !important;">
    <div class="p-4 p-md-5">
      <div class="row align-items-center g-4">
        <div class="col-lg-7">
          <div class="ratio ratio-16x9 rounded-3 overflow-hidden shadow-sm border border-secondary border-opacity-50">
            <video controls playsinline preload="metadata" poster="{{ url_for('static', filename='img/tutorial_poster.png') }}" class="w-100 h-100">
              <source src="{{ url_for('static', filename='videos/Video_Tutorial_Uso_AVANZO_2026.mp4') }}" type="video/mp4">
              Tu navegador no soporta reproducción de video.
            </video>
          </div>
        </div>
        <div class="col-lg-5">
          <span class="badge bg-warning text-dark fw-bold px-3 py-1 text-uppercase mb-2 shadow-sm">
            <i class="bi bi-mic-fill me-1 text-danger"></i> Narrado por Lorena (El Salvador)
          </span>
          <h3 class="fw-bold text-white mb-2">Video Tutorial de Uso en 1 Minuto</h3>
          <p class="text-light opacity-90 small mb-3">
            Aprende a registrar tu NIE, responder con auto-avance, revisar explicaciones de errores, repasar con flashcards y generar tu boleta oficial con firma digital.
          </p>

          <ul class="list-unstyled text-light small mb-4 d-flex flex-column gap-2">
            <li class="d-flex align-items-center gap-2">
              <i class="bi bi-check-circle-fill text-success fs-5"></i>
              <span><strong>Paso 1:</strong> Registro fácil con Nombre y NIE.</span>
            </li>
            <li class="d-flex align-items-center gap-2">
              <i class="bi bi-check-circle-fill text-success fs-5"></i>
              <span><strong>Paso 2:</strong> 60 minutos cronometrados y auto-avance.</span>
            </li>
            <li class="d-flex align-items-center gap-2">
              <i class="bi bi-check-circle-fill text-success fs-5"></i>
              <span><strong>Paso 3:</strong> Justificación de fallos y flashcards móviles.</span>
            </li>
            <li class="d-flex align-items-center gap-2">
              <i class="bi bi-check-circle-fill text-success fs-5"></i>
              <span><strong>Paso 4:</strong> Boleta con nota sobre 10 y hash SHA-256.</span>
            </li>
          </ul>

          <div class="d-flex flex-wrap gap-2">
            <a href="{{ url_for('tutorial_view') }}" class="btn btn-warning fw-bold text-dark rounded-pill px-3 shadow-sm">
              <i class="bi bi-play-circle-fill me-1"></i> Ver Guía Completa
            </a>
            <a href="{{ url_for('download_tutorial_video') }}" class="btn btn-outline-light rounded-pill px-3">
              <i class="bi bi-download me-1"></i> Descargar MP4 (2.1 MB)
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- BANNER PROMOCIÓN SECCIÓN ($5.00 AULA) -->
  <div class="p-4 bg-light border border-2 border-warning rounded-4 shadow-sm mb-5 text-center text-md-start">
    <div class="row align-items-center g-3">
      <div class="col-md-8">
        <span class="badge bg-warning text-dark fw-bold text-uppercase px-2 py-1 mb-2">Para Directivas de Grado y Docentes</span>
        <h4 class="fw-bold text-dark mb-1">¿Estudias en un Instituto o Complejo Educativo?</h4>
        <p class="text-muted mb-0">
          Adquiere el paquete <strong>"Sección Completa" por solo $5.00 USD</strong> y desbloquea licencias individuales para toda tu aula (hasta 45 estudiantes). Sale a menos de <strong>$0.15 centavos por alumno</strong> e incluye cuenta para el profesor guía.
        </p>
      </div>
      <div class="col-md-4 text-md-end">
        <a href="{{ url_for('comprar_view') }}" class="btn btn-warning btn-lg fw-bold text-dark px-4 shadow-sm">
          <i class="bi bi-people-fill me-1"></i> Ver Promo Sección ($5)
        </a>
      </div>
    </div>
  </div>

</div>
{% endblock %}