@extends('layout.front.master')

{{-- Meta tags optimizados para FAQ --}}
@section('title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . 'Preguntas Frecuentes | FAQ | ' . config('site.name'))
@section('description', isset($currentCategory) && $currentCategory->description ? $currentCategory->description : 'Encuentra respuestas a las preguntas más frecuentes sobre servicios, proyectos, licitaciones, certificaciones y procesos de construcción de Constructora Gama S.A. Más de 33 años de experiencia en el NOA.')
@section('keywords', config('site.seo.keywords') . ', preguntas frecuentes, FAQ, consultas, ayuda, soporte, licitaciones, certificaciones, procesos constructivos')

{{-- Open Graph Meta Tags --}}
@section('og_title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . 'Preguntas Frecuentes | FAQ | ' . config('site.name'))
@section('og_description', isset($currentCategory) && $currentCategory->description ? $currentCategory->description : 'Resuelve todas tus dudas sobre servicios, proyectos, licitaciones, certificaciones y procesos de construcción de Constructora Gama S.A. Más de 33 años de experiencia.')
@section('og_image', asset('cd-project/img/meta-tags/construction/backgrounds/faqs-bg.jpg'))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . 'Preguntas Frecuentes | FAQ | ' . config('site.name'))
@section('twitter_description', isset($currentCategory) && $currentCategory->description ? $currentCategory->description : 'Resuelve todas tus dudas sobre servicios, proyectos, licitaciones, certificaciones y procesos de construcción.')
@section('twitter_image', asset('cd-project/img/meta-tags/construction/backgrounds/faqs-bg.jpg'))

@section('content')

@php
    $moduleConfig = get_module_page_header_config('faqs');
    $pageTitle = isset($currentCategory) ? $currentCategory->name : $moduleConfig['title'];
    $pageSubtitle = isset($currentCategory) ? ($currentCategory->description ?? $moduleConfig['subtitle']) : $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('faqs', $pageTitle);
@endphp

@if(view()->exists('modules.cd-base.faqs.frontend.partials.dynamic-header'))
    @php
        $backgroundImage = asset('cd-project/img/demos/digital-agency-2/bg/bg-12.jpg');
    @endphp
    @include('modules.cd-base.faqs.frontend.partials.dynamic-header', ['backgroundImage' => $backgroundImage])
@else
    {{-- Fallback a header moderno si no existe el dinámico --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@endif



{{-- Main FAQs Section --}}
<section class="section mt-0">
    <div class="container container-xl-custom py-5">

            <div class="row pt-2">
                <div class="col-lg-3 mb-4">
                    <aside class="card border-0 shadow-modern rounded-lg mb-4 position-sticky" style="top: 100px;">
                        <div class="card-header text-white border-0 p-4">
                            <h5 class="mb-0 font-weight-bold">
                                <i class="fas fa-list-ul me-2"></i>
                                {{ __('Categorías') }}
                            </h5>
                        </div>
                        <div class="card-body p-4">

                        <!-- Contador de resultados -->
                        <div class="category-stats mb-3" id="categoryStats">
                            <small class="text-muted">
                                <span id="totalQuestions">{{ $categories->sum(function($cat) { return $cat->faqs->count(); }) }}</span> preguntas disponibles
                            </small>
                        </div>

                        <div class="category-navigation" id="categoryNavigation">
                            <div class="category-nav-item {{ !isset($currentCategory) ? 'active' : '' }}"
                                 data-category="all"
                                 onclick="showCategory('all')">
                                <i class="fas fa-th-large me-2"></i>
                                    {{ __('Ver todas') }}
                                <span class="badge badge-count">{{ $categories->sum(function($cat) { return $cat->faqs->count(); }) }}</span>
                            </div>
                            @foreach($categories->sortBy('name') as $category)
                                <div class="category-nav-item {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'active' : '' }}"
                                     data-category="{{ $category->id }}"
                                     onclick="showCategory('{{ $category->id }}')">
                                    <i class="fas fa-folder me-2"></i>
                                        {{ $category->name }}
                                    <span class="badge badge-count">{{ $category->faqs->count() }}</span>
                                </div>
                            @endforeach
                        </div>

                        <!-- Acciones rápidas -->
                        <div class="quick-actions mt-4">
                            <h6 class="font-weight-semi-bold mb-2">
                                <i class="fas fa-bolt me-2"></i>
                                Acciones rápidas
                            </h6>
                            <button class="btn btn-sm btn-outline-primary mb-2 w-100" id="expandAllBtn">
                                <i class="fas fa-expand-arrows-alt me-2"></i>
                                Expandir todo
                            </button>
                            <button class="btn btn-sm btn-outline-secondary w-100" id="collapseAllBtn">
                                <i class="fas fa-compress-arrows-alt me-2"></i>
                                Contraer todo
                            </button>
                        </div>
                        </div>
                    </aside>
                </div>
                    <div class="col-lg-9">
                        {{-- Paginación superior --}}
                        <div class="row mb-4">
                            <div class="col text-center">
                                <div class="pagination-simple">
                                    @if ($faqs->onFirstPage())
                                        <span class="btn btn-outline-secondary disabled">Anterior</span>
                                    @else
                                        <a href="{{ $faqs->previousPageUrl() }}" class="btn btn-outline-primary">Anterior</a>
                                    @endif

                                    <span class="mx-3">Página {{ $faqs->currentPage() }} de {{ $faqs->lastPage() }}</span>

                                    @if ($faqs->hasMorePages())
                                        <a href="{{ $faqs->nextPageUrl() }}" class="btn btn-outline-primary">Siguiente</a>
                                    @else
                                        <span class="btn btn-outline-secondary disabled">Siguiente</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Resultados de búsqueda -->
                        <div id="searchResults" class="search-results d-none">
                            <div class="search-header mb-4">
                                <h4 class="font-weight-semi-bold">
                                    <i class="fas fa-search me-2"></i>
                                    Resultados de búsqueda
                                </h4>
                                <p class="text-muted mb-0" id="searchResultsText"></p>
                            </div>
                            <div id="searchResultsContainer"></div>
                        </div>

                                        <!-- Contenido principal de FAQ -->
                    <div class="faq-content-container" id="mainFaqContent">
                        <!-- Vista "Ver todas" -->
                        <div id="all-content" class="category-content {{ !isset($currentCategory) ? 'active' : '' }}">
                            @forelse($faqs as $faq)
                                <div class="faq-item mb-4"
                                     data-faq-id="{{ $faq->id }}"
                                     data-category="{{ $faq->category_id }}"
                                     data-keywords="{{ strtolower($faq->question . ' ' . $faq->answer) }}">
                                    <div class="faq-question"
                                         role="button"
                                         tabindex="0"
                                         aria-expanded="false"
                                         onclick="toggleFAQ('faq-{{ $faq->id }}')"
                                         onkeydown="handleFAQKeydown(event, 'faq-{{ $faq->id }}')">
                                        <h5 class="mb-0">
                                            <span class="question-text">{{ $faq->question }}</span>
                                            <i class="fas fa-chevron-down toggle-icon"></i>
                                        </h5>
                                    </div>
                                    <div id="faq-{{ $faq->id }}" class="faq-answer">
                                        <div class="faq-content">
                                            {!! nl2br($faq->answer) !!}

                                            <!-- Acciones de la FAQ -->
                                            <div class="faq-actions mt-3">
                                                <button class="btn btn-sm btn-outline-success me-2"
                                                        onclick="markHelpful({{ $faq->id }})">
                                                    <i class="fas fa-thumbs-up me-1"></i>
                                                    Útil
                                                </button>
                                                {{-- <button class="btn btn-sm btn-outline-primary"
                                                        onclick="copyFaqLink({{ $faq->id }})">
                                                    <i class="fas fa-link me-1"></i>
                                                    Compartir
                                                </button> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-5">
                                    <i class="fas fa-question-circle fa-3x text-muted mb-3"></i>
                                    <h4 class="text-muted">No hay preguntas frecuentes disponibles</h4>
                                    <p class="text-muted">Pronto agregaremos más contenido.</p>
                                </div>
                            @endforelse
                        </div>

                        <!-- Vistas individuales por categoría -->
                        @foreach($categories as $category)
                            <div id="category-{{ $category->id }}-content"
                                 class="category-content {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'active' : '' }}">
                                <div class="faq-category-section">
                                    <div class="category-header mb-4">
                                        <h4 class="font-weight-semi-bold mb-2">
                                            <i class="fas fa-folder-open me-2 text-primary"></i>
                                            {{ $category->name }}
                                        </h4>
                                        <p class="text-muted mb-0">{{ $category->description ?? 'Preguntas sobre ' . $category->name }}</p>
                                    </div>

                                    <div class="faq-accordion" data-category-accordion="{{ $category->id }}">
                                        @foreach($category->faqs as $faq)
                                            <div class="faq-item"
                                                 data-faq-id="{{ $faq->id }}"
                                                 data-category="{{ $category->id }}"
                                                 data-keywords="{{ strtolower($faq->question . ' ' . $faq->answer) }}">
                                                <div class="faq-question"
                                                     role="button"
                                                     tabindex="0"
                                                     aria-expanded="false"
                                                     onclick="toggleFAQ('faq-cat-{{ $category->id }}-{{ $faq->id }}')"
                                                     onkeydown="handleFAQKeydown(event, 'faq-cat-{{ $category->id }}-{{ $faq->id }}')">
                                                    <h5 class="mb-0">
                                                        <span class="question-text">{{ $faq->question }}</span>
                                                        <i class="fas fa-chevron-down toggle-icon"></i>
                                                    </h5>
                                                </div>
                                                <div id="faq-cat-{{ $category->id }}-{{ $faq->id }}" class="faq-answer">
                                                    <div class="faq-content">
                                                        {!! nl2br($faq->answer) !!}

                                                        <!-- Acciones de la FAQ -->
                                                        <div class="faq-actions mt-3">
                                                            <button class="btn btn-sm btn-outline-success me-2"
                                                                    onclick="markHelpful({{ $faq->id }})">
                                                                <i class="fas fa-thumbs-up me-1"></i>
                                                                Útil
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-primary"
                                                                    onclick="copyFaqLink({{ $faq->id }})">
                                                                <i class="fas fa-link me-1"></i>
                                                                Compartir
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- No hay resultados -->
                    <div id="noResults" class="no-results d-none text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No encontramos resultados</h4>
                        <p class="text-muted">Intenta con otros términos de búsqueda o explora las categorías.</p>
                        <button class="btn btn-primary" onclick="clearSearch()">
                            <i class="fas fa-times me-2"></i>
                            Limpiar búsqueda
                        </button>
                    </div>

                    {{-- Paginación inferior --}}
                    <div class="row mt-4">
                        <div class="col text-center">
                            <div class="pagination-simple">
                                @if ($faqs->onFirstPage())
                                    <span class="btn btn-outline-secondary disabled">Anterior</span>
                                @else
                                    <a href="{{ $faqs->previousPageUrl() }}" class="btn btn-outline-primary">Anterior</a>
                                @endif

                                <span class="mx-3">Página {{ $faqs->currentPage() }} de {{ $faqs->lastPage() }}</span>

                                @if ($faqs->hasMorePages())
                                    <a href="{{ $faqs->nextPageUrl() }}" class="btn btn-outline-primary">Siguiente</a>
                                @else
                                    <span class="btn btn-outline-secondary disabled">Siguiente</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

<!-- Structured Data para FAQ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    @foreach($categories as $category)
      @foreach($category->faqs as $faq)
        {
          "@type": "Question",
          "name": "{{ addslashes($faq->question) }}",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "{{ addslashes(strip_tags($faq->answer)) }}"
          }
        }{{ !$loop->parent->last || !$loop->last ? ',' : '' }}
      @endforeach
    @endforeach
  ]
}
</script>

<!-- CSS Optimizado para FAQ -->
<style>
/* FAQ Search Optimizado */
.faq-search-container {
    background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(56,49,255,0.1));
    border-radius: 15px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.search-box-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: rgba(255,255,255,0.9);
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.faq-search-input:focus {
    outline: none;
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 3px rgba(0,255,255,0.2), 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.search-suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.search-suggestion-item:hover {
    background: #f8f9fa;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-stats {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

/* Sidebar Optimizado - Usa el estilo de card de Porto */
.sidebar-optimized {
    /* Los estilos ahora vienen del card de Porto */
}

/* Navegación por categorías */
.category-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: var(--dark);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    user-select: none;
    background: transparent;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.category-nav-item:hover {
    background: rgba(0,0,0,0.03);
    color: var(--primary);
    transform: translateX(3px);
    border-color: rgba(0,0,0,0.15);
}

.category-nav-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border-color: var(--primary);
}

.badge-count {
    background: rgba(0,0,0,0.1);
    color: var(--dark);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.category-nav-item.active .badge-count {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

/* Contenido de categorías */
.faq-content-container {
    position: relative;
    min-height: 400px;
}

.category-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.category-content.active {
    display: block;
}

/* FAQ Items Optimizados */
.faq-category-section {
    background: rgba(255,255,255,0.03);
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.category-header h4 {
    color: #1a1a1a !important;
    font-weight: 900;
    font-size: 1.6rem;
}

.faq-item {
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 2px solid rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.faq-item:hover {
    background: rgba(255,255,255,0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.2);
}

.faq-question {
    padding: 1.25rem;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-question h5 {
    margin: 0;
    color: #1a1a1a !important;
    font-weight: 900;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.3rem;
}

.faq-question:hover h5 {
    color: #000000;
}

.toggle-icon {
    transition: transform 0.3s ease;
    color: #333333;
    font-size: 1.1rem;
    font-weight: 900;
    filter: none;
    margin-left: 1rem;
}

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

.faq-answer {
    border-top: 2px solid rgba(0,0,0,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: rgba(255,255,255,0.85);
    border-radius: 0 0 10px 10px;
}

.faq-answer.open {
    max-height: 1000px;
    padding-top: 0;
}

.faq-content {
    padding: 1.25rem;
    color: #2a2a2a;
    line-height: 1.7;
    text-shadow: none;
    font-size: 0.95rem;
    font-weight: 500;
}

.faq-actions {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
}

.faq-actions .btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.faq-actions .btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: white;
    transform: translateY(-1px);
}

.faq-actions .btn-outline-success {
    border-color: #28a745;
    color: #28a745;
    background: rgba(40,167,69,0.2);
    font-weight: 600;
}

.faq-actions .btn-outline-success:hover {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.faq-actions .btn-outline-primary {
    border-color: #0066cc;
    color: #0066cc;
    background: rgba(0,102,204,0.2);
    font-weight: 600;
}

.faq-actions .btn-outline-primary:hover {
    background: #0066cc;
    border-color: #0066cc;
    color: white;
}

/* Lazy Loading */
.lazy-item {
    display: none;
}

.lazy-item.loaded {
    display: block;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.load-more-btn {
    border: 2px solid var(--cd-primary);
    color: var(--cd-primary);
    background: rgba(0,255,255,0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    font-weight: 600;
}

.load-more-btn:hover {
    background: var(--cd-primary);
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,255,255,0.3);
    border-color: var(--cd-primary);
}

/* Search Results */
.search-results {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 2rem;
    border: 2px solid rgba(0,0,0,0.1);
}

.search-results .faq-item {
    background: rgba(255,255,255,0.9);
    border: 2px solid rgba(0,0,0,0.1);
}

.search-results .faq-question {
    background: #ffffff;
    border-bottom: 3px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-results .faq-question h5 {
    color: #1a1a1a !important;
    font-weight: 900;
    font-size: 1.3rem;
}

.search-results .faq-content {
    color: #2a2a2a;
    text-shadow: none;
    font-weight: 500;
}

.search-highlight {
    background: linear-gradient(45deg, var(--cd-primary), var(--cd-secondary));
    color: #000000;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
    text-shadow: none;
}

/* Quick Actions */
.quick-actions {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1rem;
    border: 2px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-actions .btn {
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.85);
    border: 2px solid rgba(0,0,0,0.1);
    color: #2a2a2a;
    backdrop-filter: blur(5px);
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quick-actions .btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.2);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.quick-actions .btn-outline-primary {
    border-color: var(--cd-primary);
    color: #000000;
    background: rgba(0,255,255,0.2);
    font-weight: 700;
}

.quick-actions .btn-outline-primary:hover {
    background: var(--cd-primary);
    border-color: var(--cd-primary);
    color: #000000;
}

.quick-actions .btn-outline-secondary {
    border-color: #495057;
    color: #495057;
    background: rgba(73,80,87,0.1);
    font-weight: 700;
}

.quick-actions .btn-outline-secondary:hover {
    background: #495057;
    border-color: #495057;
    color: white;
}

/* No Results */
.no-results {
    background: rgba(255,255,255,0.03);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .faq-search-container {
        padding: 1.5rem;
    }

    .faq-search-input {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }

    .sidebar-optimized {
        margin-bottom: 2rem;
    }

    .faq-question {
        padding: 1rem;
    }

    .faq-content {
        padding: 1rem;
    }

    .nav-link-optimized {
        padding: 0.625rem 0.875rem;
    }
}

/* Accessibility */
.faq-question:focus {
    outline: 2px solid var(--cd-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
</style>

<!-- JavaScript Optimizado para FAQ -->
<script>
/**
 * FAQ OPTIMIZER
 * Sistema completo de búsqueda, lazy loading y navegación optimizada
 */
class FAQOptimizer {
    constructor() {
        this.searchInput = document.getElementById('faqSearch');
        this.searchResults = document.getElementById('searchResults');
        this.searchResultsContainer = document.getElementById('searchResultsContainer');
        this.searchResultsText = document.getElementById('searchResultsText');
        this.mainContent = document.getElementById('mainFaqContent');
        this.noResults = document.getElementById('noResults');
        this.searchSuggestions = document.getElementById('searchSuggestions');
        this.searchStats = document.getElementById('searchStats');

        this.allFaqs = [];
        this.searchTimeout = null;
        this.currentSearch = '';
        this.currentCategory = 'all';

        this.init();
    }

    init() {
        this.log('🚀 Initializing FAQ Optimizer...');
        this.collectFAQs();
        this.setupSearch();
        this.setupLazyLoading();
        this.setupQuickActions();
        this.setupKeyboardNavigation();
        this.setupAnalytics();
        this.setupCategoryNavigation();
        this.log('✅ FAQ Optimizer ready');
    }

    setupCategoryNavigation() {
        // Configurar navegación por categorías
        const categoryItems = document.querySelectorAll('.category-nav-item');
        categoryItems.forEach(item => {
            item.addEventListener('click', (e) => {
                const category = e.currentTarget.dataset.category;
                this.showCategory(category);
            });
        });
    }

    log(message) {
        if (window.location.hostname === 'localhost' || window.location.hostname.includes('test')) {
            console.log(`❓ FAQ: ${message}`);
        }
    }

    collectFAQs() {
        const faqItems = document.querySelectorAll('.faq-item');
        this.allFaqs = Array.from(faqItems).map(item => ({
            id: item.dataset.faqId,
            category: item.dataset.category,
            keywords: item.dataset.keywords,
            question: item.querySelector('.question-text').textContent,
            element: item
        }));

        this.log(`📊 Collected ${this.allFaqs.length} FAQs`);
    }

    setupSearch() {
        if (!this.searchInput) return;

        // Búsqueda en tiempo real
        this.searchInput.addEventListener('input', (e) => {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.performSearch(e.target.value);
            }, 300);
        });

        // Sugerencias
        this.searchInput.addEventListener('focus', () => {
            if (!this.searchInput.value) {
                this.showSuggestions();
            }
        });

        // Cerrar sugerencias al hacer clic fuera
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.search-box-wrapper')) {
                this.hideSuggestions();
            }
        });
    }

    showSuggestions() {
        const suggestions = [
            'precios y costos',
            'sabores disponibles',
            'servicio a domicilio',
            'pedidos especiales',
            'tortas personalizadas',
            'venta al por mayor'
        ];

        this.searchSuggestions.innerHTML = suggestions.map(suggestion =>
            `<div class="search-suggestion-item" onclick="faqOptimizer.selectSuggestion('${suggestion}')">
                <i class="fas fa-search me-2"></i>${suggestion}
            </div>`
        ).join('');

        this.searchSuggestions.style.display = 'block';
    }

    hideSuggestions() {
        this.searchSuggestions.style.display = 'none';
    }

    selectSuggestion(suggestion) {
        this.searchInput.value = suggestion;
        this.hideSuggestions();
        this.performSearch(suggestion);
    }

    performSearch(query) {
        this.currentSearch = query.toLowerCase().trim();

        if (this.currentSearch.length < 2) {
            this.clearSearch();
            return;
        }

        this.log(`🔍 Searching for: "${this.currentSearch}"`);

        // Buscar FAQs que coincidan
        const results = this.allFaqs.filter(faq =>
            faq.keywords.includes(this.currentSearch) ||
            this.fuzzyMatch(faq.question.toLowerCase(), this.currentSearch)
        );

        this.displaySearchResults(results);
        this.updateSearchStats(results.length);
    }

    fuzzyMatch(text, query) {
        const words = query.split(' ');
        return words.some(word => text.includes(word));
    }

    displaySearchResults(results) {
        if (results.length === 0) {
            this.showNoResults();
            return;
        }

        // Ocultar contenido principal y mostrar resultados
        this.mainContent.classList.add('d-none');
        this.noResults.classList.add('d-none');
        this.searchResults.classList.remove('d-none');

        this.searchResultsText.textContent = `${results.length} resultado${results.length !== 1 ? 's' : ''} encontrado${results.length !== 1 ? 's' : ''} para "${this.currentSearch}"`;

        // Generar HTML de resultados
        this.searchResultsContainer.innerHTML = results.map(faq => {
            const highlightedQuestion = this.highlightText(faq.question, this.currentSearch);
            return `
                <div class="faq-item search-result-item" data-faq-id="${faq.id}">
                    <div class="faq-question"
                         role="button"
                         tabindex="0"
                         aria-expanded="false"
                         onclick="toggleFAQ('search-faq-${faq.id}')"
                         onkeydown="handleFAQKeydown(event, 'search-faq-${faq.id}')">
                        <h5 class="mb-0">
                            <span class="question-text">${highlightedQuestion}</span>
                            <i class="fas fa-chevron-down toggle-icon"></i>
                        </h5>
                    </div>
                    <div id="search-faq-${faq.id}"
                         class="faq-answer">
                        <div class="faq-content">
                            ${faq.element.querySelector('.faq-content').innerHTML}
                        </div>
                    </div>
                </div>
            `;
        }).join('');
    }

    highlightText(text, query) {
        const words = query.split(' ');
        let highlighted = text;

        words.forEach(word => {
            if (word.length > 2) {
                const regex = new RegExp(`(${word})`, 'gi');
                highlighted = highlighted.replace(regex, '<span class="search-highlight">$1</span>');
            }
        });

        return highlighted;
    }

    showNoResults() {
        this.mainContent.classList.add('d-none');
        this.searchResults.classList.add('d-none');
        this.noResults.classList.remove('d-none');
    }

    clearSearch() {
        this.searchInput.value = '';
        this.currentSearch = '';
        this.mainContent.classList.remove('d-none');
        this.searchResults.classList.add('d-none');
        this.noResults.classList.add('d-none');
        this.updateSearchStats(0);
    }

    updateSearchStats(resultCount) {
        if (this.currentSearch) {
            this.searchStats.textContent = `${resultCount} de ${this.allFaqs.length} preguntas`;
        } else {
            this.searchStats.textContent = `${this.allFaqs.length} preguntas disponibles`;
        }
    }

    setupLazyLoading() {
        // El lazy loading ahora se maneja directamente en los botones con onclick
        this.log('📄 Lazy loading configured');
    }

    loadMoreFAQs(category, button) {
        const lazyItems = document.querySelectorAll(`[data-category="${category}"] .lazy-item:not(.loaded)`);
        const itemsToLoad = Array.from(lazyItems).slice(0, 3);

        itemsToLoad.forEach((item, index) => {
            setTimeout(() => {
                item.classList.add('loaded');
            }, index * 100);
        });

        // Actualizar botón
        const remaining = lazyItems.length - itemsToLoad.length;
        if (remaining <= 0) {
            button.parentElement.style.display = 'none';
        } else {
            button.innerHTML = `<i class="fas fa-plus me-2"></i>Ver más preguntas (${remaining} restantes)`;
        }

        this.log(`📄 Loaded ${itemsToLoad.length} more FAQs for category ${category}`);
    }

    setupQuickActions() {
        // Expandir todo
        const expandAllBtn = document.getElementById('expandAllBtn');
        if (expandAllBtn) {
            expandAllBtn.addEventListener('click', () => {
                document.querySelectorAll('.faq-answer:not(.open)').forEach(answer => {
                    const faqQuestion = answer.previousElementSibling;
                    const toggleIcon = faqQuestion.querySelector('.toggle-icon');

                    answer.classList.add('open');
                    faqQuestion.setAttribute('aria-expanded', 'true');
                    if (toggleIcon) {
                        toggleIcon.style.transform = 'rotate(180deg)';
                    }
                });
                this.log('📖 Expanded all FAQs');
            });
        }

        // Contraer todo
        const collapseAllBtn = document.getElementById('collapseAllBtn');
        if (collapseAllBtn) {
            collapseAllBtn.addEventListener('click', () => {
                document.querySelectorAll('.faq-answer.open').forEach(answer => {
                    const faqQuestion = answer.previousElementSibling;
                    const toggleIcon = faqQuestion.querySelector('.toggle-icon');

                    answer.classList.remove('open');
                    faqQuestion.setAttribute('aria-expanded', 'false');
                    if (toggleIcon) {
                        toggleIcon.style.transform = 'rotate(0deg)';
                    }
                });
                this.log('📕 Collapsed all FAQs');
            });
        }
    }

    setupKeyboardNavigation() {
        // Navegación con teclado
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.currentSearch) {
                this.clearSearch();
            }

            if (e.key === '/' && !e.target.matches('input, textarea')) {
                e.preventDefault();
                this.searchInput.focus();
            }
        });

        // Enter en preguntas
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    question.click();
                }
            });
        });
    }

    setupAnalytics() {
        // Tracking de interacciones
        document.addEventListener('click', (e) => {
            if (e.target.closest('.faq-question')) {
                const faqId = e.target.closest('.faq-item').dataset.faqId;
                this.trackFAQInteraction('expand', faqId);
            }
        });
    }

    trackFAQInteraction(action, faqId) {
        this.log(`📊 FAQ ${action}: ${faqId}`);
        // Aquí se puede integrar con Google Analytics o similar
    }

    showCategory(categoryId) {
        this.log(`📂 Showing category: ${categoryId}`);

        // Actualizar navegación activa
        document.querySelectorAll('.category-nav-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector(`[data-category="${categoryId}"]`).classList.add('active');

        // Mostrar contenido correspondiente
        document.querySelectorAll('.category-content').forEach(content => {
            content.classList.remove('active');
        });

        if (categoryId === 'all') {
            document.getElementById('all-content').classList.add('active');
        } else {
            document.getElementById(`category-${categoryId}-content`).classList.add('active');
        }

        this.currentCategory = categoryId;

        // Limpiar búsqueda si está activa
        if (this.currentSearch) {
            this.clearSearch();
        }
    }
}

// Funciones globales para acciones de FAQ
function markHelpful(faqId) {
    const btn = event.target.closest('button');
    btn.innerHTML = '<i class="fas fa-check me-1"></i>¡Gracias!';
    btn.disabled = true;
    btn.classList.remove('btn-outline-success');
    btn.classList.add('btn-success');

    console.log(`👍 FAQ ${faqId} marked as helpful`);
}

function copyFaqLink(faqId) {
    const url = `${window.location.origin}${window.location.pathname}#faq-${faqId}`;
    navigator.clipboard.writeText(url).then(() => {
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check me-1"></i>¡Copiado!';

        setTimeout(() => {
            btn.innerHTML = originalText;
        }, 2000);
    });
}

function clearSearch() {
    if (window.faqOptimizer) {
        window.faqOptimizer.clearSearch();
    }
}

function showCategory(categoryId) {
    if (window.faqOptimizer) {
        window.faqOptimizer.showCategory(categoryId);
    }
}

function toggleFAQ(faqId) {
    const faqAnswer = document.getElementById(faqId);
    const faqQuestion = faqAnswer.previousElementSibling;
    const toggleIcon = faqQuestion.querySelector('.toggle-icon');

    if (faqAnswer.classList.contains('open')) {
        faqAnswer.classList.remove('open');
        faqQuestion.setAttribute('aria-expanded', 'false');
        toggleIcon.style.transform = 'rotate(0deg)';
    } else {
        faqAnswer.classList.add('open');
        faqQuestion.setAttribute('aria-expanded', 'true');
        toggleIcon.style.transform = 'rotate(180deg)';
    }
}

function handleFAQKeydown(event, faqId) {
    if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        toggleFAQ(faqId);
    }
}

