Acordeón Interactivo de Preguntas Frecuentes

/* Estilos Principales */
.faq-section {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 60px 0;
  background-color: #f8fafc;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Encabezado */
.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 16px;
}

.faq-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

/* Controles de Búsqueda y Filtro */
.faq-controls {
  margin-bottom: 30px;
}

.search-container {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 14px 20px;
  padding-right: 45px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.search-clear {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.search-clear.visible {
  opacity: 1;
}

.search-clear:hover {
  color: #64748b;
}

.search-clear svg {
  width: 18px;
  height: 18px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-btn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.filter-btn.active {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

/* Información de Resultados */
.results-info {
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #64748b;
}

/* Acordeón de FAQ */
.faq-accordion {
  margin-bottom: 40px;
}

.faq-item {
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a202c;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #f8fafc;
}

.question-text {
  flex: 1;
  padding-right: 20px;
}

.question-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .question-icon {
  transform: rotate(180deg);
  color: #4f46e5;
}

.faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  padding: 0 20px 20px;
  max-height: 1000px; /* Valor grande para permitir cualquier contenido */
}

.faq-answer p {
  margin-top: 0;
  margin-bottom: 16px;
  color: #334155;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul, .faq-answer ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 20px;
}

.faq-answer li {
  margin-bottom: 8px;
}

.faq-answer a {
  color: #4f46e5;
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
}

/* Diseños Especiales para Contenido */
.requirements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.requirement-category h4 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 10px;
  color: #1a202c;
}

.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.pricing-tier {
  background: #f8fafc;
  border-radius: 6px;
  padding: 15px;
  text-align: center;
}

.pricing-tier h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #1a202c;
}

.plan-changes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.plan-change {
  background: #f8fafc;
  border-radius: 6px;
  padding: 15px;
}

.plan-change h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #1a202c;
}

/* Resaltado de Búsqueda */
.highlight {
  background-color: #fef9c3;
  padding: 2px 0;
  border-radius: 2px;
}

/* Elementos Ocultos */
.faq-item.hidden {
  display: none;
}

/* Mensaje de No Resultados */
.no-results {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.no-results-icon {
  width: 48px;
  height: 48px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.no-results h3 {
  font-size: 1.25rem;
  color: #1a202c;
  margin: 0 0 8px;
}

.no-results p {
  color: #64748b;
  margin: 0 0 20px;
}

.btn-reset-search {
  padding: 10px 20px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-reset-search:hover {
  background: #4338ca;
}

/* Pie de FAQ */
.faq-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e2e8f0;
}

.faq-footer p {
  font-size: 1.125rem;
  color: #1a202c;
  margin: 0 0 20px;
}

.support-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1a202c;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.support-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.support-btn svg {
  width: 20px;
  height: 20px;
}

/* Diseño Responsivo */
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 0;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    font-size: 1rem;
    padding: 16px;
  }
  
  .faq-question[aria-expanded="true"] + .faq-answer {
    padding: 0 16px 16px;
  }
  
  .requirements-grid,
  .pricing-tiers,
  .plan-changes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .filter-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-btn {
    text-align: center;
  }
  
  .support-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .support-btn {
    justify-content: center;
  }
}

/* Estilos para Impresión */
@media print {
  .faq-section {
    padding: 0;
    background: white;
  }
  
  .faq-controls,
  .search-clear,
  .filter-buttons,
  .question-icon,
  .faq-footer {
    display: none;
  }
  
  .faq-item {
    break-inside: avoid;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 20px;
    page-break-inside: avoid;
  }
  
  .faq-question {
    font-weight: 700;
    padding: 0 0 10px 0;
  }
  
  .faq-answer {
    max-height: none !important;
    padding: 0 0 20px 0 !important;
    overflow: visible;
  }
}

/**
 * Controlador de Acordeón FAQ
 * Maneja la funcionalidad de acordeón, búsqueda, filtrado y navegación por teclado
 */
class FAQController {
  constructor() {
    // Elementos DOM
    this.accordion = document.getElementById('faqAccordion');
    this.faqItems = document.querySelectorAll('.faq-item');
    this.faqQuestions = document.querySelectorAll('.faq-question');
    this.searchInput = document.getElementById('faqSearch');
    this.searchClear = document.getElementById('searchClear');
    this.filterButtons = document.querySelectorAll('.filter-btn');
    this.resultsCount = document.getElementById('resultsCount');
    this.noResults = document.getElementById('noResults');
    this.resetSearch = document.getElementById('resetSearch');
    
    // Estado
    this.activeFilter = 'all';
    this.searchTerm = '';
    this.visibleItems = this.faqItems.length;
    
    // Inicializar
    this.init();
  }
  
