@php
    $title = $data['title'] ?? 'Dúvidas Frequentes';
    $subtitle = $data['subtitle'] ?? '';
    $backgroundColor = $data['background_color'] ?? '#f8f9fa';
    $items = $data['items'] ?? [];

    $renderText = function($text) {
        if (is_string($text) && (strpos($text, '{"type"') === 0 || strpos($text, '{"content"') === 0)) {
            return app(\V2\Services\ContentRichEditor\Services\ContentRichEditorRendererService::class)->toHtml($text);
        }
        return $text;
    };
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};" id="faq-{{ $section['id'] }}">
    <div class="container">
        @if($title || $subtitle)
            <div class="row text-center" style="margin-bottom: 48px;">
                <div class="col-md-10 col-md-offset-1 ftco-animate">
                    @if($subtitle) <span class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary); font-weight: bold; display: block; margin-bottom: 8px;">{{ $subtitle }}</span> @endif
                    @if($title) <h2 style="font-size: 36px; font-weight: bold; color: #333;">{{ $title }}</h2> @endif
                </div>
            </div>
        @endif

        <div class="row text-center">
            <div class="col-md-10 col-md-offset-1 ftco-animate">
                <div class="faq-accordion" role="tablist">
                    @foreach($items as $index => $item)
                        @php 
                            $faqId = "faq-item-{$section['id']}-{$index}";
                            $linkText = $item['link_text'] ?? '';
                            $linkUrl = $item['link_url'] ?? '';
                        @endphp
                        
                        <div class="faq-card" style="margin-bottom: 16px; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border: 0; border-radius: 0.25rem; transition: 0.3s; overflow: hidden;">
                            {{-- Pergunta --}}
                            <div class="faq-header" 
                                 style="padding: 24px; cursor: pointer; background: #fff; display: flex; justify-content: space-between; align-items: center;"
                                 role="button" 
                                 tabindex="0" 
                                 aria-expanded="false" 
                                 aria-controls="{{ $faqId }}-answer"
                                 id="{{ $faqId }}-header"
                                 onclick="toggleFaq('{{ $faqId }}', this)"
                                 onkeypress="if(event.key === 'Enter' || event.key === ' ') { toggleFaq('{{ $faqId }}', this); event.preventDefault(); }">
                                
                                <h3 class="h6" style="margin: 0; font-weight: bold; color: #333; font-size: 18px; line-height: 1.4;">
                                    {{ $item['question'] ?? 'Pergunta sem título' }}
                                </h3>
                                
                                <div class="faq-icon-wrapper" style="margin-left: 16px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 50%; color: var(--tenant-primary); transition: 0.3s;">
                                    <i class="bi bi-plus-lg"></i>
                                </div>
                            </div>

                            {{-- Resposta --}}
                            <div class="faq-collapse" 
                                 id="{{ $faqId }}-answer" 
                                 role="region" 
                                 aria-labelledby="{{ $faqId }}-header"
                                 style="display: none;">
                                <div class="faq-body" style="padding: 24px; border-top: 1px solid #eee;">
                                    <div class="row">
                                        <div class="{{ !empty($linkUrl) ? 'col-md-9' : 'col-md-12' }}">
                                            <div class="faq-text" style="font-size: 16px; color: #666; line-height: 1.8;">
                                                {!! $renderText($item['answer'] ?? '') !!}
                                            </div>
                                        </div>
                                        @if(!empty($linkUrl))
                                            <div class="col-md-3 text-end" style="margin-top: 16px;">
                                                <a href="{{ $linkUrl }}" class="btn btn-danger btn-sm" style="padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-weight: bold; font-size: 11px; letter-spacing: 1px; border-radius: 30px;">
                                                    {{ $linkText ?: 'Acessar Link' }} <i class="fa fa-external-link" style="font-size: 10px; margin-left: 4px;"></i>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .faq-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
    .faq-header.active .faq-icon-wrapper { background: var(--tenant-primary) !important; color: #fff !important; transform: rotate(45deg); }
    .faq-header.active { background: #fdfdfd !important; }
</style>

@section('other-scripts')
<script>
    if (typeof toggleFaq !== 'function') {
        function toggleFaq(id, element) {
            const $header = $(element);
            const $answer = $(`#${id}-answer`);
            const isExpanded = $header.attr('aria-expanded') === 'true';
            
            // Fecha outros itens (estilo Accordion)
            $header.closest('.faq-accordion').find('.faq-collapse').not($answer).slideUp(300);
            $header.closest('.faq-accordion').find('.faq-header').not($header).removeClass('active').attr('aria-expanded', 'false');
            $header.closest('.faq-accordion').find('.faq-icon-wrapper i').not($header.find('.faq-icon-wrapper i')).attr('class', 'bi bi-plus-lg');

            // Toggle item atual
            $answer.slideToggle(300);
            $header.toggleClass('active');
            $header.attr('aria-expanded', !isExpanded);
            
            const $icon = $header.find('.faq-icon-wrapper i');
            if ($header.hasClass('active')) {
                $icon.attr('class', 'bi bi-plus-lg'); // O CSS rotaciona para parecer um X/Plus em 45 deg
            } else {
                $icon.attr('class', 'bi bi-plus-lg');
            }
        }
    }
</script>
@append