<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Métodos Funcionales de Arrays</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-catalogo { max-width: 580px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .filtros button { padding: 8px 14px; border: 1px solid #94a3b8; background: #f1f5f9; border-radius: 6px; cursor: pointer; font-weight: 600; }
    .filtros button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .resumen { background: #f0fdf4; border: 1px solid #86efac; color: #166534; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-weight: 600; }
    ul { list-style: none; padding: 0; margin: 0; }
    li { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
    li:last-child { border-bottom: none; }
    .tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: #e0f2fe; color: #0369a1; font-weight: bold; }
  </style>
</head>
<body>

  <div class="card-catalogo">
    <h3 style="margin-top: 0; color: #0f172a;">Catálogo Académico Kilopolis</h3>

    <div class="filtros">
      <button onclick="mostrarTodos()">Todos</button>
      <button onclick="filtrarNivel('Básico')">Solo Básico</button>
      <button onclick="filtrarNivel('Avanzado')">Solo Avanzado</button>
      <button onclick="aplicarDescuento(0.8)">Aplicar 20% Dto.</button>
    </div>

    <div class="resumen" id="caja-resumen">Cargando catálogo...</div>

    <ul id="lista-cursos"></ul>

    <script>
      const cursosBase = [
        { id: 1, titulo: "HTML5 Semántico y Accesibilidad", precio: 30, nivel: "Básico" },
        { id: 2, titulo: "CSS3 Flexbox y CSS Grid", precio: 40, nivel: "Básico" },
        { id: 3, titulo: "JavaScript ES6+ Asíncrono", precio: 50, nivel: "Avanzado" },
        { id: 4, titulo: "PHP 8.3 & Arquitectura MVC", precio: 60, nivel: "Avanzado" }
      ];

      let cursosVisibles = [...cursosBase];

      function renderizar() {
        const lista = document.getElementById('lista-cursos');
        const resumen = document.getElementById('caja-resumen');

        // reduce para calcular la sumatoria
        const total = cursosVisibles.reduce((acc, c) => acc + c.precio, 0);

        resumen.textContent = `Cursos listados: ${cursosVisibles.length} · Valor total del grupo: $${total} USD`;

        lista.innerHTML = cursosVisibles.map(c => `
          <li>
            <span><strong>${c.titulo}</strong> <span class="tag">${c.nivel}</span></span>
            <span style="font-weight: 600; color: #0f172a;">$${c.precio} USD</span>
          </li>
        `).join('');
      }

      function mostrarTodos() {
        cursosVisibles = [...cursosBase];
        renderizar();
      }

      function filtrarNivel(nivel) {
        // filter para seleccionar por condición
        cursosVisibles = cursosBase.filter(c => c.nivel === nivel);
        renderizar();
      }

      function aplicarDescuento(factor) {
        // map para recalcular precios inmutablemente
        cursosVisibles = cursosVisibles.map(c => ({
          ...c,
          precio: Math.round(c.precio * factor)
        }));
        renderizar();
      }

      renderizar();
    </script>
  </div>

</body>
</html>