  /**
   * Inicializa el controlador y configura los event listeners
   */
  init() {
    // Configurar event listeners para preguntas de acordeón
    this.faqQuestions.forEach(question => {
      question.addEventListener('click', () => this.toggleFAQ(question));
      question.setAttribute('aria-expanded', 'false');
    });
    
    // Configurar event listeners para búsqueda
    this.searchInput.addEventListener('input', () => this.handleSearch());
    this.searchClear.addEventListener('click', () => this.clearSearch());
    
    // Configurar event listeners para filtros
    this.filterButtons.forEach(button => {
      button.addEventListener('click', () => this.setActiveFilter(button.dataset.filter));
    });
    
    // Configurar event listener para restablecer búsqueda
    this.resetSearch.addEventListener('click', () => this.clearSearch());
    
    // Configurar navegación por teclado
    this.setupKeyboardNavigation();
    
    // Actualizar contador de resultados inicial
    this.updateResultsInfo();
  }
  
  /**
   * Alterna el estado de apertura/cierre de un elemento FAQ
   * @param {HTMLElement} question - El elemento de pregunta a alternar
   */
  toggleFAQ(question) {
    const isExpanded = question.getAttribute('aria-expanded') === 'true';
    
    // Si está configurado para cerrar otros al abrir uno nuevo
    if (!isExpanded && this.shouldCloseOthers()) {
      this.closeAllFAQs();
    }
    
    // Alternar el estado actual
    question.setAttribute('aria-expanded', !isExpanded);
    
    // Rastrear interacción
    this.trackFAQInteraction(question, isExpanded ? 'close' : 'open');
  }
  
  /**
   * Cierra todos los elementos FAQ
   */
  closeAllFAQs() {
    this.faqQuestions.forEach(question => {
      question.setAttribute('aria-expanded', 'false');
    });
  }
  
  /**
   * Determina si se deben cerrar otros elementos al abrir uno nuevo
   * @returns {boolean} - Verdadero si se deben cerrar otros elementos
   */
  shouldCloseOthers() {
    // Esta configuración podría venir de un atributo de datos o una preferencia del usuario
    return true; // Por defecto, cerrar otros al abrir uno nuevo
  }
  
  /**
   * Establece el filtro activo y actualiza la visualización
   * @param {string} filter - La categoría de filtro a activar
   */
  setActiveFilter(filter) {
    // Actualizar estado
    this.activeFilter = filter;
    
    // Actualizar clases de botones
    this.filterButtons.forEach(button => {
      if (button.dataset.filter === filter) {
        button.classList.add('active');
      } else {
        button.classList.remove('active');
      }
    });
    
    // Aplicar filtrado
    this.applyFiltersAndSearch();
    
    // Rastrear cambio de filtro
    this.trackFilterChange(filter);
  }
  
  /**
   * Maneja el evento de entrada de búsqueda
   */
  handleSearch() {
    // Obtener término de búsqueda y actualizar estado
    this.searchTerm = this.searchInput.value.trim().toLowerCase();
    
    // Mostrar/ocultar botón de borrar
    if (this.searchTerm.length > 0) {
      this.searchClear.classList.add('visible');
    } else {
      this.searchClear.classList.remove('visible');
    }
    
    // Aplicar filtrado
    this.applyFiltersAndSearch();
    
    // Rastrear búsqueda si tiene al menos 3 caracteres
    if (this.searchTerm.length >= 3) {
      this.trackSearch(this.searchTerm);
    }
  }
  
  /**
   * Aplica filtros y búsqueda a los elementos FAQ
   */
  applyFiltersAndSearch() {
    let visibleCount = 0;
    
    this.faqItems.forEach(item => {
      const category = item.dataset.category;
      const questionText = item.querySelector('.question-text').textContent.toLowerCase();
      const answerText = item.querySelector('.faq-answer').textContent.toLowerCase();
      const content = `${questionText} ${answerText}`;
      
      // Verificar si coincide con el filtro de categoría
      const matchesFilter = this.activeFilter === 'all' || category === this.activeFilter;
      
      // Verificar si coincide con el término de búsqueda
      const matchesSearch = this.searchTerm === '' || content.includes(this.searchTerm);
      
      // Mostrar/ocultar según coincidencias
      if (matchesFilter && matchesSearch) {
        item.classList.remove('hidden');
        visibleCount++;
        
        // Resaltar términos de búsqueda si hay una búsqueda activa
        if (this.searchTerm !== '') {
          this.highlightSearchTerm(item, this.searchTerm);
        } else {
          this.removeHighlights(item);
        }
      } else {
        item.classList.add('hidden');
        // Cerrar si estaba abierto
        const question = item.querySelector('.faq-question');
        if (question.getAttribute('aria-expanded') === 'true') {
          question.setAttribute('aria-expanded', 'false');
        }
      }
    });
    
    // Actualizar estado y UI
    this.visibleItems = visibleCount;
    this.updateResultsInfo();
    this.toggleNoResultsMessage(visibleCount === 0);
  }
  
