@extends('layout.front.master')

@php
    $faqsModuleName = config('site.modules.faqs.page_header.title', config('cd-system.modules.faqs.name', 'Preguntas Frecuentes'));
    $faqsDescription = isset($currentCategory) && $currentCategory->description
        ? $currentCategory->description
        : config('site.modules.faqs.page_header.subtitle', config('page-headers.module_config.faqs.subtitle', 'Encuentra respuestas a las preguntas más frecuentes sobre nuestros productos y servicios.'));

    $activeDemo = get_active_demo();
    $isDarkTheme = !in_array($activeDemo, ['demo-law-firm-2', 'demo-urban-development'], true);
    $sectionBg = $isDarkTheme ? 'var(--dark)' : '#F7F7F7';
    $cardBg = $isDarkTheme ? 'var(--dark)' : '#ffffff';
    $cardBorderColor = $isDarkTheme ? 'var(--primary-rgba-10)' : 'rgba(0, 0, 0, 0.08)';
    $cardHeaderBg = $isDarkTheme ? 'var(--secondary)' : 'var(--primary)';
    $cardHeaderTextColor = $isDarkTheme ? 'var(--light)' : 'var(--primary-inverse, #ffffff)';
    
    $textColor = $isDarkTheme ? 'rgba(255, 255, 255, 0.7)' : '#444444';
    $headingColor = $isDarkTheme ? 'var(--light)' : 'var(--dark-rgba-90, #212529)';
    $accentColor = 'var(--primary)';
    $shadowStyle = $isDarkTheme ? '0 4px 15px rgba(0,0,0,0.2)' : '0 4px 20px rgba(0,0,0,0.05)';
    $itemBg = $isDarkTheme ? 'var(--dark)' : '#ffffff';
    $questionBg = $isDarkTheme ? 'var(--secondary)' : '#ffffff';
    $questionTextColor = $isDarkTheme ? 'var(--light)' : 'var(--secondary, #1A325D)';
    $categoryNavBg = 'transparent';
    $categoryNavText = $isDarkTheme ? 'rgba(255, 255, 255, 0.7)' : '#444444';
    $categoryNavBorder = $isDarkTheme ? 'rgba(240, 240, 245, 0.1)' : 'rgba(0, 0, 0, 0.08)';
    $categoryNavActiveBg = 'var(--primary)';
    $categoryNavActiveText = $isDarkTheme ? 'var(--secondary)' : 'var(--primary-inverse, #ffffff)';
    $badgeBg = $isDarkTheme ? 'rgba(240, 240, 245, 0.1)' : 'rgba(0, 0, 0, 0.05)';
    $badgeText = $isDarkTheme ? 'rgba(255, 255, 255, 0.6)' : '#666666';

    $searchContainerBg = $isDarkTheme 
        ? 'linear-gradient(135deg, rgba(0,255,255,0.1), rgba(56,49,255,0.1))' 
        : 'linear-gradient(135deg, var(--primary-rgba-10), rgba(26, 50, 93, 0.05))';
    $searchContainerBorder = $isDarkTheme 
        ? '1px solid rgba(255,255,255,0.1)' 
        : '1px solid var(--primary-rgba-20)';
    $searchInputBg = $isDarkTheme ? 'rgba(255,255,255,0.9)' : '#ffffff';
    $searchInputColor = '#333';
    $searchInputBorder = $isDarkTheme ? '2px solid transparent' : '2px solid rgba(0, 0, 0, 0.08)';
    $searchSuggestionsBg = $isDarkTheme ? 'var(--dark)' : '#ffffff';
    $searchSuggestionsBorder = $isDarkTheme ? '1px solid var(--primary-rgba-10)' : '1px solid rgba(0, 0, 0, 0.08)';
    $searchStatsColor = $isDarkTheme ? 'rgba(255,255,255,0.8)' : '#666666';
