<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Funciones Flecha en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-fn { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 6px 0 12px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .total-box { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; padding: 14px; border-radius: 6px; font-weight: bold; font-size: 1.1rem; }
  </style>
</head>
<body>

  <div class="card-fn">
    <h3 style="margin-top: 0; color: #0f172a;">Calculadora con Arrow Functions</h3>

    <label for="precio">Precio Original ($ USD):</label>
    <input type="number" id="precio" value="100">

    <label for="descuento">Porcentaje de Descuento (%):</label>
    <input type="number" id="descuento" value="20">

    <button onclick="calcular()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Calcular con Función Flecha
    </button>

    <div id="resultado-calculo" style="margin-top: 15px;"></div>

    <script>
      // Función Flecha concisa con retorno implícito:
      const calcularPrecioFinal = (precio, descPorcentaje = 0) => 
        precio - (precio * (descPorcentaje / 100));

      function calcular() {
        const precio = Number(document.getElementById('precio').value);
        const desc = Number(document.getElementById('descuento').value);

        const total = calcularPrecioFinal(precio, desc);

        document.getElementById('resultado-calculo').innerHTML = `
          <div class="total-box">
            Precio Final a Pagar: $${total.toFixed(2)} USD
          </div>
        `;
      }

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

</body>
</html>