  /**
   * Resalta el término de búsqueda en el contenido
   * @param {HTMLElement} item - El elemento FAQ
   * @param {string} term - El término a resaltar
   */
  highlightSearchTerm(item, term) {
    // Primero eliminar resaltados existentes
    this.removeHighlights(item);
    
    // Función para resaltar texto en un nodo
    const highlightTextInNode = (node) => {
      if (node.nodeType === 3) { // Nodo de texto
        const content = node.textContent.toLowerCase();
        if (content.includes(term)) {
          const regex = new RegExp(`(${term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')})`, 'gi');
          const fragment = document.createDocumentFragment();
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = node.textContent.replace(regex, '<span class="highlight">$1</span>');
          
          while (tempDiv.firstChild) {
            fragment.appendChild(tempDiv.firstChild);
          }
          
          node.parentNode.replaceChild(fragment, node);
          return true;
        }
      } else if (node.nodeType === 1 && node.nodeName !== 'SCRIPT' && node.nodeName !== 'STYLE') { // Elemento
        Array.from(node.childNodes).forEach(child => highlightTextInNode(child));
      }
      return false;
    };
    
    // Resaltar en pregunta y respuesta
    const question = item.querySelector('.question-text');
    const answer = item.querySelector('.faq-answer');
    
    highlightTextInNode(question);
    highlightTextInNode(answer);
  }
  
  /**
   * Elimina resaltados de un elemento
   * @param {HTMLElement} item - El elemento FAQ
   */
  removeHighlights(item) {
    const highlights = item.querySelectorAll('.highlight');
    highlights.forEach(highlight => {
      const parent = highlight.parentNode;
      parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
      parent.normalize();
    });
  }
  
  /**
   * Actualiza el contador de resultados
   */
  updateResultsInfo() {
    if (this.searchTerm !== '') {
      this.resultsCount.textContent = `Mostrando ${this.visibleItems} resultado${this.visibleItems !== 1 ? 's' : ''} para "${this.searchTerm}"`;
    } else if (this.activeFilter !== 'all') {
      const filterName = this.getFilterName(this.activeFilter);
      this.resultsCount.textContent = `Mostrando ${this.visibleItems} pregunta${this.visibleItems !== 1 ? 's' : ''} en ${filterName}`;
    } else {
      this.resultsCount.textContent = 'Mostrando todas las preguntas';
    }
  }
  
  /**
   * Obtiene el nombre legible de un filtro
   * @param {string} filter - El código del filtro
   * @returns {string} - El nombre legible del filtro
   */
  getFilterName(filter) {
    const filterNames = {
      'general': 'General',
      'billing': 'Facturación',
      'technical': 'Técnico',
      'account': 'Cuenta'
    };
    return filterNames[filter] || filter;
  }
  
  /**
   * Muestra u oculta el mensaje de no resultados
   * @param {boolean} show - Si se debe mostrar el mensaje
   */
  toggleNoResultsMessage(show) {
    if (show) {
      this.noResults.style.display = 'block';
      this.accordion.style.display = 'none';
    } else {
      this.noResults.style.display = 'none';
      this.accordion.style.display = 'block';
    }
  }
  
  /**
   * Limpia la búsqueda
   */
  clearSearch() {
    this.searchInput.value = '';
    this.searchTerm = '';
    this.searchClear.classList.remove('visible');
    this.applyFiltersAndSearch();
    this.searchInput.focus();
  }
  
