@extends('layouts.site')

@section('meta_title')
    {{ __('site.nav_faq') }} — {{ brand_name() }}
@endsection

@section('title', __('site.nav_faq'))

@section('content')
    <div class="site-container  pb-16 px-2">
        <header class="my-6">
            <h1 class="text-3xl font-bold eca-theme-text">{{ __('site.nav_faq') }}</h1>
            <p class="mt-2 eca-theme-text-muted">{{ __('site.hero_subtitle') }}</p>
        </header>

        @if ($faqs->isEmpty())
            <p class="site-faq-empty">{{ __('site.empty_faq') }}</p>
        @else
            <div class="space-y-3">
                @foreach ($faqs as $faq)
                    <div x-data="{ open: {{ $loop->first ? 'true' : 'false' }} }" class="site-faq-item">
                        <button type="button" class="flex w-full items-center justify-between gap-4 px-5 py-4 text-start text-base font-semibold eca-theme-text rtl:text-right" @click="open = !open" :aria-expanded="open.toString()">
                            <span class="flex items-start gap-3 align-middle">
                                @php
                                    $iconRaw = is_string($faq->icon ?? null) ? trim($faq->icon) : '';
                                    $iconLooksLikeFile = $iconRaw !== '' && (
                                        filter_var($iconRaw, FILTER_VALIDATE_URL)
                                        || str_contains($iconRaw, '/')
                                        || preg_match('/\.(jpe?g|png|gif|webp|svg)$/i', $iconRaw)
                                    );
                                @endphp
                                <span class="site-faq-item__icon-wrap">
                                    @if ($iconLooksLikeFile)
                                        <img src="{{ site_media_url($faq->icon) }}" alt="" class="h-12 w-12 rounded object-cover" />
                                    @else
                                        <x-site.icon :name="$iconRaw ?: 'question-mark-circle'" class="h-7 w-7 text-brand-accent" />
                                    @endif
                                </span>
                                <span class="pt-1.5">{{ locale_field($faq, 'title') }}</span>
                            </span>
                            <span class="site-faq-item__chevron" aria-hidden="true">
                                @if (app()->getLocale() === 'fa')
                                    <span x-show="!open" x-cloak class="inline-flex"><x-site.svg-icon name="back" class="h-4 w-4" rotate="90" flip /></span>
                                    <span x-show="open" x-cloak class="inline-flex"><x-site.svg-icon name="back" class="h-4 w-4" rotate="-90" flip /></span>
                                @else
                                    <span x-show="!open" x-cloak class="inline-flex"><x-site.svg-icon name="back" class="h-4 w-4" rotate="-90" /></span>
                                    <span x-show="open" x-cloak class="inline-flex"><x-site.svg-icon name="back" class="h-4 w-4" rotate="90" /></span>
                                @endif
                            </span>
                        </button>
                        <div x-show="open" x-collapse class="site-faq-item__body rtl:pr-[3.25rem] ltr:pl-[3.25rem]">{{ locale_field($faq, 'description') }}</div>
                    </div>
                @endforeach
            </div>
        @endif

 
    </div>
@endsection