@extends('layouts.public')

@section('title', __('FAQs & Helpdesk'))
@section('meta_description', __('Answers to common questions about our services, procurement, engagements and careers.'))

@section('content')
    <x-page-hero :eyebrow="__('Helpdesk')"
                 :title="__('Frequently asked questions')"
                 :subtitle="__('Answers to the questions we are asked most often by clients, partners and applicants.')"
                 :breadcrumbs="[__('FAQs') => null]" />

    <section class="section">
        <div class="container-page max-w-4xl">
            <form method="GET" class="relative mb-12">
                <label for="faq-search" class="sr-only">{{ __('Search questions') }}</label>
                <x-icon name="search" class="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-text-muted" />
                <input id="faq-search" type="search" name="q" value="{{ $search }}"
                       placeholder="{{ __('Search questions…') }}" class="form-input py-3.5 pl-12 text-base">
            </form>

            @if ($categories->isEmpty() && $uncategorised->isEmpty())
                <x-empty-state icon="question"
                               :title="__('No matching questions')"
                               :message="__('Try a different search term, or contact our helpdesk directly.')">
                    <x-button :href="route('contact.index')" class="mt-6">{{ __('Contact support') }}</x-button>
                </x-empty-state>
            @endif

            @foreach ($categories as $category)
                <section class="mb-12" data-reveal>
                    <h2 class="mb-5 font-display text-title font-bold text-text">{{ $category->name }}</h2>

                    <div class="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-surface">
                        @foreach ($category->activeFaqs as $faq)
                            @include('public.partials.faq-item', ['faq' => $faq])
                        @endforeach
                    </div>
                </section>
            @endforeach

            @if ($uncategorised->isNotEmpty())
                <section class="mb-12" data-reveal>
                    <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('General') }}</h2>

                    <div class="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-surface">
                        @foreach ($uncategorised as $faq)
                            @include('public.partials.faq-item', ['faq' => $faq])
                        @endforeach
                    </div>
                </section>
            @endif

            <div class="rounded-2xl bg-primary-50 p-8 text-center">
                <h2 class="font-display text-title font-bold text-primary">{{ __('Still need help?') }}</h2>
                <p class="mx-auto mt-2 max-w-lg text-sm text-text-secondary">
                    {{ __('Our team responds to enquiries within two working days.') }}
                </p>
                <x-button :href="route('contact.index')" class="mt-6" arrow>{{ __('Contact support') }}</x-button>
            </div>
        </div>
    </section>
@endsection