function loadMoreFAQs(categoryId, button) {
    const lazyItems = document.querySelectorAll(`[data-category="${categoryId}"] .lazy-item:not(.loaded)`);
    const itemsToLoad = Array.from(lazyItems).slice(0, 3);

    itemsToLoad.forEach((item, index) => {
        setTimeout(() => {
            item.classList.add('loaded');
        }, index * 100);
    });

    // Actualizar botón
    const remaining = lazyItems.length - itemsToLoad.length;
    if (remaining <= 0) {
        button.parentElement.style.display = 'none';
    } else {
        button.innerHTML = `<i class="fas fa-plus me-2"></i>Ver más preguntas (${remaining} restantes)`;
    }
}

// Funciones globales adicionales

function toggleFAQ(faqId) {
    const faqAnswer = document.getElementById(faqId);
    const faqQuestion = faqAnswer.previousElementSibling;
    const toggleIcon = faqQuestion.querySelector('.toggle-icon');

    if (faqAnswer.classList.contains('open')) {
        faqAnswer.classList.remove('open');
        faqQuestion.setAttribute('aria-expanded', 'false');
        toggleIcon.style.transform = 'rotate(0deg)';
    } else {
        faqAnswer.classList.add('open');
        faqQuestion.setAttribute('aria-expanded', 'true');
        toggleIcon.style.transform = 'rotate(180deg)';
    }
}

function handleFAQKeydown(event, faqId) {
    if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        toggleFAQ(faqId);
    }
}

function loadMoreFAQs(categoryId, button) {
    const lazyItems = document.querySelectorAll(`[data-category="${categoryId}"] .lazy-item:not(.loaded)`);
    const itemsToLoad = Array.from(lazyItems).slice(0, 3);

    itemsToLoad.forEach((item, index) => {
        setTimeout(() => {
            item.classList.add('loaded');
        }, index * 100);
    });

    // Actualizar botón
    const remaining = lazyItems.length - itemsToLoad.length;
    if (remaining <= 0) {
        button.parentElement.style.display = 'none';
    } else {
        button.innerHTML = `<i class="fas fa-plus me-2"></i>Ver más preguntas (${remaining} restantes)`;
    }
}

// Inicializar cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
    window.faqOptimizer = new FAQOptimizer();
});
</script>