{% extends "base.html" %}

{% block title %}Descargas y Modo Offline - Simulador AVANZO El Salvador{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- ENCABEZADO -->
  <div class="card bg-gradient-primary text-white border-0 shadow-lg mb-4" style="background: linear-gradient(135deg, #0a2540 0%, #1e3a8a 100%); border-radius: 16px;">
    <div class="card-body p-4 p-md-5">
      <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-white bg-opacity-10 border border-white border-opacity-25 mb-3">
        <i class="bi bi-cloud-arrow-down-fill text-warning"></i>
        <span class="text-white small fw-bold tracking-wide">CENTRO DE DESCARGAS OFFLINE • EL SALVADOR</span>
      </div>
      <h1 class="display-6 fw-bold mb-2">Lleva el Simulador AVANZO a Todas Partes</h1>
      <p class="lead text-light mb-4" style="max-width: 750px;">
        Descarga el sistema para practicar en tu celular, tablet o en el centro de cómputo de tu instituto <strong>sin necesidad de conexión a internet</strong>.
      </p>

      <!-- URL Oficial de Vercel destacada -->
      <div class="p-3 rounded-3 bg-black bg-opacity-30 border border-white border-opacity-20 d-inline-flex flex-wrap align-items-center gap-3">
        <span class="badge bg-success px-3 py-2 text-uppercase fw-bold"><i class="bi bi-globe me-1"></i> Servidor Oficial en la Nube</span>
        <code class="text-warning fs-5 fw-bold font-monospace">https://simuladoravanzosv.vercel.app</code>
        <a href="https://simuladoravanzosv.vercel.app" target="_blank" class="btn btn-sm btn-outline-light fw-semibold">
          <i class="bi bi-box-arrow-up-right me-1"></i> Abrir en Vercel
        </a>
      </div>
    </div>
  </div>

  <!-- SECCIÓN DESTACADA: DOCUMENTOS OFICIALES EN PDF VERTICAL -->
  <div class="row g-4 mb-4">
    <!-- FICHA TÉCNICA CYBER.NET -->
    <div class="col-lg-4 col-md-6">
      <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-white" style="background: linear-gradient(135deg, #061e38 0%, #0f3a68 100%); border-top: 5px solid #00d2ff !important;">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="badge bg-info text-dark fw-bold px-3 py-1 text-uppercase"><i class="bi bi-shield-check text-dark me-1"></i> cyber.net Oficial</span>
          <span class="badge bg-white bg-opacity-20 text-light">3 Páginas Carta</span>
        </div>
        <h4 class="fw-bold mb-2 text-white">Detalles Técnicos y Arquitectura (cyber.net)</h4>
        <p class="text-light opacity-90 small mb-3">
          Dossier de ingeniería avalado por la marca <strong>cyber.net</strong>. Especifica la arquitectura híbrida (Edge + Offline), protocolo antifraude Single-Device Lock (SHA-256), motor psicométrico MINEDUCYT, SLAs (99.95%) y sellos de garantía técnica para mayor credibilidad ante directores y autoridades.
        </p>
        <div class="mt-auto pt-2">
          <a href="/descargar/detalles-tecnicos-pdf" class="btn btn-info text-dark fw-bold w-100 shadow-sm rounded-pill py-2">
            <i class="bi bi-file-earmark-pdf-fill text-danger me-1"></i> Descargar Ficha Técnica (PDF)
          </a>
        </div>
      </div>
    </div>

    <!-- DOSSIER INFORMATIVO DEL SISTEMA -->
    <div class="col-lg-4 col-md-6">
      <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-white" style="background: linear-gradient(135deg, #0b2240 0%, #1e3a8a 100%); border-top: 5px solid #38bdf8 !important;">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="badge bg-info text-dark fw-bold px-3 py-1 text-uppercase"><i class="bi bi-file-earmark-pdf-fill text-danger me-1"></i> Documento Oficial PDF</span>
          <span class="badge bg-white bg-opacity-20 text-light">2 Páginas Carta</span>
        </div>
        <h4 class="fw-bold mb-2 text-white">Dossier Informativo y Ficha Resumen</h4>
        <p class="text-light opacity-90 small mb-3">
          Folleto ejecutivo institucional del <strong>Simulador AVANZO 2026</strong>. Explica los 5 módulos pedagógicos, la cobertura de las 4 materias, especificaciones de compatibilidad, planes sociales ($1 estudiante / $5 aula) y canales oficiales.
        </p>
        <div class="mt-auto pt-2">
          <a href="/descargar/dossier-informativo-pdf" class="btn btn-warning text-dark fw-bold w-100 shadow-sm rounded-pill py-2">
            <i class="bi bi-file-earmark-pdf-fill text-danger me-1"></i> Descargar Dossier Informativo (PDF)
          </a>
        </div>
      </div>
    </div>

    <!-- INFORME DIAGNÓSTICO DOCENTE -->
    <div class="col-lg-4 col-md-12">
      <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-white" style="background: linear-gradient(135deg, #07162c 0%, #0f2d4e 100%); border-top: 5px solid #f59e0b !important;">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="badge bg-warning text-dark fw-bold px-3 py-1 text-uppercase"><i class="bi bi-bar-chart-fill text-dark me-1"></i> Reporte Institucional</span>
          <span class="badge bg-white bg-opacity-20 text-light">2 Páginas Carta</span>
        </div>
        <h4 class="fw-bold mb-2 text-white">Informe Diagnóstico Docente de Aula</h4>
        <p class="text-light opacity-90 small mb-3">
          Informe curricular modelo para directores y docentes guías: incluye el semáforo oficial de 4 materias, diagnóstico de fortalezas, deficiencias críticas con plan de pizarra y la nómina completa de 45 alumnos con firmas.
        </p>
        <div class="mt-auto pt-2">
          <a href="/descargar/informe-diagnostico-pdf" class="btn btn-outline-warning fw-bold w-100 rounded-pill py-2">
            <i class="bi bi-file-earmark-pdf-fill me-1"></i> Descargar Informe Diagnóstico (PDF)
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- TARJETAS DE DESCARGA -->
  <div class="row g-4 mb-5">
    <!-- OPCIÓN 1: HTML AUTÓNOMO CELULAR -->
    <div class="col-lg-4">
      <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden" style="border-top: 5px solid #06b6d4 !important;">
        <div class="card-body p-4 d-flex flex-column">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="rounded-circle p-3 d-inline-flex align-items-center justify-content-center" style="background-color: rgba(6, 182, 212, 0.12); color: #0891b2; width: 56px; height: 56px;">
              <i class="bi bi-phone-fill fs-3"></i>
            </div>
            <span class="badge bg-info text-dark fw-bold px-3 py-2 rounded-pill">Móvil &bull; 84 KB</span>
          </div>
          <h4 class="fw-bold mb-2 text-dark">Simulador Móvil Autónomo</h4>
          <p class="text-muted small mb-3">
            <strong>Ideal para estudiantes y celulares:</strong> Un solo archivo <code>.html</code> ultra ligero que abre en Chrome, Safari o cualquier navegador de teléfono sin internet ni instalación.
          </p>
          <ul class="list-unstyled small text-secondary mb-4 flex-grow-1">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>32 Preguntas Curriculares Completas</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Explicaciones pedagógicas paso a paso</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Audio-lectura por voz y cronómetro</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Blindaje contra botones virtuales del celular</li>
          </ul>
          <a href="{{ url_for('download_demo_offline') }}" class="btn btn-primary w-100 py-2 fw-bold shadow-sm rounded-3">
            <i class="bi bi-download me-2"></i> Descargar HTML Autónomo
          </a>
        </div>
      </div>
    </div>

    <!-- OPCIÓN 2: SISTEMA PORTABLE PC -->
    <div class="col-lg-4">
      <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden" style="border-top: 5px solid #10b981 !important;">
        <div class="card-body p-4 d-flex flex-column">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="rounded-circle p-3 d-inline-flex align-items-center justify-content-center" style="background-color: rgba(16, 185, 129, 0.12); color: #059669; width: 56px; height: 56px;">
              <i class="bi bi-laptop-fill fs-3"></i>
            </div>
            <span class="badge bg-success text-white fw-bold px-3 py-2 rounded-pill">PC / Lab &bull; 2.9 MB</span>
          </div>
          <h4 class="fw-bold mb-2 text-dark">Sistema Portable Completo</h4>
          <p class="text-muted small mb-3">
            <strong>Para docentes y centros de cómputo:</strong> Paquete portable con servidor Flask local, base de datos SQLite con 140 ítems y boletas oficiales para Windows.
          </p>
          <ul class="list-unstyled small text-secondary mb-4 flex-grow-1">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Banco completo de 140 preguntas MINEDUCYT</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Generador de Boletas de Calificación con NIE</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Módulo Docente y Flashcards interactivas</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Lanzador <code>iniciar_simulador.bat</code> de 1 clic</li>
          </ul>
          <a href="{{ url_for('download_system_zip') }}" class="btn btn-success w-100 py-2 fw-bold shadow-sm rounded-3">
            <i class="bi bi-file-earmark-zip-fill me-2"></i> Descargar Paquete PC (ZIP)
          </a>
        </div>
      </div>
    </div>

    <!-- OPCIÓN 3: ACTIVACIÓN Y LICENCIAS CON ADMINISTRACIÓN -->
    <div class="col-lg-4">
      <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden" style="border-top: 5px solid #16a34a !important;">
        <div class="card-body p-4 d-flex flex-column">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="rounded-circle p-3 d-inline-flex align-items-center justify-content-center" style="background-color: rgba(22, 163, 74, 0.12); color: #16a34a; width: 56px; height: 56px;">
              <i class="bi bi-shield-lock-fill fs-3"></i>
            </div>
            <span class="badge bg-success text-white fw-bold px-3 py-2 rounded-pill">Soporte Directo</span>
          </div>
          <h4 class="fw-bold mb-2 text-dark">Adquisición de Claves</h4>
          <p class="text-muted small mb-3">
            <strong>Emisión Exclusiva por Administración:</strong> Las licencias completas individuales y paquetes de aula para docentes se entregan de forma personalizada tras confirmar el pago solidario.
          </p>
          <ul class="list-unstyled small text-secondary mb-4 flex-grow-1">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Pase Estudiante Individual: <strong>$1.00 USD</strong></li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Paquete Docente (45 Alumnos): <strong>$5.00 USD</strong></li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Pagos vía Chivo Wallet (7265-9216) o Agrícola</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Despacho inmediato de claves por WhatsApp</li>
          </ul>
          <div class="d-flex flex-column gap-2 mt-auto">
            <a href="https://wa.me/50372659216?text=Hola,%20deseo%20adquirir%20claves%20del%20Simulador%20AVANZO" target="_blank" class="btn btn-success w-100 py-2 fw-bold text-white shadow-sm rounded-3">
              <i class="bi bi-whatsapp me-2"></i> Solicitar Clave por WhatsApp
            </a>
            <a href="{{ url_for('comprar_view') }}" class="btn btn-outline-secondary w-100 py-1 btn-sm fw-semibold">
              <i class="bi bi-wallet2 me-1"></i> Ver Métodos de Pago
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- VIDEO TUTORIAL DE USO OFICIAL (VOZ LORENA) -->
  <div class="card border-0 shadow-lg rounded-4 p-4 p-md-5 mb-4 text-white" style="background: linear-gradient(135deg, #040e1c 0%, #1e293b 100%); border-top: 5px solid #38bdf8 !important;">
    <div class="row align-items-center g-4">
      <div class="col-lg-5">
        <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-7">
        <span class="badge bg-info text-dark fw-bold px-3 py-1 text-uppercase mb-2">
          <i class="bi bi-mic-fill me-1 text-primary"></i> Voz Neural Salvadoreña (Lorena)
        </span>
        <h3 class="fw-bold mb-2">Video Tutorial de Uso Oficial AVANZO 2026 (74s)</h3>
        <p class="text-light opacity-90 mb-3">
          Guía práctica audiovisual de 1 minuto y 14 segundos. Muestra cómo registrar tu NIE, contestar las 20 preguntas con el cronómetro y auto-avance, repasar con flashcards y descargar tu Boleta Oficial con validación criptográfica SHA-256.
        </p>
        <div class="d-flex flex-wrap gap-2 text-secondary small mb-3">
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-film me-1 text-warning"></i> HD 720p / 30 FPS</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-clock-history me-1 text-info"></i> 1:14 Minutos</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-file-play-fill me-1 text-success"></i> MP4 Ligero (2.1 MB)</span>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <a href="{{ url_for('download_tutorial_video') }}" class="btn btn-warning fw-bold text-dark rounded-pill shadow-sm px-3">
            <i class="bi bi-download me-1"></i> Descargar Tutorial Alumnos MP4
          </a>
          <a href="{{ url_for('tutorial_view') }}" class="btn btn-outline-light rounded-pill px-3">
            <i class="bi bi-play-circle me-1"></i> Ver en Línea
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- VIDEO TUTORIAL PARA DOCENTES GUÍAS (VOZ LORENA) -->
  <div class="card border-0 shadow-lg rounded-4 p-4 p-md-5 mb-4 text-white" style="background: linear-gradient(135deg, #07162c 0%, #1e3a8a 100%); border-top: 5px solid #10b981 !important;">
    <div class="row align-items-center g-4">
      <div class="col-lg-5">
        <div class="ratio ratio-16x9 rounded-3 overflow-hidden shadow-sm border border-secondary border-opacity-50">
          <video controls playsinline preload="metadata" class="w-100 h-100">
            <source src="{{ url_for('static', filename='videos/Video_Tutorial_Docentes_AVANZO_2026.mp4') }}" type="video/mp4">
            Tu navegador no soporta reproducción de video.
          </video>
        </div>
      </div>
      <div class="col-lg-7">
        <span class="badge bg-success text-white fw-bold px-3 py-1 text-uppercase mb-2">
          <i class="bi bi-person-workspace me-1 text-warning"></i> Exclusivo para Docentes Guías
        </span>
        <h3 class="fw-bold mb-2">Video Tutorial: Perfil Docente, Calificaciones y Comisiones (1:38 min)</h3>
        <p class="text-light opacity-90 mb-3">
          Guía práctica audiovisual explicada por Lorena con música de fondo. Muestra cómo ingresar con tu Clave Maestra Docente, entregar claves individuales a tus 45 alumnos por WhatsApp, consultar el semáforo curricular, exportar notas a Excel CSV y cobrar tus comisiones del 20%.
        </p>
        <div class="d-flex flex-wrap gap-2 text-secondary small mb-3">
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-film me-1 text-warning"></i> HD 720p / 30 FPS</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-clock-history me-1 text-info"></i> 1:38 Minutos</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-file-play-fill me-1 text-success"></i> MP4 Ligero (2.9 MB)</span>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <a href="{{ url_for('download_teacher_tutorial_video') }}" class="btn btn-warning fw-bold text-dark rounded-pill shadow-sm px-3">
            <i class="bi bi-download me-1"></i> Descargar Tutorial Docente MP4
          </a>
          <a href="{{ url_for('docentes_view') }}" class="btn btn-outline-light rounded-pill px-3">
            <i class="bi bi-person-badge me-1"></i> Ir al Perfil Docente
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- VIDEO PROMOCIONAL OFICIAL -->
  <div class="card border-0 shadow-lg rounded-4 p-4 p-md-5 mb-5 text-white" style="background: linear-gradient(135deg, #07162c 0%, #1e3a8a 100%); border-top: 5px solid #f59e0b !important;">
    <div class="row align-items-center g-4">
      <div class="col-lg-8">
        <span class="badge bg-warning text-dark fw-bold px-3 py-1 text-uppercase mb-2"><i class="bi bi-camera-reels-fill me-1"></i> Material de Difusión</span>
        <h3 class="fw-bold mb-2">Video Promocional Oficial AVANZO 2026 (HD 30s)</h3>
        <p class="text-light opacity-90 mb-3">
          Clip promocional en video listo para publicar en <strong>TikTok, Instagram Reels, Estados de WhatsApp y Facebook</strong>. Presenta en 30 segundos el nuevo modo auto-avance, las 140 preguntas, la boleta con NIE y las tarifas solidarias ($1 estudiante / $5 sección docente).
        </p>
        <div class="d-flex flex-wrap gap-2 text-secondary small">
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-film me-1 text-warning"></i> HD 720p / 30 FPS</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-clock-history me-1 text-info"></i> 30 Segundos Dinámicos</span>
          <span class="badge bg-black bg-opacity-40 border border-secondary text-light"><i class="bi bi-file-play-fill me-1 text-success"></i> MP4 Universal (8.4 MB)</span>
        </div>
      </div>
      <div class="col-lg-4 text-lg-end d-flex flex-column gap-2">
        <a href="{{ url_for('download_promo_video') }}" class="btn btn-warning btn-lg fw-bold text-dark rounded-pill shadow-sm">
          <i class="bi bi-download me-2"></i> Descargar Video MP4
        </a>
      </div>
    </div>
  </div>

  <!-- INSTRUCCIONES DE USO OFFLINE -->
  <div class="card border-0 shadow-sm rounded-4 p-4 mb-4 bg-white">
    <h3 class="fw-bold text-dark mb-3"><i class="bi bi-info-circle-fill text-primary me-2"></i> ¿Cómo usar el simulador sin internet?</h3>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="d-flex gap-3">
          <div class="badge bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; font-size: 1.1rem;">1</div>
          <div>
            <h5 class="fw-bold mb-1">Descarga el Archivo</h5>
            <p class="text-muted small mb-0">Toca el botón de descarga del <strong>Simulador Móvil</strong> en tu celular o transfiérelo por Bluetooth / cable USB.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="d-flex gap-3">
          <div class="badge bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; font-size: 1.1rem;">2</div>
          <div>
            <h5 class="fw-bold mb-1">Abre en el Navegador</h5>
            <p class="text-muted small mb-0">Toca el archivo descargado y selecciona abrir con <strong>Google Chrome</strong>, <strong>Safari</strong> o <strong>Edge</strong>.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="d-flex gap-3">
          <div class="badge bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; font-size: 1.1rem;">3</div>
          <div>
            <h5 class="fw-bold mb-1">¡Practica Ilimitado!</h5>
            <p class="text-muted small mb-0">El simulador funciona de forma 100% autónoma. Puedes activar el modo avión y practicar tantas veces como quieras.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}