@php
    $pageTitle = '자주 묻는 질문';
    $pageDesc  = '결제/발송/환불 등 자주 문의되는 내용을 빠르게 확인하세요.';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '고객센터', 'url' => url('/cs')],
      ['label' => '자주 묻는 질문', 'url' => url()->current()],
    ];

    $csActive = 'faq';
@endphp

@extends('web.layouts.subpage')

@section('title', '자주 묻는 질문(FAQ) | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU FAQ입니다. 결제/발송/환불/이용 관련 자주 묻는 질문을 확인하세요.')
@section('canonical', url('/cs/faq'))

@section('subcontent')
    @include('web.partials.content-head', [
        'title' => 'FAQ',
        'desc'  => '원하는 키워드로 빠르게 찾고, 카테고리별로 정리해서 확인하세요.'
    ])

    <section class="faq" aria-label="자주 묻는 질문">
        {{-- Tools --}}
        <div class="faq-tools">
            <div class="faq-search" role="search">
                <label class="sr-only" for="faqSearch">FAQ 검색</label>
                <input id="faqSearch" class="faq-search__input" type="search" placeholder="예) 휴대폰 결제, 비밀번호, 코드 확인" autocomplete="off">
                <span class="faq-search__icon" aria-hidden="true">⌕</span>
            </div>

            <div class="faq-cats" role="tablist" aria-label="FAQ 카테고리">
                <button type="button" class="faq-cat is-active" data-cat="all" role="tab" aria-selected="true">전체</button>
                @foreach(config('cs_faq.categories', []) as $c)
                    <button type="button" class="faq-cat" data-cat="{{ $c['key'] }}" role="tab" aria-selected="false">
                        {{ $c['label'] }}
                    </button>
                @endforeach
            </div>
        </div>

        {{-- List --}}
        <div class="faq-list" id="faqList">
            @foreach(config('cs_faq.items', []) as $idx => $it)
                <details class="faq-item" data-cat="{{ $it['category'] ?? 'etc' }}">
                    <summary class="faq-q">
                        <span class="faq-q__badge">Q</span>
                        <span class="faq-q__text">{{ $it['q'] ?? '' }}</span>
                        <span class="faq-q__chev" aria-hidden="true">▾</span>
                    </summary>
                    <div class="faq-a">
                        {!! nl2br(e($it['a'] ?? '')) !!}
                    </div>
                </details>
            @endforeach

            <div class="faq-empty" hidden>
                검색 결과가 없어요. 다른 키워드로 다시 시도해 주세요.
            </div>
        </div>
    </section>

    {{-- (선택) 하단 CS Quick 영역 재사용 가능 --}}
    @include('web.partials.cs-quick-actions')
@endsection

@push('scripts')
    <script>
        (() => {
            const wrap = document.querySelector('.faq');
            if (!wrap) return;

            const search = wrap.querySelector('#faqSearch');
            const catBtns = [...wrap.querySelectorAll('.faq-cat')];
            const items = [...wrap.querySelectorAll('.faq-item')];
            const empty = wrap.querySelector('.faq-empty');

            let activeCat = 'all';

            const apply = () => {
                const q = (search?.value || '').trim().toLowerCase();
                let visible = 0;

                items.forEach(el => {
                    const cat = el.dataset.cat || 'etc';
                    const text = el.innerText.toLowerCase();

                    const catOk = (activeCat === 'all') || (cat === activeCat);
                    const qOk = !q || text.includes(q);

                    const show = catOk && qOk;
                    el.style.display = show ? '' : 'none';
                    if (show) visible++;
                });

                empty.hidden = visible !== 0;
            };

            catBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    catBtns.forEach(b => {
                        b.classList.remove('is-active');
                        b.setAttribute('aria-selected', 'false');
                    });
                    btn.classList.add('is-active');
                    btn.setAttribute('aria-selected', 'true');
                    activeCat = btn.dataset.cat || 'all';
                    apply();
                });
            });

            search?.addEventListener('input', apply);

            apply();
        })();
    </script>
@endpush