Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Arrays en JS — Ejemplo 4</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 700px; }
        h2    { color: #333; }
        h3    { margin: 20px 0 8px; font-size: 14px; color: #555; text-transform: uppercase; letter-spacing: 1px; }
        table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
        th    { background: #F7DF1E; color: #333; padding: 8px 12px; text-align: left; font-size: 13px; }
        td    { padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 13px; }
        .sin-stock { color: #dc2626; font-weight: bold; }
        .con-stock { color: #059669; }
        .stat { display: inline-block; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; padding: 10px 16px; margin: 4px; font-size: 14px; }
        .stat strong { display: block; font-size: 20px; color: #F7DF1E; text-shadow: 0 0 1px #333; color: #b8a000; }
    </style>
</head>
<body>

<h2>Sistema de Productos — Arrays completo</h2>

<h3>Catálogo completo</h3>
  <table id="tabla-catalogo"></table>

<h3>Tech disponible — ordenado por precio</h3>
  <table id="tabla-tech"></table>

<h3>Estadísticas</h3>
  <div id="stats"></div>

<h3>Top 3 más caros</h3>
  <table id="tabla-top3"></table>

// Helper para construir filas de tabla
    function crearFila(...celdas) {
        return `<tr>${celdas.map(c => `<td>${c}</td>`).join("")}</tr>`;
    }
    function crearEncabezado(...celdas) {
        return `<tr>${celdas.map(c => `<th>${c}</th>`).join("")}</tr>`;
    }

// ── Catálogo completo ─────────────────────────────────────────────────
    const tablaCatalogo = document.getElementById("tabla-catalogo");
    tablaCatalogo.innerHTML = crearEncabezado("Nombre", "Categoría", "Precio", "Stock");
    productos.forEach(p => {
        const stockHTML = p.stock === 0
            ? `<span class="sin-stock">SIN STOCK</span>`
            : `<span class="con-stock">${p.stock} uds</span>`;
        tablaCatalogo.innerHTML += crearFila(p.nombre, p.categoria, `$${p.precio}`, stockHTML);
    });

// ── Tech disponible ordenado por precio ───────────────────────────────
    const techDisp = productos
        .filter(p => p.categoria === "tech" && p.stock > 0)
        .sort((a, b) => a.precio - b.precio);

// ── Estadísticas con reduce ────────────────────────────────────────────
    const totalInventario  = productos.reduce((acc, p) => acc + p.precio * p.stock, 0);
    const cantDisponibles  = productos.filter(p => p.stock > 0).length;
    const precioPromedio   = Math.round(productos.reduce((acc, p) => acc + p.precio, 0) / productos.length);
    const masCaro          = productos.reduce((max, p) => p.precio > max.precio ? p : max, productos[0]);
    const masBarato        = productos.reduce((min, p) => p.precio < min.precio ? p : min, productos[0]);

document.getElementById("stats").innerHTML = `
        <div class="stat"><strong>$${totalInventario.toLocaleString()}</strong>Valor total inventario</div>
        <div class="stat"><strong>${cantDisponibles}/${productos.length}</strong>Productos disponibles</div>
        <div class="stat"><strong>$${precioPromedio}</strong>Precio promedio</div>
        <div class="stat"><strong>${masCaro.nombre}</strong>Más caro ($${masCaro.precio})</div>
        <div class="stat"><strong>${masBarato.nombre}</strong>Más barato ($${masBarato.precio})</div>
    `;

// ── Top 3 más caros ───────────────────────────────────────────────────
    const top3 = [...productos]
        .sort((a, b) => b.precio - a.precio)
        .slice(0, 3);

</body>
</html>