// Función de escape de seguridad para inputs de usuario
function escapeRegExp(cadena) {
  return cadena.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 1. Componente Resaltador de Términos (Search Highlighter)
function resaltarTexto(textoOriginal, consultaUsuario) {
  if (!consultaUsuario || consultaUsuario.trim() === "") {
    return textoOriginal;
  }

  const terminoSeguro = escapeRegExp(consultaUsuario.trim());
  // Bandera 'gi': global y sin distinguir mayúsculas/minúsculas
  const regex = new RegExp(`(${terminoSeguro})`, 'gi');

  // Envolvemos cada coincidencia en la etiqueta HTML5 semántica <mark>
  return textoOriginal.replace(regex, '<mark class="bg-warning">$1</mark>');
}

const parrafo = "En Kilopolis Academia aprenderás desarrollo frontend con JavaScript, React y Node.js.";

console.log("--- 1. Resaltado de Texto Dinámico ---");
console.log("Consulta: 'javascript'");
console.log(resaltarTexto(parrafo, "javascript"));

console.log("\nConsulta: 'kilopolis'");
console.log(resaltarTexto(parrafo, "kilopolis"));

// 2. Máscara de Formateo de Teléfono en Tiempo Real
function aplicarMascaraTelefono(valor) {
  // 1. Extraemos solo los dígitos
  const digitos = valor.replace(/\D/g, "").slice(0, 10);
  
  // 2. Aplicamos formato (XXX) XXX-XXXX con grupos
  const match = digitos.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
  if (!match) return valor;

  if (!match[2]) return match[1];
  if (!match[3]) return `(${match[1]}) ${match[2]}`;
  return `(${match[1]}) ${match[2]}-${match[3]}`;
}

console.log("\n--- 2. Máscara de Teléfono Dinámica ---");
console.log("Entrada '300':       ", aplicarMascaraTelefono("300"));
console.log("Entrada '300123':    ", aplicarMascaraTelefono("300123"));
console.log("Entrada '3001234567':", aplicarMascaraTelefono("3001234567"));