  /**
   * Configura la navegación por teclado para accesibilidad
   */
  setupKeyboardNavigation() {
    // Navegación por teclado para preguntas
    this.faqQuestions.forEach(question => {
      question.addEventListener('keydown', (e) => {
        // Espacio o Enter para alternar
        if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault();
          this.toggleFAQ(question);
        }
        
        // Flecha arriba/abajo para navegar entre preguntas
        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
          e.preventDefault();
          
          const visibleQuestions = Array.from(this.faqQuestions).filter(q => {
            return !q.closest('.faq-item').classList.contains('hidden');
          });
          
          const currentIndex = visibleQuestions.indexOf(question);
          let targetIndex;
          
          if (e.key === 'ArrowUp') {
            targetIndex = currentIndex > 0 ? currentIndex - 1 : visibleQuestions.length - 1;
          } else {
            targetIndex = currentIndex < visibleQuestions.length - 1 ? currentIndex + 1 : 0;
          }
          
          visibleQuestions[targetIndex].focus();
        }
        
        // Inicio/Fin para ir al primer/último elemento
        if (e.key === 'Home' || e.key === 'End') {
          e.preventDefault();
          
          const visibleQuestions = Array.from(this.faqQuestions).filter(q => {
            return !q.closest('.faq-item').classList.contains('hidden');
          });
          
          if (e.key === 'Home') {
            visibleQuestions[0].focus();
          } else {
            visibleQuestions[visibleQuestions.length - 1].focus();
          }
        }
      });
    });
    
    // Navegación por teclado para botones de filtro
    this.filterButtons.forEach(button => {
      button.addEventListener('keydown', (e) => {
        // Flecha izquierda/derecha para navegar entre botones
        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
          e.preventDefault();
          
          const buttons = Array.from(this.filterButtons);
          const currentIndex = buttons.indexOf(button);
          let targetIndex;
          
          if (e.key === 'ArrowLeft') {
            targetIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;
          } else {
            targetIndex = currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;
          }
          
          buttons[targetIndex].focus();
        }
      });
    });
  }
  
  /**
   * Rastrea interacción con FAQ para análisis
   * @param {HTMLElement} question - El elemento de pregunta
   * @param {string} action - La acción realizada (open/close)
   */
  trackFAQInteraction(question, action) {
    const questionText = question.querySelector('.question-text').textContent;
    const category = question.closest('.faq-item').dataset.category;
    
    // Aquí se podría integrar con una herramienta de análisis
    console.log(`FAQ Interaction: ${action} - "${questionText}" (${category})`);
  }
  
  /**
   * Rastrea cambio de filtro para análisis
   * @param {string} filter - El filtro seleccionado
   */
  trackFilterChange(filter) {
    // Aquí se podría integrar con una herramienta de análisis
    console.log(`Filter Changed: ${filter}`);
  }
  
  /**
   * Rastrea búsqueda para análisis
   * @param {string} term - El término de búsqueda
   */
  trackSearch(term) {
    // Aquí se podría integrar con una herramienta de análisis
    console.log(`Search: "${term}" - Results: ${this.visibleItems}`);
  }
}

/**
 * Funciones globales para control externo
 */

// Abrir una pregunta específica por ID o índice
function openFAQItem(identifier) {
  let question;
  
  if (typeof identifier === 'number') {
    // Abrir por índice
    const visibleQuestions = Array.from(document.querySelectorAll('.faq-question')).filter(q => {
      return !q.closest('.faq-item').classList.contains('hidden');
    });
    
    if (identifier >= 0 && identifier < visibleQuestions.length) {
      question = visibleQuestions[identifier];
    }
  } else if (typeof identifier === 'string') {
    // Abrir por ID o texto de pregunta
    const allQuestions = document.querySelectorAll('.faq-question');
    
    for (const q of allQuestions) {
      if (q.id === identifier || q.querySelector('.question-text').textContent.includes(identifier)) {
        question = q;
        break;
      }
    }
  }
  
  if (question) {
    // Asegurarse de que el elemento sea visible (no filtrado)
    const item = question.closest('.faq-item');
    if (item.classList.contains('hidden')) {
      // Restablecer filtros para mostrar el elemento
      document.querySelector('.filter-btn[data-filter="all"]').click();
      document.getElementById('faqSearch').value = '';
      faqController.clearSearch();
    }
    
    // Abrir la pregunta
    question.setAttribute('aria-expanded', 'true');
    question.scrollIntoView({ behavior: 'smooth', block: 'center' });
    question.focus();
    
    return true;
  }
  
  return false;
}

// Buscar un término específico
function searchFAQs(term) {
  const searchInput = document.getElementById('faqSearch');
  searchInput.value = term;
  searchInput.dispatchEvent(new Event('input'));
  return document.querySelectorAll('.faq-item:not(.hidden)').length;
}

// Filtrar por categoría
function filterFAQs(category) {
  const filterBtn = document.querySelector(`.filter-btn[data-filter="${category}"]`);
  if (filterBtn) {
    filterBtn.click();
    return true;
  }
  return false;
}

// Inicializar cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', () => {
  // Crear instancia del controlador
  window.faqController = new FAQController();
  
  // Exponer funciones globales
  window.openFAQItem = openFAQItem;
  window.searchFAQs = searchFAQs;
  window.filterFAQs = filterFAQs;
});