@extends('layouts.app')

@section('title', __('App Information | SavEX'))

@section('description', __('Find useful information about how SavEX works, including solidarity shopping, offers, draws, auctions, rewards, payments, and app services.'))

@section('canonical', route('app.info', ['locale' => app()->getLocale()]))

@section('content')
<section class="faq-page-hero section-padding">
    <div class="container">
        <div class="faq-page-head text-center">
            <div class="section-badge d-inline-flex align-items-center gap-2 mb-3">
                <span class="eyebrow-dot"></span>
                {{ __('FAQ') }}
            </div>

            <h1 class="section-title mb-3">
                {!! __('Frequently Asked <span>Questions</span>') !!}
            </h1>

            <p class="section-description mx-auto mb-0">
                {{ __('Find answers to the most common questions about SavEX, draws, auctions, rewards, and refunds.') }}
            </p>
        </div>
    </div>
</section>

<section class="faq-page-section section-padding">
    <div class="container">
        <div class="faq-wrapper">
            @forelse ($faqs as $faq)
                <div class="faq-item">
                    <button
                        class="faq-question"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#faq-{{ $faq->id }}"
                        aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                        aria-controls="faq-{{ $faq->id }}"
                    >
                        <span>{{ $faq->translated_question }}</span>
                        <strong>+</strong>
                    </button>

                    <div
                        id="faq-{{ $faq->id }}"
                        class="collapse {{ $loop->first ? 'show' : '' }}"
                    >
                        <div class="faq-answer">
                            {!! $faq->translated_answer !!}
                        </div>
                    </div>
                </div>
            @empty
                <div class="empty-state">
                    {{ __('No FAQs available now.') }}
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection