Hola amigos estoy trabajando con un ejercicio para calcular el pago de estacionamiento por horas, y sólo estoy trabajando con la primera condición pero no me da el resultado, no deseo trabajar con onclick en los inputs , y por eso estoy usando el evento DOMContentLoaded y llamando otra función como parámetro para ahi capturar mi botón Calcular y lo asocio con el addEventListener, pero algo esta mal que no me da el resultado, estaré muy agradecido con su ayuda amigos, gracias.

<!--
       El dueño de un estacionamiento requiere un programa que le permita determinar cuánto debe cobrar por el uso del estacionamiento a sus clientes. Las tarifas que se tienen son las siguientes:
       Las dos primeras horas a $5.00 c/u. Las siguientes tres a $4.00 c/u. Las cinco siguientes a $3.00 c/u. Después de diez horas el costo por cada una es de dos pesos.
   -->
   <form action="" class="frm">
       <fieldset class="fieldset">
           <legend class="legend">Tarifa Estacionamiento</legend>
           <br>
           <label for="name">Nombres: </label><input class="inputText" type="text" name="name" id="name"><br><br>
           <label for="lastname">Apellidos: </label><input class="inputText" type="text" name="lastname" id="lastname"><br><br>
           <label for="cant-hours">Cantidad horas: </label><input class="inputText" type="text" name="cant-hours" id="cant-hours"><br><br>
           <label for="pago-hour">Pago hora: </label><input class="inputText" type="text" name="pago-hour" id="pago-hour" ><br><br>
           <div>
               <button class="btn" id="btnCalcular" type="button">CALCULAR</button>
               <button class="btn" id="btnLimpiar" type="reset">LIMPIAR</button>
           </div>
       </fieldset>
       <br>
       <hr>   
   </form>

   <div class="results" id="results">
       <label class="etiqueta" id="">Sr(a)</label> <label class="answer" id="nombres-completos"></label>
       <label class="etiqueta" id="">Cantidad de horas:</label> <label class="answer" id="hrs-trabajadas"></label>
       <label class="etiqueta" id="">Pago por hora:</label> <label class="answer" id="hrs-extras"></label>
       <label class="etiqueta" id="">Pago total:</label> <label class="answer" id="pagoTotal"></label>
   </div>

  *,
*::before,
*::after{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body{
   font-family: sans-serif;
}
.frm{
   margin: 2rem 2rem 0;
}
.fieldset{
   width: 30%;
}
.fieldset div{
   display: flex;
   justify-content: space-evenly;
   width: 30%;
   margin-left: auto;
   margin-right: auto;
}
.inputText{
   width: 60%;
   padding: .3em;
   font: 400 1rem sans-serif; 
}
label{
  display: inline-block;
  width: 150px;
  text-align: right;
  margin-right: 1em;
}
.btn{
   display: block;
   padding: .5em;
   margin: 0 auto 1rem;
   box-shadow: 0 2px 2px rgba(0,0,0,.6);
}
.results{
   width: 23%;
   margin-top: 2rem;
   margin-left: 2rem;
   display: none;
}
.results .etiqueta{
   width: 190px;
   text-align: left;
}
.results .answer, .etiqueta{
   display: inline-block;
}
.results .answer{
   width: 48%;
   text-align: left;
}

document.addEventListener('DOMContentLoaded', inicializar)

const inicializar = () => {
   let btnCalc = document.getElementById('btnCalcular')
   btnCalc.addEventListener('click', calcular)
}

const calcular = () => {
   let name = document.getElementById('name')
   let apel = document.getElementById('lastname')
   let ch = document.getElementById('cant-hours')
   let ph = document.getElementById('pago-hour')
   let results = document.getElementById('results')
   var tp

   if(ch < 3){
       ph = 5
       tp = `${ch.value * ph.value}`
   }
   
   let stp = document.getElementById('pagoTotal')
   stp.textContent = tp
   results.style.display = 'block'

}