{% extends 'layout/base.twig' %}
{% block title %}{% endblock %}

{% set institucion = identidad('institucion.nombre_legal') %}
{% set unidad = identidad('institucion.unidad') %}

{% block clase_main %}portada-pagina{% endblock %}

{% block content %}

  {# ── Hero ─────────────────────────────────────────────────────────────────
     Mismo tratamiento que la pantalla de acceso —fondo de marca, retícula, titular a
     dos tonos— para que entrar y llegar se sientan del mismo sitio. #}
  {# Cada bloque de la portada es una banda a sangre que centra su propio contenido: es
     lo que hace que el hero marque el comienzo en vez de parecer una tarjeta más. #}
  <section class="franja franja-oscura hero">
    <div class="hero-fondo" aria-hidden="true"></div>
    <div class="franja-cuerpo hero-reja">
    <div class="hero-cuerpo">
      {% if institucion %}
        <p class="hero-eyebrow">
          <span class="punto" aria-hidden="true"></span>
          {{ unidad|default(institucion) }}
        </p>
      {% endif %}

      <h1 class="hero-titular">
        Un certificado que<br>
        <em>alguien puede verificar.</em>
      </h1>

      <p class="hero-bajada">
        Cursos en línea a tu ritmo, con evaluación al final y un documento que lleva el
        respaldo de {% if institucion %}{{ institucion }}{% else %}una institución acreditada{% endif %}.
        Tómalos sueltos o encadénalos hasta una certificación.
      </p>

      {# Las dos salidas del hero son las dos cosas a las que llega alguien sin cuenta:
         mirar el catálogo, o comprobar un folio que tiene en la mano. «Crear cuenta» ya
         está en la barra y al pie; repetirlo acá gastaba el segundo botón. #}
      <div class="hero-acciones">
        {% if autenticado %}
          <a class="btn btn-principal btn-grande" href="{{ url('/mis-cursos') }}">Seguir estudiando</a>
        {% else %}
          <a class="btn btn-principal btn-grande" href="{{ url('/cursos') }}">Ver el catálogo</a>
        {% endif %}
        <a class="btn btn-grande btn-sobre-oscuro" href="{{ url('/verificar') }}">Verificar un certificado</a>
      </div>

      {# Cuatro cifras y no dos: las dos primeras hablan de la oferta y las dos últimas de
         resultados. Un catálogo puede tener seis cursos y cero egresados, y esa
         diferencia es justo lo que mira alguien antes de inscribirse. #}
      {% if vitrina.cursos > 0 %}
        <dl class="hero-cifras">
          <div><dt>{{ vitrina.cursos }}</dt><dd>curso{{ vitrina.cursos == 1 ? '' : 's' }} activo{{ vitrina.cursos == 1 ? '' : 's' }}</dd></div>
          {% if certificaciones %}
            <div><dt>{{ certificaciones|length }}</dt><dd>certificacion{{ certificaciones|length == 1 ? '' : 'es' }}</dd></div>
          {% endif %}
          {% if vitrina.alumnos > 0 %}
            <div><dt>{{ vitrina.alumnos }}</dt><dd>alumno{{ vitrina.alumnos == 1 ? '' : 's' }} inscrito{{ vitrina.alumnos == 1 ? '' : 's' }}</dd></div>
          {% endif %}
          {% if emitidos > 0 %}
            <div><dt>{{ emitidos }}</dt><dd>certificado{{ emitidos == 1 ? '' : 's' }} emitido{{ emitidos == 1 ? '' : 's' }}</dd></div>
          {% endif %}
        </dl>
      {% endif %}
    </div>

    {# El documento se enseña. Se compra lo que se ve, y hasta ahora el certificado no
       aparecía en ninguna parte hasta que alguien lo obtenía. Los datos son de muestra
       —es un ejemplo del documento, no el de nadie. #}
    <aside class="hero-muestra" aria-label="Ejemplo del certificado">
      <article class="muestra-cert">
        <header>
          <span class="muestra-institucion">
            {{ institucion|default('Institución acreditada') }}
          </span>
          {% if identidad('institucion.sigla') %}
            <span class="muestra-sigla">{{ identidad('institucion.sigla') }}</span>
          {% endif %}
        </header>

        <div class="muestra-cuerpo">
          <span class="muestra-rotulo">Certifica que</span>
          <span class="muestra-nombre">Nombre del egresado</span>
          <p class="muestra-texto">
            aprobó el <strong>{{ certificaciones ? certificaciones[0].titulo : 'programa' }}</strong>{% if certificaciones and certificaciones[0].horas %}, de {{ certificaciones[0].horas }} horas{% endif %}.
          </p>
        </div>

        <footer>
          <div class="muestra-firma">
            <span class="muestra-linea" aria-hidden="true"></span>
            <span>{{ unidad|default('Dirección académica') }}</span>
          </div>
          <div class="muestra-folio">
            <span class="folio">SC-2026-XXXXXX</span>
            <span>verificable en línea</span>
          </div>
        </footer>
      </article>
    </aside>
    </div>
  </section>

  {# ── Por qué el documento vale ──
     Responde la duda de quien mira: ¿esto es un diploma de asistencia? #}
  <section class="franja franja-clara">
   <div class="franja-cuerpo seccion respaldo">
    <div class="respaldo-titulo">
      <p class="eyebrow">Lo que te llevas</p>
      <h2>No es un diploma de asistencia</h2>
    </div>

    <div class="respaldo-puntos">
      <div>
        {% include 'parciales/icono.twig' with {n: 'evaluacion', px: 22} %}
        <h3>Hay una evaluación</h3>
        <p>
          Cada curso termina con una prueba corregida contra un banco de preguntas, con
          nota mínima. Sin aprobarla no hay certificado.
        </p>
      </div>

      <div>
        {% include 'parciales/icono.twig' with {n: 'buscar', px: 22} %}
        <h3>Cualquiera puede comprobarlo</h3>
        <p>
          El folio lleva a una página pública donde un empleador confirma que el documento
          es auténtico, sin tener que llamar a nadie.
        </p>
      </div>

      <div>
        {% include 'parciales/icono.twig' with {n: 'certificado', px: 22} %}
        <h3>{% if institucion %}Lo respalda una universidad{% else %}Lo respalda una institución{% endif %}</h3>
        <p>
          {% if institucion %}
            Lleva el nombre y el sello de {{ identidad('institucion.sigla')|default(institucion) }}.
            No es una insignia de plataforma.
          {% else %}
            Lleva el nombre y el sello de la institución que lo emite, no una insignia de
            plataforma.
          {% endif %}
        </p>
      </div>
    </div>
   </div>
  </section>

  {# ── Certificaciones ──────────────────────────────────────────────────────
     Van antes que los cursos a propósito: es la respuesta a «¿a qué llego?», que es lo
     que se pregunta antes de elegir por dónde empezar. #}
  {% if certificaciones %}
    <section class="franja franja-tenue">
     <div class="franja-cuerpo seccion">
      <header class="seccion-cabecera">
        <div>
          <p class="eyebrow">Rutas de certificación</p>
          <h2>Empieza por un curso, termina con un sello</h2>
          <p class="seccion-bajada">Cada ruta se arma con varios cursos. Los vas completando a tu ritmo.</p>
        </div>
        <a class="enlace-flecha" href="{{ url('/cursos?vista=certificaciones') }}">
          Ver las {{ certificaciones|length }} rutas
        </a>
      </header>

      <div class="grid-certificaciones">
        {% for cert in certificaciones %}
          {# La ruta enseña de qué se compone, numerada y con las horas de cada curso.
             «Tres cursos» es una cifra; los tres títulos son la decisión. #}
          <article class="cert-card cert-card{{ cert.color }}">
            <p class="cert-card-meta">
              <span class="pastilla">
                {{ cert.total_cursos }} curso{{ cert.total_cursos == 1 ? '' : 's' }}
                {%- if cert.horas %} · {{ cert.horas }} h{% endif %}
              </span>
              {% if cert.nivel %}<span>{{ cert.nivel|capitalize }}</span>{% endif %}
            </p>

            <h3><a href="{{ url('/certificaciones/' ~ cert.slug) }}">{{ cert.titulo }}</a></h3>
            {% if cert.descripcion %}<p class="cert-card-texto">{{ cert.descripcion|recortar(140) }}</p>{% endif %}

            {% if cursosDeRuta[cert.id] is defined %}
              <ol class="cert-card-cursos">
                {% for curso in cursosDeRuta[cert.id] %}
                  <li>
                    <span class="cert-card-num">{{ loop.index }}</span>
                    <a href="{{ url('/cursos/' ~ curso.slug) }}">{{ curso.titulo }}</a>
                    {% if curso.horas %}<span class="detalle">{{ curso.horas }} h</span>{% endif %}
                  </li>
                {% endfor %}
              </ol>
            {% endif %}

            <a class="btn btn-ancho {{ loop.first ? 'btn-principal' : '' }}"
               href="{{ url('/certificaciones/' ~ cert.slug) }}">Ver la ruta</a>
          </article>
        {% endfor %}
      </div>
     </div>
    </section>
  {% endif %}

  {# ── Cursos ───────────────────────────────────────────────────────────── #}
  {% if cursos is not empty %}
    <section class="franja franja-clara">
     <div class="franja-cuerpo seccion">
      <header class="seccion-cabecera">
        <div>
          <p class="eyebrow">Por dónde empezar</p>
          <h2>Cursos disponibles</h2>
          <p class="seccion-bajada">Todos se pueden tomar por separado.</p>
        </div>
        <a class="enlace-flecha" href="{{ url('/cursos') }}">Ver el catálogo</a>
      </header>

      {# La misma tarjeta del catálogo, para que un curso se vea igual en las tres
         pantallas donde aparece. #}
      <div class="grid-cursos">
        {% for curso in cursos|slice(0, 3) %}
          {% include 'parciales/tarjeta-curso.twig' with {
            curso: curso,
            certs: certsPorCurso[curso.id]|default([]),
          } %}
        {% endfor %}
      </div>
     </div>
    </section>
  {% endif %}

  {# ── Cómo funciona, con el verificador al lado ─────────────────────────
     El verificador sube a la portada. Quien llega con un folio en la mano no viene a
     explorar el catálogo: viene a comprobar un documento, y hasta ahora tenía que
     encontrar un enlace en el pie. #}
  <section class="franja franja-tenue">
   <div class="franja-cuerpo como-y-verificar">
  <section class="seccion seccion-como">
    <header class="seccion-cabecera">
      <div>
        <p class="eyebrow">Cómo funciona</p>
        <h2>Tres pasos, sin fechas de inicio</h2>
      </div>
    </header>

    {# Numerados porque es una secuencia real: el orden importa y el lector lo va a seguir. #}
    <ol class="pasos">
      <li>
        <span class="paso-numero">1</span>
        <h3>Eliges un curso</h3>
        <p>Videos, lecturas, actividades interactivas y simuladores. Se abre cuando quieras
           y guarda por dónde ibas.</p>
      </li>
      <li>
        <span class="paso-numero">2</span>
        <h3>Rindes la evaluación</h3>
        <p>Al final de cada curso, con nota mínima e intentos. Se corrige sola: no esperas
           a que nadie revise.</p>
      </li>
      <li>
        <span class="paso-numero">3</span>
        <h3>Recibes tu certificado</h3>
        <p>Se emite al terminar, con folio y una dirección pública donde cualquiera puede
           comprobar que es auténtico.</p>
      </li>
    </ol>
  </section>

  <aside class="verificar-portada">
    <h2>
      {% include 'parciales/icono.twig' with {n: 'certificado', px: 18} %}
      Verificar un certificado
    </h2>
    <p>Ingresa el folio impreso en el documento. No necesitas cuenta.</p>

    <form method="get" action="{{ url('/verificar') }}">
      <label for="folio-portada">Folio</label>
      <input type="text" id="folio-portada" name="codigo" autocomplete="off"
             placeholder="SC-2026-XXXXXX" spellcheck="false">
      <button type="submit" class="btn btn-principal btn-ancho">Verificar</button>
    </form>

    {% if emitidos > 0 %}
      <p class="verificar-portada-nota">
        <span class="ficha-estado-punto" aria-hidden="true"></span>
        {{ emitidos }} documento{{ emitidos == 1 ? '' : 's' }} emitido{{ emitidos == 1 ? '' : 's' }} y vigente{{ emitidos == 1 ? '' : 's' }}.
        Un folio anulado se muestra como tal, no desaparece.
      </p>
    {% endif %}
  </aside>
   </div>
  </section>

  {# ── Cierre ───────────────────────────────────────────────────────────── #}
  {% if not autenticado %}
    <section class="franja franja-clara">
     <div class="franja-cuerpo cierre">
      {# El registro es abierto: mandar a pedir una cuenta por correo describía la
         plataforma de antes, y era lo último que leía alguien que venía a empezar. #}
      <div class="cierre-cuerpo">
        <h2>¿Empezamos?</h2>
        <p>
          Crea tu cuenta y empieza hoy: los cursos no tienen fecha de inicio.
          ¿Ya tienes una? <a href="{{ url('/entrar') }}">Entra al campus</a>.
        </p>
      </div>
      <a class="btn btn-principal btn-grande" href="{{ url('/registrarse') }}">Crear mi cuenta</a>
     </div>
    </section>
  {% endif %}
{% endblock %}