@extends('template.layout')
@section('title', __('faq.page_title'))

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/preguntas-frecuentes.css') }}">
@endpush

@section('content')
    <!-- ==================== -->
    <!-- ACORDEÓN FAQ PREMIUM -->
    <!-- ==================== -->
    <section class="faq-premium">
        <div class="faq-premium-header">
            <div class="faq-premium-subtitle">
                <i class="fas fa-question-circle"></i> {{ __('faq.badge') }}
            </div>
            <h2 class="faq-premium-title">
                {{ __('faq.title') }}
            </h2>
            <p class="faq-premium-description">
                {{ __('faq.description') }}
            </p>
        </div>

        <div class="faq-premium-container">
            @php
                $faqs = __('faq.faqs');
            @endphp

            @foreach ($faqs as $index => $faq)
                <div class="faq-accordion {{ $index === 0 ? 'active' : '' }}">
                    <div class="faq-accordion-title">
                        <h4>{{ $faq['question'] }}</h4>
                        <div class="faq-accordion-icon">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-accordion-content">
                        <div class="faq-accordion-inner">
                            <p>{!! $faq['answer'] !!}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="faq-stats">
            <i class="fas fa-comments"></i> {{ count($faqs) }} {{ __('faq.stats_questions') }} |
            <i class="fas fa-clock"></i> {{ __('faq.stats_updated') }} |
            <i class="fas fa-headset"></i> {{ __('faq.stats_support') }}
        </div>
    </section>
@endsection

@push('js')
    <script src="{{ asset('assets/js/preguntas-frecuentes.js') }}"></script>
@endpush