{% set _faq_page_id = _page_id if _page_id is defined else '' %}
{% set _cms_faqs = get_page_faqs(_faq_page_id, g.lang_code) if _faq_page_id else [] %}
{% set _faq_before_title = get_page_content(_faq_page_id, 'before_faq_title', g.lang_code) if _faq_page_id else '' %}
{% set _faq_before_content = get_page_content(_faq_page_id, 'before_faq_content', g.lang_code) if _faq_page_id else '' %}
{% if _faq_before_title or _faq_before_content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10">
    {% if _faq_before_title %}<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">{{ _faq_before_title }}</h2>{% endif %}
    {% if _faq_before_content %}<div class="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">{{ _faq_before_content|safe }}</div>{% endif %}
</div>
{% endif %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-6 text-center">{% trans %}Frequently Asked Questions (FAQs){% endtrans %}</h4>

    <div class="max-w-3xl mx-auto space-y-3">

        {% if _cms_faqs %}
        {% for faq in _cms_faqs %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{{ faq.question }}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                {{ faq.answer|safe }}
            </div>
        </div>
        {% endfor %}
        {% else %}

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">
                    {% if "compressor" in filetype %}
                        {% trans ft=filetype|capitalize|title|replace("-", " ") %}How to Use OnlineConvert's Free Online {{ ft }} Tool?{% endtrans %}
                    {% else %}
                        {% trans ft=filetype|capitalize %}How to Use OnlineConvert's Free Online {{ ft }} converter Tool?{% endtrans %}
                    {% endif %}
                </h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <ul class="list-disc list-inside space-y-2">
                    <li>{% trans %}Open{% endtrans %} <a href="{{ full_url('/') }}" class="text-primary dark:text-primary-light hover:underline">ONLINCONVERT.CC</a> {% trans %}Website in any browser.{% endtrans %}</li>
                    <li>{% if "compressor" in filetype %}
                        {% trans ft=filetype|capitalize|title|replace("-", " ") %}Click on the "{{ ft }}" button on the OnlineConvert's homepage.{% endtrans %}
                    {% else %}
                        {% trans ft=filetype|capitalize %}Click on the "{{ ft }} Converter" button on the OnlineConvert's homepage.{% endtrans %}
                    {% endif %}</li>
                    <li>{% trans fmt=fileformat|upper %}Then click on the format you want like this page is {{ fmt }} file{% endtrans %} {% if "compressor" in filetype %}{% trans %}Compressor{% endtrans %}{% else %}{% trans %}Converter{% endtrans %}{% endif %}.</li>
                    <li>{% if "compressor" in filetype %}
                        {% trans ft=filetype.split(" ")[-1]|capitalize|replace("-compressor", "") %}Select the {{ ft }} file you want to compress.{% endtrans %}
                    {% else %}
                        {% trans ft=filetype|capitalize %}Select the {{ ft }} file you want to convert.{% endtrans %}
                    {% endif %}</li>
                    <li>{% trans %}Click "Convert".{% endtrans %}</li>
                    <li>{% trans %}Wait for few minutes on next page to download your file.{% endtrans %}</li>
                </ul>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">
                    {% if "compressor" in filetype %}
                        {% trans ft=filetype|capitalize|title|replace("-", " ") %}What are other supported popular Formats in {{ ft }} OnlineConvert.cc Tool?{% endtrans %}
                    {% else %}
                        {% trans ft=filetype|capitalize %}What are other supported popular Formats in {{ ft }} converter OnlineConvert.cc Tool?{% endtrans %}
                    {% endif %}
                </h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p class="mb-2">{% trans %}Below are most popular supported{% endtrans %} <a href="{{ full_url('/converter/' ~ filetype ~ type|lower) }}" class="text-primary dark:text-primary-light hover:underline">{% if "compressor" in filetype %}{{ filetype|capitalize|title|replace("-", " ") }}{% else %}{{ filetype|capitalize }} {% trans %}converter{% endtrans %}{% endif %}</a></p>
                <ul class="list-disc list-inside space-y-1">
                    {% for type in (available_types().get(filetype) or {}).get('ext', []) if type != tu %}
                    <li><a href="{{ full_url(path='/do/' ~ type|lower, filetype='pdf') if filetype == 'pdf' else full_url('/converter/' ~ filetype ~ '/' ~ type|lower) }}" class="text-primary dark:text-primary-light hover:underline">
                        {% if available_types()[filetype]["category"] == "tool" %}
                            {{ _(available_types()[filetype]["_prefix"]) | replace("{}", type) | splitpart(0, '_') }}
                        {% else %}
                            {% if not available_types()[filetype]["_prefix"] %}
                                {{type}}
                            {% else %}
                                {{ _(available_types()[filetype]["_prefix"]) | replace("{}", type) | replace("-", " ") | splitpart(0, '_') }}
                            {% endif %}
                        {% endif %}
                    </a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{% trans %}Is There a Limit to the Numbers of Files I Can Convert?{% endtrans %}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p>{% trans %}Our online conversion service is 100% free and therefore; there is no limits to the numbers of files you can convert online. So, feel free to use our website as much as you want too.{% endtrans %}</p>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{% trans %}Is Your Conversion Services Really Free?{% endtrans %}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p>{% trans %}Yes, our service is completely free.{% endtrans %}</p>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{% trans %}What Happens to my Filed I uploaded? Are they even safe?{% endtrans %}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p>{% trans %}Your files are 100% safe on our servers. Once you process the file to conversion the file instantly deletes from the server. The storage server keeps the file for 24 hours and then automatically deletes it.{% endtrans %}</p>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{% trans %}What video formats do you support?{% endtrans %}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p>{% trans %}We support each and every video format on our platform. You can find out here: {% endtrans %}<a href="{{ full_url('/converter/video') }}" class="text-primary dark:text-primary-light hover:underline">{% trans %}All Video Converters{% endtrans %}</a></p>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                <h6 class="font-semibold text-gray-900 dark:text-white text-sm pr-4">{% trans %}Can I convert videos using my tablet or smartphone?{% endtrans %}</h6>
                <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0"></i>
            </button>
            <div class="faq-body hidden px-6 pb-4 border-t border-gray-100 dark:border-gray-800 pt-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                <p>{% trans %}Of course, you can convert your video, audio, docs, ebook, software, archive and more files on your tablet and smartphone.{% endtrans %}</p>
                <p class="mt-2">{% trans %}In case, you do not find what you were looking for, please connect with us at {% endtrans %}<a href="mailto:admin@onlineconvert.cc" class="text-primary dark:text-primary-light hover:underline">admin@onlineconvert.cc</a></p>
            </div>
        </div>

        {% endif %}
    </div>
</div>