@if(count($sss) > 0)
    <div class="container">
        <section class="faq">
            <h2 class="faq-heading">Sıkça Sorulan Sorular</h2>
            @foreach($sss as $key => $sssitem)
                <details class="faq-item">
                    <summary>
                        <span class="faq-index">{{$key + 1}}.</span>
                        <span class="faq-q">{{$sssitem->title}}</span>
                        <i class="fa-solid fa-circle-chevron-right faq-icon"></i>
                    </summary>
                    <div class="faq-content">
                        <div class="faq-inner">
                            <p>{{$sssitem->desc}}</p>
                        </div>
                    </div>
                </details>
            @endforeach
        </section>
    </div>
    <script>
        (function () {
            const items = document.querySelectorAll('.faq .faq-item');

            items.forEach(item => {
                const summary = item.querySelector('summary');
                const content = item.querySelector('.faq-content');
                const inner = item.querySelector('.faq-inner');

                content.style.height = '0px';

                summary.addEventListener('click', (e) => {
                    e.preventDefault();
                    const open = item.hasAttribute('open');


                    items.forEach(o => {
                        if (o !== item) collapse(o);
                    });

                    open ? collapse(item) : expand(item);
                });

                function expand(el) {
                    const c = el.querySelector('.faq-content');
                    const i = el.querySelector('.faq-inner');

                    el.setAttribute('open', '');
                    const target = i.scrollHeight;
                    c.style.height = '0px';
                    requestAnimationFrame(() => {
                        c.style.height = target + 'px';
                    });
                }

                function collapse(el) {
                    const c = el.querySelector('.faq-content');
                    if (!el.hasAttribute('open')) return;

                    c.style.height = c.scrollHeight + 'px';
                    requestAnimationFrame(() => {
                        c.style.height = '0px';
                    });

                    c.addEventListener('transitionend', function done(e) {
                        if (e.propertyName === 'height') {
                            el.removeAttribute('open');
                            c.removeEventListener('transitionend', done);
                        }
                    });
                }
            });
        })();
    </script>
@endif