@endphp
{{-- Meta tags optimizados para FAQ --}}
@section('title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . $faqsModuleName)
@section('description', $faqsDescription)
@section('keywords', config('site.seo.keywords') . ', preguntas frecuentes, FAQ, consultas, ayuda, soporte')

{{-- Open Graph Meta Tags --}}
@section('og_title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . $faqsModuleName . ' | ' . config('site.name'))
@section('og_description', $faqsDescription)
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', (isset($currentCategory) ? $currentCategory->name . ' | ' : '') . $faqsModuleName . ' | ' . config('site.name'))
@section('twitter_description', $faqsDescription)
@section('twitter_image', brand_twitter_image())

@section('content')

@php
    $moduleConfig = get_module_page_header_config('faqs');
    $currentDemo = get_active_demo();
    $isRestaurant = ($currentDemo === 'demo-restaurant');

    // Para demo-restaurant, usar valores directamente sin traducción
    if ($isRestaurant) {
        $pageTitle = isset($currentCategory) ? $currentCategory->name : config('site.modules.faqs.page_header.title', $moduleConfig['title'] ?? 'FAQs');
        $pageSubtitle = isset($currentCategory) ? ($currentCategory->description ?? config('site.modules.faqs.page_header.subtitle', $moduleConfig['subtitle'] ?? 'Find answers to frequently asked questions.')) : config('site.modules.faqs.page_header.subtitle', $moduleConfig['subtitle'] ?? 'Find answers to frequently asked questions.');
    } else {
        $pageTitle = isset($currentCategory) ? $currentCategory->name : $moduleConfig['title'];
        $pageSubtitle = isset($currentCategory) ? ($currentCategory->description ?? $moduleConfig['subtitle']) : $moduleConfig['subtitle'];
    }

    // Generar breadcrumbs: solo pasar currentTitle si hay una categoría (página de detalle)
    // Para la página de índice, no pasar currentTitle para evitar duplicados
    $breadcrumbs = get_module_breadcrumbs('faqs', isset($currentCategory) ? $pageTitle : null);

    // Para demo-restaurant, corregir breadcrumbs
    if ($isRestaurant) {
        // Cambiar "Inicio" por "Home"
        if (count($breadcrumbs) > 0 && $breadcrumbs[0]['title'] === __('Inicio')) {
            $breadcrumbs[0]['title'] = 'Home';
        }

        $faqsTitle = config('site.modules.faqs.page_header.title', 'FAQs');

        if (!isset($currentCategory)) {
            // Actualizar el último breadcrumb (que es el del módulo) con el título correcto
            if (count($breadcrumbs) > 1) {
                $breadcrumbs[count($breadcrumbs) - 1]['title'] = $faqsTitle;
            }
        } else {
            // Si hay categoría, asegurar que el breadcrumb del módulo también use el título correcto
            foreach ($breadcrumbs as $index => $breadcrumb) {
                if (isset($breadcrumb['url']) && $breadcrumb['url'] === route('faqs.index')) {
                    $breadcrumbs[$index]['title'] = $faqsTitle;
                    break;
                }
            }
        }
    }
@endphp

{{-- Dynamic Header --}}
@include('modules.cd-base.faqs.frontend.partials.dynamic-header')
{{-- Main FAQs Section --}}
<section id="faqs-content" class="section mt-0 mb-0 pb-5 border-0" style="background-color: {{ $sectionBg }} !important;">
    <div class="container container-xl-custom">

            <div class="row">
                <div class="col-lg-3 mb-4">
                    <aside class="card border-0 rounded-0 mb-4 position-sticky" style="top: 6rem; background-color: {{ $cardBg }}; border: 1px solid {{ $cardBorderColor }} !important;">
                        <div class="card-header border-0 p-4" style="background-color: {{ $cardHeaderBg }}; border-bottom: 1px solid {{ $cardBorderColor }} !important;">
                            <h5 class="mb-0 font-weight-bold" style="color: {{ $cardHeaderTextColor }};">
                                <i class="fas fa-list-ul me-2"></i>
                                {{ $isRestaurant ? 'Categories' : __('Categorías') }}
                            </h5>
                        </div>
                        <div class="card-body p-4">

                        <!-- Contador de resultados -->
                        <div class="category-stats mb-3" id="categoryStats">
                            <small class="text-color-grey">
                                <span id="totalQuestions">{{ $categories->sum(function($cat) { return $cat->faqs->count(); }) }}</span> {{ $isRestaurant ? 'questions available' : '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>
                                    {{ $isRestaurant ? 'View All' : __('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>
                                {{ $isRestaurant ? 'Quick Actions' : '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>
                                {{ $isRestaurant ? 'Expand All' : '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>
                                {{ $isRestaurant ? 'Collapse All' : 'Contraer todo' }}
                            </button>
                        </div>
                        </div>
                    </aside>
                </div>
                    <div class="col-lg-9">
                        <!-- Buscador de FAQ -->
                        <div class="faq-search-container mb-4">
                            <div class="search-box-wrapper">
                                <input type="text"
                                       id="faqSearch"
                                       class="faq-search-input"
                                       placeholder="{{ $isRestaurant ? 'Search frequently asked questions...' : __('Buscar preguntas frecuentes...') }}"
                                       aria-label="{{ $isRestaurant ? 'Search FAQ' : __('Buscar FAQ') }}"
                                       autocomplete="off">
                                <div id="searchSuggestions" class="search-suggestions"></div>
                            </div>
                            <div id="searchStats" class="search-stats">
                                {{ $categories->sum(function($cat) { return $cat->faqs->count(); }) }} {{ $isRestaurant ? 'questions available' : __('preguntas disponibles') }}
                            </div>
                        </div>
                        {{-- 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">{{ $isRestaurant ? 'Previous' : 'Anterior' }}</span>
                                    @else
                                        <a href="{{ $faqs->previousPageUrl() }}" class="btn btn-outline-primary">{{ $isRestaurant ? 'Previous' : 'Anterior' }}</a>
                                    @endif

                                    <span class="mx-3">{{ $isRestaurant ? 'Page' : 'Página' }} {{ $faqs->currentPage() }} {{ $isRestaurant ? 'of' : 'de' }} {{ $faqs->lastPage() }}</span>

                                    @if ($faqs->hasMorePages())
                                        <a href="{{ $faqs->nextPageUrl() }}" class="btn btn-outline-primary">{{ $isRestaurant ? 'Next' : 'Siguiente' }}</a>
                                    @else
                                        <span class="btn btn-outline-secondary disabled">{{ $isRestaurant ? 'Next' : '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>
                                    {{ $isRestaurant ? 'Search Results' : 'Resultados de búsqueda' }}
                                </h4>
                                <p class="text-color-grey 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>
                                                    {{ $isRestaurant ? 'Helpful' : 'Ú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-color-grey mb-3"></i>
                                    <h4 class="text-color-grey">{{ $isRestaurant ? 'No FAQs available' : 'No hay preguntas frecuentes disponibles' }}</h4>
                                    <p class="text-color-grey">{{ $isRestaurant ? 'We will add more content soon.' : '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-color-grey 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>
                                                                {{ $isRestaurant ? 'Helpful' : 'Útil' }}
                                                            </button>
                                                            {{-- <button class="btn btn-sm btn-outline-primary"
                                                                    onclick="copyFaqLink({{ $faq->id }})">
                                                                <i class="fas fa-link me-1"></i>
                                                                {{ $isRestaurant ? 'Share' : '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-color-grey mb-3"></i>
                        <h4 class="text-color-grey">{{ $isRestaurant ? 'No results found' : 'No encontramos resultados' }}</h4>
                        <p class="text-color-grey">{{ $isRestaurant ? 'Try different search terms or explore the categories.' : '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>
                            {{ $isRestaurant ? 'Clear Search' : '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">{{ $isRestaurant ? 'Previous' : 'Anterior' }}</span>
                                @else
                                    <a href="{{ $faqs->previousPageUrl() }}" class="btn btn-outline-primary">{{ $isRestaurant ? 'Previous' : 'Anterior' }}</a>
                                @endif

                                <span class="mx-3">{{ $isRestaurant ? 'Page' : 'Página' }} {{ $faqs->currentPage() }} {{ $isRestaurant ? 'of' : 'de' }} {{ $faqs->lastPage() }}</span>

                                @if ($faqs->hasMorePages())
                                    <a href="{{ $faqs->nextPageUrl() }}" class="btn btn-outline-primary">{{ $isRestaurant ? 'Next' : 'Siguiente' }}</a>
                                @else
                                    <span class="btn btn-outline-secondary disabled">{{ $isRestaurant ? 'Next' : '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: {{ $searchContainerBg }};
    border-radius: 15px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: {{ $searchContainerBorder }};
}

.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: {{ $searchInputBorder }};
    border-radius: 50px;
    background: {{ $searchInputBg }};
    color: {{ $searchInputColor }};
    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(--primary);
    box-shadow: 0 0 0 3px var(--primary-rgba-20), 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

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

.search-suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #333333 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease;
}

.search-suggestion-item:hover {
    background: var(--primary-rgba-10);
    color: var(--primary) !important;
}

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

.search-stats {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: {{ $searchStatsColor }};
}

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

/* 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: {{ $categoryNavText }};
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid {{ $categoryNavBorder }};
    cursor: pointer;
    user-select: none;
    background: {{ $categoryNavBg }};
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.category-nav-item:hover {
    background: var(--primary-rgba-10);
    color: var(--primary);
    transform: translateX(3px);
    border-color: var(--primary-rgba-20);
}

.category-nav-item.active {
    background: {{ $categoryNavActiveBg }};
    color: {{ $categoryNavActiveText }};
    font-weight: 600;
    border-color: {{ $categoryNavActiveBg }};
}

.badge-count {
    background: {{ $badgeBg }};
    color: {{ $badgeText }};
    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: {{ $itemBg }};
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid {{ $cardBorderColor }};
}

.category-header h4 {
    color: {{ $headingColor }} !important;
    font-weight: 900;
    font-size: 1.6rem;
}

.faq-item {
    background: {{ $itemBg }};
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid {{ $cardBorderColor }};
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: {{ $shadowStyle }};
}

.faq-item:hover {
    background: {{ $itemBg }};
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-rgba-20);
}

.faq-question {
    padding: 1.25rem;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: {{ $questionBg }};
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid {{ $cardBorderColor }};
    box-shadow: none;
}

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

.faq-question:hover h5 {
    color: var(--primary) !important;
}

.toggle-icon {
    transition: transform 0.3s ease;
    color: var(--primary);
    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: 1px solid {{ $cardBorderColor }};
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: {{ $itemBg }};
    border-radius: 0 0 10px 10px;
}

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

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

.faq-actions {
    border-top: 1px solid {{ $cardBorderColor }};
    padding-top: 1rem;
}

.faq-actions .btn {
    background: rgba(0,0,0,0.02);
    border: 1px solid {{ $cardBorderColor }};
    color: {{ $textColor }};
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.faq-actions .btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.15);
    color: {{ $headingColor }};
    transform: translateY(-1px);
}

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

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

.faq-actions .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-rgba-10);
    font-weight: 600;
}

.faq-actions .btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: {{ $isDarkTheme ? 'var(--secondary)' : '#ffffff' }};
}

/* 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(--primary);
    color: var(--primary);
    background: var(--primary-rgba-10);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    font-weight: 600;
}

.load-more-btn:hover {
    background: var(--primary);
    color: {{ $isDarkTheme ? 'var(--secondary)' : '#ffffff' }};
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-rgba-30);
    border-color: var(--primary);
}

/* Search Results */
.search-results {
    background: {{ $itemBg }};
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid {{ $cardBorderColor }};
}

.search-results .faq-item {
    background: {{ $itemBg }};
    border: 1px solid {{ $cardBorderColor }};
}

.search-results .faq-question {
    background: {{ $questionBg }};
    border-bottom: 1px solid {{ $cardBorderColor }};
    box-shadow: none;
}

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

.search-results .faq-content {
    color: {{ $textColor }};
    text-shadow: none;
    font-weight: 500;
}

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

/* Quick Actions */
.quick-actions {
    background: {{ $questionBg }};
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid {{ $cardBorderColor }};
    box-shadow: none;
}

.quick-actions .btn {
    transition: all 0.3s ease;
    background: {{ $itemBg }};
    border: 1px solid {{ $cardBorderColor }};
    color: {{ $textColor }};
    backdrop-filter: blur(5px);
    font-weight: 600;
    box-shadow: none;
}

.quick-actions .btn:hover {
    transform: translateY(-2px);
    background: {{ $itemBg }};
    border-color: var(--primary-rgba-20);
    color: {{ $headingColor }};
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.quick-actions .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-rgba-10);
    font-weight: 700;
}

.quick-actions .btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: {{ $isDarkTheme ? 'var(--secondary)' : '#ffffff' }};
}

.quick-actions .btn-outline-secondary {
    border-color: {{ $cardBorderColor }};
    color: {{ $textColor }};
    background: rgba(0, 0, 0, 0.02);
    font-weight: 700;
}

.quick-actions .btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: {{ $headingColor }};
}

/* No Results */
.no-results {
    background: {{ $itemBg }};
    border-radius: 15px;
    border: 1px solid {{ $cardBorderColor }};
}

/* 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(--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.isRestaurant = {{ $isRestaurant ? 'true' : 'false' }};

        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 = this.isRestaurant ? [
            'colors',
            'vegetarian',
            'vegan',
            'delivery',
            'catering',
            'location'
        ] : [
            'honorarios',
            'primera consulta',
            'costos de servicios',
            'duración del proceso',
            'documentación necesaria',
            'contacto y agendamiento'
        ];

        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');

        const resultText = this.isRestaurant
            ? `${results.length} result${results.length !== 1 ? 's' : ''} found for "${this.currentSearch}"`
            : `${results.length} resultado${results.length !== 1 ? 's' : ''} encontrado${results.length !== 1 ? 's' : ''} para "${this.currentSearch}"`;
        this.searchResultsText.textContent = resultText;

        // 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 = this.isRestaurant
                ? `${resultCount} of ${this.allFaqs.length} questions`
                : `${resultCount} de ${this.allFaqs.length} preguntas`;
        } else {
            this.searchStats.textContent = this.isRestaurant
                ? `${this.allFaqs.length} questions available`
                : `${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;
        const isRestaurant = {{ $isRestaurant ? 'true' : 'false' }};
        if (remaining <= 0) {
            button.parentElement.style.display = 'none';
        } else {
            button.innerHTML = isRestaurant
                ? `<i class="fas fa-plus me-2"></i>View More Questions (${remaining} remaining)`
                : `<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');
    const isRestaurant = {{ $isRestaurant ? 'true' : 'false' }};
    btn.innerHTML = isRestaurant
        ? '<i class="fas fa-check me-1"></i>Thanks!'
        : '<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}`;
    const isRestaurant = {{ $isRestaurant ? 'true' : 'false' }};
    navigator.clipboard.writeText(url).then(() => {
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = isRestaurant
            ? '<i class="fas fa-check me-1"></i>Copied!'
            : '<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);
    const isRestaurant = {{ $isRestaurant ? 'true' : 'false' }};

    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 = isRestaurant
            ? `<i class="fas fa-plus me-2"></i>View More Questions (${remaining} remaining)`
            : `<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>